编辑注:以下文章由 XWP 的策略师 Leo Postovoit 撰写。XWP。
NOVA Entertainment 是澳大利亚最知名的媒体品牌之一,在广播、媒体和本地内容方面拥有 19 年的历史;而 GOAT 是 NOVA 的流行文化、新闻和娱乐平台,专为移动优先受众打造。
GOAT 是 NOVA 的第一个受益于渐进式优先 WordPress 构建开发的网站。由于 GOAT 的编辑目标包括以易于访问、便捷和快速的形式向人们提供其内容,因此性能和可用性是重中之重。本研究回顾了 AMP 和 PWA 如何对 Goat 最近的技术重新发布产生影响。
挑战
GOAT 网站在性能和可用性方面遇到了问题。为了改善用户体验和与许多设备的兼容性,首要任务是提高网站的性能。网站在呈现内容和资产方面的延迟是用户及其现场和分享行为的障碍。这并不奇怪,因为研究表明性能对于网站获得的参与度至关重要。
今年在东京举行的技术大会上,谷歌工程师 Jeany Halliman 开始她的演讲关于 Google 对媒体网站访问者进行的一项研究,“他们在浏览网站时最不喜欢的一件事”。
“来自广告业务,我总是认为是广告(访问者不喜欢)。但大多数用户表示这是一个速度很慢的网站。”——Jeany Halliman

此响应与页面速度对跳出率的众所周知的影响明显相关,但由于许多媒体网站最近对专横的广告策略给予了关注和“强烈反对”,因此它优先于页面广告让许多人感到惊讶。
机会
NOVA 联系了 WordPress 工程领域的生态系统领导者 XWP,以及与 Google 合作维护官方 AMP WordPress 插件 的维护者。XWP 以为 Rolling Stone、News Corp Australia 和 Rogers 等主要出版商以及 Cloudinary、Google、BigCommerce 和 Automattic 等技术合作伙伴提供优雅而复杂的解决方案而闻名,其工作重点在于构建一个更好的网络。
由于性能、可扩展性和可用性是 NOVA 利益相关者概述的关键目标,因此 XWP 明确渐进式 AMP 方法是实现这些目标的途径。
虽然迁移到 AMP 优先策略的主要目标很明确:创建用户乐于返回并分享的快速体验,但同样重要的是通过包括 CI/CD、自动化测试和高可用性托管在内的最佳开发实践来确保可扩展性和稳定性。考虑到高代码质量和现代 WordPress 实践,GOAT 网站不仅快速,而且经久耐用。
解决方案
凭借 XWP 在 AMP 和其他影响性能的方法方面的经验,他们考虑了各种实现方式来实现 NOVA 对 GOAT 网站的目标。AMP 优先策略最合适,因为它允许围绕单个代码库进行流线型开发。
更进一步,GOAT 似乎是 PWA 功能插件(XWP 和 Google 之间的另一项协作)的一个很好的用例。这增加了提供离线模式、通知等功能的能力,这些功能由服务工作者提供支持。并且定义的解决方案利用了 amp-install-serviceworker 组件,这使得将 AMP 和 PWA 的优势结合起来比以往任何时候都更容易。
虽然今天包含的 PWA 功能范围有限,但长期目标是增加在台式机和移动设备上的可安装性、更丰富的离线模式和预取页面、原生推送通知等功能,就像网络上的其他强大 PWA 一样。
整合广告
当广告加载配置不当时,它会导致页面性能不佳,尤其是在像 GOAT 这样的富媒体网站上。与 AMP 合作意味着 XWP 实施 GOAT 广告堆栈的方法必须遵守 AMP 标准。虽然必须做出一些让步来适应不完全兼容 AMP 的广告提供商,但总体效果是一个高性能的依赖广告的媒体网站。两全其美:良好的用户体验,不会因加载不佳的广告而降低。
结果
正如讨论的那样,Goat 是 Nova 的第一个网站,它将采用统一的编辑工作流和以性能为重点的主题构建,作为 PWA 网站,所有模板都构建为 Native AMP。性能结果显而易见:
- 跨多个属性统一编辑体验
- Google Pagespeed Insights 得分从 7(是的,7)提高到移动设备上的 77
- WebPageTest 3G 测试:之前 / 之后。关键点:开始渲染时间减少了 1.5 秒。交互时间从 43 秒减少到仅 10 秒
- Lighthouse 测试:之前 / 之后。首次内容绘制从 5.8 秒减少到 2.5 秒(减少 3.3 秒)。性能得分从 7 提高到 65。首次 CPU 空闲时间从 16.2 秒减少到 5.9 秒
- GTmetrix:之前 / 之后。PageSpeed 得分从 D(63%)提高到 B(82%)
开始使用 AMP
根据 Goat 网站 AMP 优先策略获得的结果,我们建议更多地了解 AMP 如何成为您当前业务挑战的解决方案。
- 要详细了解 AMP,请访问 amp.dev 上的项目主页。
- 要评估您网站的兼容性,并了解您是否也可以获得 AMP 的性能和用户体验优势,请查看 AMPized.com,这是 XWP 的一项服务,可为您的 WordPress 网站带来 AMP 的优势。
作者 Leo Postovoit,XWP 策略师