使用 Headless WordPress 实现更好的核心 Web Vitals

已发表: 2022-05-05

长期以来,创建出色的用户体验 (UX) 一直是成功的网络战略的关键要素,但随着用户对数字体验的期望达到新的高度,用户体验变得比以往任何时候都更加重要。

快速的数字加速导致对快速、无缝体验的需求不断增长,这些体验可以在任何设备上快速加载并做出良好响应,而今天的数字受众对任何不足之处都没有耐心。

在此背景下,Google 推出了 Core Web Vitals,这是一组以用户为中心的性能指标,可让网站所有者和建设者更好地了解他们正在创建的数字体验,并明确关注最终用户。

Core Web Vitals 是以用户为中心的性能指标,可让您更好地了解您创建的数字体验,并明确关注最终用户

Core Web Vitals 也已成为 Google 搜索算法中的一个排名因素,这意味着更快的网站和更好的用户体验不仅受益于更高的用户参与度,而且现在在搜索结果中也受到青睐。

这说明最终用户在您构建的所有体验中必须有多么重要,并且它具有现实世界的底线含义:具有强大核心 Web Vitals 的网站以更高的速度将访问者转化为客户。

虽然有许多方法可以优化以获得更好的整体用户体验,但无头或解耦网站架构为构建与 Core Web Vitals 一致的高性能网站和应用程序提供了一条清晰的路径,并为当今的数字消费者提供无缝的全渠道体验要求。

体验无头操作的力量——今天就注册一个免费的 Atlas 沙盒帐户!

在这篇文章中,我们将解释为什么 Headless WordPress 是通过强大的 Core Web Vitals 为您和您的客户提供卓越用户体验的最佳技术堆栈。 以下是我们将介绍的内容:

目录
1.什么是 Core Web Vitals?
2.无头 WordPress 的兴起
3. Atlas:完整的无头 WordPress 解决方案
4.使用 Atlas 拆除 Core Web Vitals 要求
5.使用 Faust.js 和 Atlas 设置、构建和部署您的站点
6.使用 Headless WordPress 激发您的创造力

什么是核心网络生命力?

Core Web Vitals 是 Google 的 Web Vitals 计划中包含的页面体验信号的一个子集,它为“在网络上提供出色的用户体验必不可少”的质量信号提供统一的指导。 从本质上讲,这些指标有助于确保您的网站提供访问者正在寻找的内容:可预测、响应迅速且快速的内容。

Core Web Vitals 列表预计会随着时间的推移而发展,但目前的列表集中在三个主要领域:页面加载速度、交互性和视觉稳定性,通过这三个指标的镜头:

Google 的核心 Web Vitals 列表
  • 最大含量涂料 (LCP):测量加载性能。 为了提供良好的用户体验,LCP 应在页面首次开始加载后的 2.5 秒内发生。
  • 首次输入延迟 (FID):衡量交互性——站点元素对点击或触摸的响应速度。 为了提供良好的用户体验,页面的 FID 应该小于 100 毫秒。
  • Cumulative Layout Shift (CLS):测量视觉稳定性——如果站点元素在没有被点击或触摸的情况下发生了变化。 为了提供良好的用户体验,页面应保持小于 0.1 的 CLS。

如上所述,Core Web Vitals 现在是 Google 搜索算法中的一个排名因素,这意味着速度更快、用户体验更好的网站在搜索结果中受到青睐。 这并不是微不足道的,因为具有强大核心 Web Vitals 的网站将访问者转化为客户的速度要高于具有较差 UX 的网站——因为它们提供了引人入胜的用户体验,并且这样做会获得更高的知名度!

网站所有者和建设者应该注意并可以开始使用 Google 的许多 Web 开发人员工具(包括 PageSpeed Insights、Lighthouse 或 Chrome 用户体验报告)来衡量 Core Web Vitals(如果他们还没有的话),这些工具会收集匿名的真实用户测量结果每个 Core Web Vitals 指标(以及更多)的数据。

通过这本免费的电子书了解更多关于衡量核心网络生命力的信息!

虽然与网站性能相关的因素对于 Google 的算法来说并不新鲜(移动响应能力和安全浏览 (HTTPS) 多年来一直是排名因素)但引入 Core Web Vitals 作为排名因素扩大了 Google 对性能的关注,并提供了代表不同方面的指标的用户体验。

简而言之,用户体验已经占据了中心位置,使用 Core Web Vitals 作为您网站的基准是为您的网站用户提供始终如一的出色体验的好方法。 也就是说,衡量 Core Web Vitals 只是方程式的一部分。


无头 WordPress 的兴起

随着对数字体验的期望不断增长以及对高性能网站的需求变得越来越重要,人们也正在采用新的框架和解决方案来正面应对这些挑战。

Headless WordPress 就是一个很好的例子,因为越来越多的网站所有者和建设者希望将他们最喜欢的前端框架与世界上最受欢迎的 CMS 结合起来。

无头架构通过解耦网站的前端和后端并使用 API 在它们之间提供数据来实现这一点。

就 WordPress 而言,这允许内容创建者继续依赖他们最喜欢的开源 CMS,而开发人员可以利用 Next.js 等工具和他们选择的现代前端框架来构建令人难以置信的网站和应用程序。

想尝试无头无风险?

立即注册一个免费的 Atlas 评估帐户!

在当今快节奏的数字市场中,无头模式无疑得到了广泛采用,尤其是在企业层面,大型企业正在通过打破内容创建者和 Web 开发人员之间长期存在的传统孤岛来重新发现他们的敏捷性。

封闭式的内容管理方法很快就过时了,因为它不仅会减慢上市时间并削弱投资回报率,而且通常会导致用户体验不太理想。

随着内容创建者面临更紧迫的最后期限并转向多合一 CMS 解决方案,他们并不总是为最终用户构建优化的体验。 事实上,在 WordPress 上构建的网站中,只有不到 30% 的网站拥有最佳的 Core Web Vitals 分数,随着对其他​​竞争对手平台的评估,这个数字会越来越低。

在 WP Engine 平台上构建的网站立即得到提升——超过 40% 达到了健康的 Core Web Vitals 阈值——但随着网站所有者和建设者寻找新的方法来构建更好的用户体验,无头架构继续成为实现使用内容创建者和开发者都喜欢的工具交付高性能网站。

事实上,无头网站通常会直接压低 Core Web Vitals 分数,超过 50% 的无头(前端)框架经常达到健康的 Core Web Vitals 分数。

同时,在没有 CMS 的情况下使用前端框架构建数字体验可能会限制内容创建者——Headless WordPress 为所有人解决的挑战。


Atlas:完整的无头 WordPress 解决方案

Atlas 是 WordPress 的完整无头解决方案,专为实现无头性能峰值而设计,同时满足开发人员和内容创建者的需求。

Atlas 为现代开发人员想要的一切提供支持:多个服务器端环境、来自 GitHub 分支的自动部署、静态和动态无头架构、您选择的 JavaScript 框架(React、Angular、Vue.js 或任何其他)以及100% 可编写脚本的命令行工具。

同时,Atlas 将首选开发人员体验与 WordPress 和 WP Engine 的技术领先地位相结合,让每个人都感到高兴——从您的开发人员和内容创建者到您的最终用户。

从性能的角度来看,Atlas 具有变革性。 由于 WP Engine 已经是地球上管理速度最快的 WordPress 平台,因此将 Atlas 和 Node.js 添加到堆栈中会以指数方式提高速度,执行页面的速度比传统 WordPress 快 10 倍。

最终结果? 开发人员和内容创建者能够通过始终高于基准的 Core Web Vitals 联合力量并创建个性化的前端体验。


使用 Atlas 拆除 Core Web Vitals 要求

Atlas 的性能优势确实具有变革性,虽然用户会立即看到漂亮页面的快速交付的不同,但更高的性能也将反映在您网站上更好的 Core Web Vitals 指标中。

Android Authority 是最大的致力于 Android 操作系统的独立出版物,于 2019 年加入 WP Engine。随着他们的网站不断发展,Android Authority 的数字团队开始评估 Headless WordPress,以确保他们为未来构建提供可扩展性选项和性能可以满足他们不断增长的需求。

在使用 Atlas 升级他们的网站后,Android Authority 看到了惊人的结果——包括 Core Web Vitals 在内的 Google Lighthouse 指标提高了 6 倍,并且在桌面和移动设备上的速度比任何竞争对手都快。

您也可以通过在 wpengine.com/atlas 上注册一个免费的 Atlas 沙盒帐户来亲身体验 Atlas。

沙盒帐户将允许您的开发团队潜入 Atlas,它包括一个沙盒 WordPress 站点与我们的“无托管”配对,它允许您在不打开 WP 引擎帐户的情况下构建和服务您的站点的前端。

您还可以找到范围广泛的教程和文档以及其他开源工具,包括 Faust.js 和 Atlas Content Modeler(更多内容见下文)。 与往常一样,如果您对访问 Atlas 有任何疑问,可以随时与我们的一位专家交谈。


使用 Faust.js 和 Atlas 设置、构建和部署您的站点

您可以开始使用 headless 的最快方法之一是使用 Faust.js,这是一个开源前端框架,它使 Headless WordPress 的数据获取、页面呈现和用户身份验证变得简单。

Faust.js 专注于在使用 Headless WordPress 构建时提供最佳的开发人员体验,同时保持 WordPress 发布体验的熟悉度。

以下是 Faust.js 提供的一些功能:

  • 静态站点生成器和服务器端渲染:Faust 构建在 Next.js 之上,允许您利用 Next.js 已经提供的 SSG 和 SSR
  • GraphQL :Faust 使用最先进的 GraphQL 客户端,让您无需提前了解 GraphQL 查询即可查询 WordPress WPGraphQL API。 当你第一次看到这个动作时,感觉就像魔术一样,Faust 是第一个提供这种功能的框架。 永远不要再考虑编写 GraphQL 查询!
  • 内容预览:Faust 解决了 Headless WordPress 一致预览的棘手挑战。
  • 身份验证:Faust 具有用于与 WordPress 后端进行身份验证的内置机制,因此您可以轻松构建门控内容、电子商务体验或发出其他经过身份验证的请求。
  • React : Faust 使您能够使用最流行的前端库构建整个前端。
  • React hooks : Faust 是 WordPress API 的自然扩展,因为它使从 WordPress 获取数据变得非常简单。
  • 自定义帖子类型:由于 Faust 帮助您获取数据的独特方式,将自定义帖子类型添加到您的 WordPress 网站,然后在前端访问它们是微不足道的。
  • 灵活性:虽然 Faust 在使用 Next.js 和 React 时效果最好,但如果您想使用其他工具,例如 Gatsby、Nuxt 和 SvelteKit,您可以这样做!

单击此处立即开始使用 Faust,或查看此分步网络研讨会,深入了解在构建新战线时将使用的工具、语言、API、框架等- 结束 Next.js 之上的体验并使用 Atlas 进行部署。


使用 Headless WordPress 激发您的创造力

随着数字加速继续推动对更快、更个性化、全渠道体验的需求,Headless WordPress 为网站所有者、网站建设者和他们创建的数字体验提供了广泛且不断增长的可能性列表。

随着 Core Web Vitals 继续在 Google 的搜索算法中发挥重要作用,使用 Atlas 正面满足这些指标是一种可靠的方式,不仅可以满足最高标准的页面体验,而且可以构建更好、更易于使用的网站为您的最终用户。

立即注册一个免费的 Atlas 沙盒帐户,亲身体验 Headless WordPress!