改进核心 Web Vitals 审计的 4 个重要技巧

已发表: 2022-05-10

对于如何审核 Core Web Vitals 没有硬性规定，尤其是在考虑各种第三方工具的情况下。 我们分解了一些速度审核的重要提示，以纳入您的工作流程，其中包括：

  • 页面体验和谷歌搜索控制台
  • PageSpeed Insights 的缺点
  • 推荐的第三方审计工具
  • 了解瀑布图

1.使用 Search Console 启动您的 Core Web Vitals 审核工作流程

在审核网站的网站速度和核心网络指标问题时，我们建议始终通过查看 Search Console 中的“体验”部分来开始故障排除过程——前提是可以访问。 搜索控制台从 Chrome UX 报告中汇总真实用户（字段）数据，因此这是了解 LCP、CLS 或 FID 问题中的哪些问题正在影响您的用户体验以及最终影响网站排名潜力的一种简单方法。

导航到“页面体验”>“核心 Web Vitals”，显示的图表将显示网站资源分类为“良好”、“需要改进”或“差”的 URL 数量。 例如：

来自 GSC 的示例 Core Web Vitals 图

请参阅下面的图表，了解来自 Google 的上述核心网络生命值阈值的时间和指标。

好的需要改进较差的
液晶面板<=2.5s <=4s >4s
FID <=100 毫秒<=300 毫秒>300ms
CLS <=0.1 <=0.25 >0.25

从这里，我们可以评估大多数 URL 是否被归类为“好”，因此通过了所有 3 个核心 Web Vitals 指标，或者大多数页面是否“差”或“需要改进”，表明存在一些突出的技术问题需要解决这些问题才能通过。

有用的提示：页面需要通过所有三个 Web Vitals 才能进入“良好”状态，而大多数网站 URL 都处于“需要改进”范围内是不够的。

然后，您可以深入每个部分以发现受速度问题影响并需要审核的特定 URL。 这些按在模板级别上相似的那些分组。 因此，与其尝试审核网站可能拥有的所有不同类型的 URL（例如主页、类别页面、产品页面、博客文章等），真实用户在访问网站时面临的问题可能仅集中在 1 或 2 个其中，这意味着您可以将精力集中在这些模板上，这可以节省大量时间。

2.谨慎使用 PageSpeed Insights

尽管 PageSpeed Insights (PSI) 是 Google 提供的一个有用的免费工具，它提供了解决问题的潜在机会的顶级概述，但如果单独使用它确实是一种审核网站速度的懒惰方式。 我们已经看到许多 SEO 采用建议，有时是逐字逐句，然后将这些建议反馈给客户开发人员或技术团队，而没有真正了解其背后的原因或任何背景。

不幸的是，这通常会导致更多的问题被反击，特别是如果您没有进一步研究该工具将吐出的机会和建议。

例如，我们都听说过“消除渲染阻塞资源”以加快 LCP 元素的加载的建议，但是当此资源在第一次绘制时至关重要，例如 cookie 横幅脚本还是受影响的资产是第三方资源？ 开发人员很可能会直接将其击退，因为他们将无能为力 - 因此，从 PSI 中获取的任何技术建议都必须经过慎重考虑并进一步调查，然后再转发给开发商。

知道 PSI 使用带有 Lighthouse 的集合仿真设备 (Moto G4) 也很有用，但问题可能会因实际用户最常使用的设备而有很大差异，就像“实验室”测试的情况一样。 这通常意味着 PSI 不会返回问题或在该特定设备上进行测试的机会，即使您从 Chrome UX 报告中知道该站点的真实用户存在问题。

PageSpeed Insights 使用的默认 Lighthouse 测试配置

因此，我们始终建议将 PSI 与其他可以相应调整设备和连接配置的速度测试工具结合使用。

3.探索替代速度审计工具

除了使用 PageSpeed 和其他 Google 工具外，我们还建议探索其他免费和免费增值的速度测试工具，例如 WebPageTest (WPT) 或 GTMetrix。

WebPageTest 具有一系列有用的功能和配置选项，可帮助在页面级别进行速度测试。 高级配置允许您调整重要的测试设置，例如浏览器和设备类型，以及测试位置。 这使您可以微调您的审核，特别是如果您知道该网站的大多数用户所在的位置以及他们的设备类型，这意味着您不仅仅依赖于 Google 的预设模拟设备。

在这里，您还可以从默认的 3G 快速连接调整连接设置，如果您想测试麻烦脚本的性能提升，还可以阻止某些 URL。 我们没有列出许多其他配置选项可供探索，但以上是我们发现在审核核心 Web Vitals 时最有用的配置选项。

WebPageTest 有用的高级配置选项

运行测试后，导航到 Core Web Vitals 选项卡以获取每个指标的详细性能细分，包括幻灯片、视频时间线、瀑布图，以及触发事件的元素的细粒度细分——所有这些可以多种格式导出，最重要的是，免费！

幻灯片视图对于了解在页面中的哪个点加载某些元素在视觉上出现时特别有用，这可以帮助确定哪些资产可以更快地加载的优先级。 如果有显着的视觉变化来帮助查明导致它的元素，它将非常清晰地显示出来。

由于 cookie 横幅加载而显示 CLS 问题的示例幻灯片

GTMetrix 具有与 WebPageTest 类似的功能，但是，WPT 中免费的许多高级选项仅在付费包中可用。

4.了解瀑布图

基本而言，瀑布图是请求文件或资产的时间线、下载时间以及在页面上可见的时间线。

从偏移量来看，瀑布图看起来有点令人生畏，因为有许多不同的行、条的长度和颜色，它们意味着不同的东西——但不要被推迟！ 花时间学习和理解瀑布图是技术 SEO 在速度审计中应该具备的最重要的一项技能。

如果您习惯于使用 WebPageTest 进行网络生命体征审计，我们会发现他们的瀑布图对用户最友好。 WebPageTest 在图表上方提供了一个颜色编码的键，表示连接信息、请求的资源类型和其他事件，例如 JS 执行。 它还直观地显示渲染阻塞资源，以及突出显示具有 3xx 或 4xx 响应的请求资源。

小贴士：注意瀑布上横条的明暗阴影，浅色表示资源已被浏览器请求，深色表示资源正在下载。

总而言之，这有助于更深入地了解网站上的性能问题，进而使您提出的解决这些问题的建议更具可操作性。 我们推荐 Matt Hobbs 关于如何阅读瀑布图以了解更多信息的深入文章。


如果您正在寻找有关解决网站性能问题的专家建议，请联系我们或访问我们的技术 SEO 服务页面，了解有关 Semetrical 如何提供帮助的更多信息。