WordPress 的 Google Core Web Vitals:如何测试和改进它们

目录


右键点我复制链接地址,分享页面有积分。


听说过 Google Core Web Vitals 项目,但不确定它如何连接到您的 WordPress 网站?或者您可能不知道 Core Web Vitals 项目是什么以及为什么它对 WordPress 很重要?

不管怎样,这篇文章将涵盖您需要了解的有关 Core Web Vitals 和 WordPress 的所有内容。我们将告诉您它们是什么、如何测试它们以及如何提高您网站的分数以创造更好的用户体验,如何提高您网站的搜索排名。


什么是 Google 核心网络指标?

Core Web Vitals 是 Google 的一项新举措,旨在衡量和改善网络用户体验。Core Web Vitals 不关注诸如整个网站加载时间之类的通用指标,而是关注 WordPress 网站的性能如何与提供高质量的用户体验相联系。

用户关心他们开始与页面交互的速度。这正是 Core Web Vitals 指标旨在衡量的目标。

目前,有三个核心 Web 指标: 最大内容绘制 (加载性能)、 累积布局偏移 (视觉稳定性)和 首次输入延迟 (交互性)。

根据谷歌的说法,这些指标是提供良好用户体验的最重要指标。

如果您认为这些名称令人困惑,并且您倾向于将一种指标与另一种指标混合使用,请不要担心!我们将以最简单的方式解释每个指标。我们希望您了解每个 Core Web Vital 的含义及其对用户体验的影响。

这是提高分数以及整体 SEO 和 WordPress 性能的第一步。

最大内容绘制 (LCP)

largest-contentful-paint

最大内容绘制 (LCP) 衡量加载网站上最有意义的内容所需的时间 – 通常是网站的重点部分或特色图像。

根据 Google 的说法,加载页面主要内容所需的时间会影响用户感知网站加载的速度。

实际示例:您登陆页面后并没有看到顶部图像立即完全显示。你会很生气,对吧?您甚至会考虑立即离开该页面。这就是为什么“最大内容绘制”指标与用户体验密切相关,而不是整个网站的加载时间。

每个站点的 LCP“元素”都不同,站点的移动版本和桌面版本之间的 LCP“元素”也不同。有时,LCP 元素可能是图像,而有时,它可能只是文本。

如果您想知道什么是合适的 LCP 时间,以下是 Google 的阈值:

  • 好 – 小于或等于 2.5 秒
  • 需要改进 – 小于或等于 4.0 秒
  • 较差 – 超过 4.0 秒。

旁注:LCP 与 首次内容绘制 (FCP)非常相似,FCP 是 PageSpeed Insights 中包含的另一个指标。

主要区别在于 LCP 测量“主要”内容加载的时间。FCP 专注于“第一个”内容加载的时间——这可能是闪屏或加载指示器,这是一个不太相关的用户体验元素。

累积布局偏移 (CLS)

cumulative-layout-shift

累积布局偏移 (CLS) 衡量网站内容在加载时“偏移”或“移动”的程度。

实际示例: 您正要点击链接或 CTA,但您无法执行此操作,因为您的内容在加载后刚刚向下移动。你的用户体验很糟糕,这就是布局的转变。当您因延迟加载内容导致按钮移动而意外点击错误按钮时,也会出现同样的情况。

或者,您是否曾经访问过新闻网站,随着网站加载广告,文章中的内容不断变化,而您无法继续阅读?这也是布局的转变。

您可以从自己身上看到累积的布局变化对用户来说非常烦人,以及他们将如何获得糟糕的体验。

以下是 Google 定义 CLS 分数的方式:

  • 好 – 小于或等于 0.1 秒
  • 需要改进 – 小于或等于 0.25 秒
  • 较差 – 超过 0.25 秒。

首次输入延迟 (FID)

FID-score

首次输入延迟 (FID) 测量用户与页面上的某些内容交互(例如,单击按钮或链接)到其浏览器可以开始处理该事件之间的时间。

实际示例:如果您单击按钮展开手风琴部分,您的网站需要多长时间才能响应并显示内容?

首次输入延迟可能是最难理解和优化的指标,也是因为它深受 JavaScript 的影响。

假设您通过移动设备登陆某个网站并单击链接,但没有立即得到响应。这可能是因为您的手机正忙于处理来自该网站的大型 JavaScript 文件。

以下是 Google 定义 FID 分数的方式:

  • 好 – 小于或等于 100 毫秒
  • 需要改进 – 小于或等于 300 毫秒
  • 较差 – 超过 300 毫秒。

核心网络指标是否会作为排名因素影响 SEO?

2021 年 6 月,Google 将开始使用 Core Web Vitals 作为排名因素 – 因此,这些指标可能会影响您的 SEO 性能。

核心 Web Vitals 将与 HTTPS 安全性、安全浏览、移动友好性和侵入性插页式指南一起成为 新页面体验信号的一部分。

核心网络指标将影响移动和桌面搜索结果,以及您的网站是否出现在热门故事中。以前,您的网站需要使用 AMP 才能出现在热门故事中。当 Google 推出这一更改时,情况将不再如此,但您的网站将需要满足特定的最低 Core Web Vitals 分数才能出现在热门故事中。

更重要的是,似乎需要满足所有核心网络指标才能 提高网站排名。无索引页面的 Core Web Vitals 分数 也可能很重要。

简而言之:如果您关心 SEO 性能,那么现在必须提高您的 Core Web Vital 分数。


如何在 WordPress 上测试和测量核心网络指标

您可以使用 Google 为 Web 开发人员提供的所有工具来测试和衡量 Core Web Vitals,从 PageSpeed Insights 到 Chrome DevTools、CrUX Report 等等。

如下图所示,Google 的工具测量所有三个指标 – Chrome DevTools 和 Lighthouse 除外。

这两个工具使用总阻塞时间作为第一输入延迟的代理。这是因为 FID 只能用真实的用户数据(现场数据)来测量,而 Lighthouse 只提供实验室数据。

Vitals-Tools
Google 衡量核心网络指标的工具

如果您更喜欢使用其他性能工具,您应该知道 GTmetrix 和 WebPageTest 都已开始使用Lighthouse 性能评分。

请记住,这两个工具仅向您提供最大的内容绘制和累积布局转变分数。

原因总是相同的:首次输入延迟只能通过真实的用户交互来测量,而这些工具依赖于 Lighthouse 实验室数据。

现在让我们来看看两个最流行的工具:PageSpeed Insights 和 Search Console。第一个可以帮助您检测单个页面问题;另一个允许您诊断站点范围内的问题。

如何使用 PageSpeed Insights 测试和衡量核心 Web 指标

根据 Core Web Vitals 测试网站页面的最简单方法是通过 Google PageSpeed Insights。

谷歌的工具提供了所有三个指标的数据,并给出了提高性能的具体建议。

诊断部分将成为您获得更好分数的最佳盟友!

只需插入您网站的 URL,您就会在现场数据(基于 CrUX 报告)和实验室数据(基于 Lighthouse 6.0)中看到核心 Web Vitals 指标。

Core Web Vitals 指标标有蓝丝带——只要获得它,就满足了 Google 要求的阈值。

PageSpeed-score-Bad-CLS-grade
PageSpeed 分数

您应该记住一些注意事项:

  • 现场数据和实验室数据之间的核心 Web Vitals 分数可能略有不同。在上面的屏幕截图中,根据现场数据,LCP 为 1.8 秒,根据实验室数据,LCP 为 2.2 秒。这是正常的,这取决于数据的收集方式。
  • 运行测试时没有任何现场数据不是问题。这是因为没有足够的真实用户数据。它不会影响您的核心网络生命,因为 PageSpeed Insights 会考虑页面速度得分的实验室数据。如果您想知道实验室数据中未包含的首次输入延迟会发生什么情况,您将在以下内容中得到答案几行!
  • 始终检查移动和桌面结果。两者之间的核心 Web Vitals 指标会有所不同。请记住,移动分数是最相关且 最具挑战性的。

现在让我们看看如何使用 PageSpeed Insights 来识别需要改进的 Core Web Vitals 元素。

通过 PageSpeed Insights 发现最大的内容绘制元素

正如我们所解释的,LCP 分数衡量最有意义的元素对访问者可见所需的时间。

要发现站点的最大内容绘制元素,请向下滚动到“诊断”部分并展开最大内容绘制元素选项卡。

在那里,Google 将显示用于测量 LCP 的元素的 HTML。

例如,在桌面版 WordPress.org 主页上,LCP 元素是一个图像:

google-core-web-vitals-2-lcp-element-desktop
桌面上的 LCP 元素 – PageSpeed Insights

但是,在网站的移动版本上,LCP 元素是副标题文本:

LCP-mobile-CWV
来自移动设备的 LCP 元素 – PageSpeed Insights

使用 PageSpeed Insights 发现累积布局移动元素

快速回顾一下:累积布局转变涉及您的网站加载方式以及您的内容在加载新内容时是否“移动”。

要查找网站上正在“变化”并影响您的分数的各个元素,请转到诊断区域中的避免较大的布局变化部分:

google-core-web-vitals-4-cumulative-layout-shift
CLS 元素 – PageSpeed Insights

使用 PageSpeed Insights 发现首次输入延迟和总阻塞时间

首次输入延迟与用户交互有关,还记得吗?意思是,页面在与链接或按钮等元素交互后需要多长时间才能响应。

这就是为什么 FID 基于实际用户数据,并且您在实验室数据中找不到它的分数。正如我们所解释的,您只会在“现场数据”部分中看到 FID 时间 – 并且仅当 CrUX 报告收集了足够的数据时。

在现场数据中,总阻塞时间 (TBT)将取代首次输入延迟。

TBT
总阻塞时间取代了实验室数据中的首次输入延迟。

只要提高总阻塞时间,就可能提高 FID 分数。

如果您的 TBT 分数不好,您应该转到“诊断”部分中的“尽量减少第三方使用”部分。

在这里,您将看到可以最大限度地减少第三方使用的情况。这是您需要解决的主要性能问题之一 – 除非它已经解决并包含在“通过审核”部分中,如下所示:

minimize-thirdy-party
最大限度地减少第三方使用推荐 – PageSpeed Insights

如何在 Search Console 上阅读核心网络指标报告

如果您想诊断整个网站的问题,您应该使用 Google Search Console 中的 Core Web Vitals 报告。

该报告基于 CrUX 真实用户数据的汇总。因此,报告中包含的数据可能需要一段时间才能报告问题。这就是为什么 Lighthouse 的实验室数据始终很有价值。

也就是说,Core Web Vitals 报告非常适合识别需要关注的页面组(无论是桌面版还是移动版)。

CWV-SC-Console-report
Search Console 中的 Core Web Vitals 报告 – 概述

打开报告后,您会发现一个“详细信息”选项卡,其中按多个条件对 URL 效果进行分组:

  • 状态(差或需要改进)
  • 指标类型(例如,CLS 问题:大于 0.25(桌面))
  • URL 组(具有相似性能的 URL 列表)。

一旦修复了需要改进的 URL,您还可以单击“验证”列并继续使用“验证修复”选项。请记住,验证过程最多需要两周时间 – 请耐心等待!

Core-Web-Vitals-report-mobile-tab
Search Console 中的 Core Web Vitals 报告 -“详细信息”选项卡

如何使用 Chrome 扩展衡量核心网络指标

如果您正在寻找有用的 Chrome 扩展程序,您可以选择 Web Vitals。

它为您提供正在浏览的任何页面的 Core Web Vital 分数:

web-vitals-extension
Web Vitals Chrome 扩展程序

您可能还想尝试 CORE Serp Vitals,它直接在 SERP 上向您显示 Core Web Vitals 结果。请记住,您需要输入 Chrome UX Report API 密钥才能让扩展程序运行。

cwv-extension
CORE Serp Vitals Chrome 扩展

如何提高 WordPress 的核心网络指标

现在,关键问题是——如果您目前没有达到 Google 对三个 Core Web Vitals 指标的建议,那么如何优化您的 WordPress 网站以提高 Core Web Vitals 分数?

每个指标的策略都不同。大多数优化都涉及实施 WordPress 性能最佳实践,尽管有几个重点 – 这就是为什么选择最好的 WordPress 缓存插件将帮助您毫不费力。

如何改进 WordPress 上最大的内容绘制

优化最大内容绘制是最直接的指标,因为它几乎完全是 WordPress 性能最佳实践:

  1. 设置页面缓存。 页面缓存 可加快服务器响应速度并减少服务器响应时间 (TTFB)。
  2. 优化浏览器缓存。 您应该为浏览器缓存中保存的静态文件设置正确的选项。通过这样做,您将解决“使用高效的缓存策略提供静态资源”PageSpeed Insights 建议。
  3. 优化您的图像。 很多时候,您的 LCP 元素将是图像。 优化图像 将加快您的网站速度并解决 PageSpeed 建议,例如“适当调整图像大小”、“延迟屏幕外图像”、“以下一代格式提供图像”和“有效编码图像”。
  4. 优化您的代码。 在主要内容之前加载不必要的 CSS 或 JavaScript 文件会减慢加载时间。您可以通过消除 WordPress 网站上的渲染阻塞资源来解决此问题。您还应该缩小 CSS 和 Javascript 文件并删除未使用的 CSS。优化代码将帮助您解决“避免链接关键请求”PageSpeed 建议。
  5. 使用服务器级压缩。使用 Gzip 或 Brotli 压缩将减小站点的文件大小,从而加快 LCP 速度并解决“启用文本压缩”建议。
  6. 对重要资源使用预连接。预连接可让您尽早建立重要的第三方连接,并解决“预加载密钥请求”和“预连接到所需源”的建议。您可以 在这里了解更多信息。
  7. 使用面向全球受众的内容交付网络 (CDN)。如果您的受众遍布全球,CDN 可以加快世界各地访问者的 LCP 时间。这是减少首字节时间 (TTFB) 的另一种有效方法。

如何改进 WordPress 上的累积布局偏移

优化累积布局转换更具技术性,因为它更多地处理站点的代码。

一些最常见的问题和修复方法是:

  1. 修复没有尺寸的图像– 如果您通过 WordPress 编辑器添加图像,WordPress 会自动为您添加尺寸。但是,如果您使用代码在任何位置手动添加图像,请确保添加尺寸。然后,您将讨论有关提供缩放图像的最佳实践。
  2. 修复没有尺寸的广告、嵌入内容和 iframe – 就像图像一样,加载没有尺寸的嵌入内容也会导致问题。 使用这些嵌入物时,请务必 指定尺寸。或者,如果放置广告,请确保 为每个广告“预留”空间 。
  3. 优化网页字体 (FOIT/FOUT) – 如果您使用自定义网页字体,则延迟加载的字体可能会导致诸如不可见文本闪烁 (FOIT) 或无样式文本闪烁 (FOUT) 等问题。因此,您将不会遵循 PageSpeed 建议:“确保文本在网页字体加载期间保持可见”。解决此问题的一种策略 是预加载网络字体。
  4. 请小心注入的内容 – 不要在现有内容之上动态注入任何内容,除非它是为了响应用户的操作。

如何改善 WordPress 的首次输入延迟

优化首次输入延迟是最复杂的,因为它完全涉及代码。具体来说,您需要限制大量 JavaScript 执行,以便浏览器仍然可以快速响应用户交互。

如果可能的话,您应该首先消除不必要的 JavaScript。

通过这样做,您将解决 PageSpeed 建议,例如“减少 javascript 执行时间”、“删除未使用的 JavaScript ”、“最小化主线程工作”和”延迟解析Javascript” 。

对于 LCP,优化代码和图像、使用服务器级压缩以及对重要资源使用预连接可以帮助您提高 FID 分数。

一般来说,如果您不是开发人员,改进 FID 可能会很困难。如果你想更深入地挖掘,Google 对优化该指标的更多技术部分有一个很好的解释。


如果核心网络指标没有改善,提升 WordPress 性能的技巧

如果您开始应用 PageSpeed Insights 建议,但您的 Core Web Vitals 成绩没有您预期的那么好怎么办?

看看我们为您列出的建议。通过遵循以下提示,您的 WordPress 性能可能会得到改善:

  1. 选择快速的托管提供商。托管会影响服务器响应能力,这在 LCP 等级中起着重要作用。如果您使用共享主机,您可能需要考虑切换到 专用主机 并获得出色的服务器性能。
  2. 不要忽视图像优化。 我们在上面提到了图像优化如何影响 LCP 和 FID 等级。这些分数也是与总体 PageSpeed 分数最相关的分数。
  3. 仅使用必要且轻量级的插件,并优化其性能。 WordPress 网站往往使用许多插件。这些插件中的大多数由于其 JavaScript 文件而影响前端 – 并且您知道 JS 文件对于站点的性能至关重要。假设您的网站使用插件来创建联系表单页面。即使该插件仅用于一个页面,该插件也会加载整个站点的 CSS 和 JS 文件 – 这些是 100% 不必要的文件!您应该仅在专用页面上使用您的插件。Asset CleanUp Pro 和 Perfmatters(脚本管理器功能) 将帮助您仅在相关页面上启用插件并解决这些 JavaScript 文件问题。
  4. 利用您的编辑器。 您的编辑器可能还可以帮助您管理文件优化。仔细看看吧!


评论

发表回复

必填项已用 * 标注