AMP

Setka 提供美观的帖子设计，并支持 AMP

未分类

编辑注：以下内容最初发布在 Setka 的博客上。

amp-post-3.png

Setka 已将其 WordPress 插件与 AMP WP 插件集成

技术公司 Setka 创造的产品可帮助发布者和品牌轻松制作美观且引人入胜的内容。Setka 是 WordPress VIP 技术合作伙伴。 其中一款产品 Setka Editor 是一款所见即所得编辑器，允许用户在无需编写代码的情况下拼凑设计精良的文章页面。其团队分布在旧金山、纽约、柏林、明斯克和莫斯科，并以这些城市为基地。

现在，Setka 已将其WordPress 插件与AMP WP 插件集成。当在同一网站上安装时，它们会自动提高移动页面的加载速度，同时保留风格和品牌元素。

继续阅读以了解有关此改进的更多信息，并了解如何在 RealtimeBoard 的企业博客上使用它。

AMP 集成的挑战

Setka 发现与 AMP 客户端集成有几个优势，这些客户端将编辑内容用作品牌建设、潜在客户生成和潜在客户培育的关键营销支柱：页面加载速度更快、缓存发生在 Google 服务器上，并且客户端可以创建美观、可自定义的设计，这些设计可在移动设备上良好运行。

“我们希望让 WordPress 插件用户创建的编辑内容 100% 兼容 AMP，同时让任何设计元素（包括交互式和动画元素）都采用 AMP 格式。”

Setka 的联合创始人兼首席执行官 Katya Bazilevskaya

为了确保在所有设备上的速度和可用性，Setka 必须实施 AMP 格式的所有要求：专有 HTML 标签、添加不属于 AMP 库的外部脚本的限制，以及内联样式的最大大小为 50 kb。

此外，Setka 希望确保它适用于 AMP WP 插件中的所有三种模式

  • “经典”为主题提供现成的模板，并允许 Googlebot 在安装插件后立即索引网站页面。
  • “配对”假设网站所有者或主题创建者已为 AMP 和网站的其他版本创建了单独的模板。
  • “原生”是无缝集成，其中网站是专门为 AMP 创建的，无需创建单独的链接、模板等。

Setka Editor 插件在所有三种模式下保留功能，并允许用户将单独的元素转换为 AMP 符号。

Setka 的解决方案

作为集成的一部分，Setka 开发人员为与 AMP 符号不兼容的元素编写了四个清理器，并为符合设计要求的元素创建了更小的样式文件。

  1. 动画清理器将 Setka Editor 动画转换为 AMP 动画，同时保留任何交互式功能，例如针对特定用户操作的激活或更改状态的元素。
  2. 嵌入元素清理器将响应式嵌入转换为相关的 AMP 元素，并将其正确集成到页面中。
  3. 图库清理器将用于显示一系列图像的组件转换为相关的 AMP 元素。
  4. 图像清理器使用所有可用分辨率显示 srcset 属性，允许浏览器决定哪种尺寸最适合用户。这使图像加载速度更快，并允许内容适应设备的屏幕尺寸。

为了让客户能够设置显示内容的主题，Setka 创建了样式管理器。在其中，用户可以为其页面上的不同元素配置样式。为了与 AMP 插件集成，开发人员更改了生成样式的过程，并设法适应 50 kb 的限制，为添加插件的外部样式留出了一些空间。

由于 XWP 创建的 tree shaking 技术，AMP WP 插件只选择页面上实际使用的样式，从最终版本中删除额外的样式。这允许各种插件添加样式，而无需担心页面无法通过 AMP 验证。

即使是 WordPress VIP 平台的客户也可以使用该插件，因为它考虑了该平台的特定基础设施，包括其文件系统。

提高 RealtimeBoard 的页面加载速度

Setka 测试此解决方案的第一个项目是 RealtimeBoard，这是一家致力于为分布式团队打造可视化协作平台的软件公司。

RealtimeBoard 的公司博客是其营销策略的重要组成部分。团队希望它在技术领域的类似解决方案中脱颖而出，这需要仔细考虑其企业标识。这就是使用 Setka 编辑器创建文章、访谈和案例研究设计的原因。

与此同时，RealtimeBoard 团队对 AMP 的功能很感兴趣，因为 AMP 可以提高移动页面加载速度，同时保留设计元素的多样性。

Setka 开发人员帮助以配对模式调整 RealtimeBoard 博客的 WordPress 主题。由于发布了样式管理器，网站上使用的样式已准备好用于 AMP 内容。在实施 AMP 后，博客页面的平均首次有意义绘制时间从 7.2 秒缩短到 1.9 秒。

首次有意义绘制和交互时间指标使用 Chrome DevTools 中的 Lighthouse 3.0.3 测量，并为从 Google AMP 缓存加载特定页面启用了网络限制（快速 3G，4 倍 CPU 速度降低）。视频中的时间以秒为单位显示

“我们努力创建具有吸引力和非凡设计的内容。与此同时，我们希望用户可以在移动设备上方便地加载我们的文章。生成 AMP 页面只需几个简单的步骤，这让我们有机会更快地满足用户需求。”

Yegor Korobeynikov，RealtimeBoard 品牌体验主管