• 主页
  • 文章
  • SEO
  • Core Web Vitals：识别性能瓶颈的 7 种工具和技术

Core Web Vitals：识别性能瓶颈的 7 种工具和技术

已发表: 2021-07-19

Core Web Vitals (CWV) 是目前的热门话题。 在这里，我们将介绍一些可以用来帮助识别网站性能问题的工具，为 Google 即将于 2021 年 5 月进行的排名更新做准备。

需要复习 Core Web Vitals 吗？ 在我的 Core Web Vitals Explained 文章中了解它们是什么以及如何针对它们进行优化。

自动监控 CWV 指标

如果您有多个网站或关键页面想要随着时间的推移进行监控，而无需在测试后手动运行测试，那么 Digital Inspiration 的这个电子表格可能适合您。 只需获取 Lighthouse PageSpeed API 密钥，插入一些 URL 即可！

该电子表格有助于识别围绕关键 CWV 指标的潜在性能问题以及它们可能发生的时间，这反过来又可以为我们提供可能是什么原因的线索。 它还可以用来演示速度分数如何随着网站的发展而随时间自然变化，或者当对基础页面速度算法进行更改时。

几个月来，我们一直在使用此电子表格的修改版本，它帮助我们发现了改进许多网站性能的机会。

Hallam 自动化核心 Web Vitals

PageSpeed 洞察力

Google 的 PageSpeed Insights 是我对移动和桌面设备的性能和 CWV 相关问题进行初步、顶级调查的首选工具。 报告包含“现场数据”； 真实世界的用户如何体验网站以及模拟页面加载的 Lighthouse“实验室”数据，这对于可重复和一致的测试非常有用。

核心 Web Vital 指标通过简单的颜色编码指标清楚地突出显示。 差的指标用红色突出显示，好的用绿色突出显示。 这些指标结合起来给出总体速度分数，您需要 90% 或更多才能获得绿色“通过”。

这些报告中还给出了一系列建议和诊断，按照可节省的总秒数按影响最大的项目排序。

PageSpeed Insights 示例

Chrome DevTools 性能监视器

为了更详细地分析性能和 CWV 相关问题，我经常求助于 DevTools 中的 Chrome 性能监视器，我使用的一些关键 CWV 指标在下面的屏幕截图中编号。

  1. 首先，您需要确保以正确的分辨率运行性能监视器，因为 LCP 和 CLS 元素通常会在不同的分辨率下发生变化。 我将我的设置为 350 x 636 像素以复制 PageSpeed Insights 移动视图。
  2. 在运行报告之前，您可能还想模拟移动设备的连接性和功率。 我经常选择快速 3g 和 4x CPU 减速。
  3. 生成报告后选择 LCP 指标可确定最大的元素是什么。 这应该尽可能接近 FCP（首次内容绘制）。 如果存在差距，您将需要识别并简化最大元素的交付。
  4. 长 CPU 任务由灰色条上的红色对角线突出显示。 这通常是由较重的 JavaScript 引起的，由黄色条表示，并且会影响您的交互指标（FID、TBT 和 TTI）。 向下钻取下面的条形通常会指向有问题的 JavaScript 文件和函数。
  5. 布局移位由这些红色条突出显示，选择它们通常会突出显示已移位的元素。 大量这些将产生更高的 CLS 值。
  6. 框架视图是一种很好的方式，可以直观地突出显示内容的显示方式和布局在加载时如何移动。对于高 CLS 值，通常从框架中可以明显看出原因是什么。 在这个例子中，一个大的 cookie 横幅会导致布局随着内容的下推而发生变化。

Web Vitals Chrome 扩展程序

核心 SERP 指标

SERP Vitals 扩展直接在搜索结果中显示 LCP、FID 和 CLS 指标的方便指标。 它非常适合分析竞争对手，并且可以在您访问网页之前快速显示网页的运行速度。

Chrome 用户体验报告 (CrUX) 从真实用户匿名收集数据。 但是，它并非适用于每个站点，因为新站点或流量很少的站点将无法获得足够的数据点。
核心 SERPs Vitals Chrome 扩展

网络生活

方便的 Web Vitals 扩展实时测量 Chrome 中桌面用户的 3 个关键 CWV 指标，它的交通灯颜色在您浏览网站时提供了一个快速指示器。 由于它不依赖于外部收集的用户数据，因此对于在本地环境中工作的开发人员及早发现任何问题非常有用。
Web Vitals 扩展示例

灯塔

Lighthouse Extensions 提供了一个快速路径，可以访问 Chrome DevTools 中可用的相同报告功能，并使用 Lighthouse API 提取实验室数据，而不是通过 CrUX 来自真实世界用户的现场数据。

性能报告与 PageSpeed Insights 移动分析非常相似，提供类似的诊断和建议。 还会为 SEO、辅助功能和最佳实践生成其他报告。

灯塔扩展性能报告

Treo 站点速度可视化器

https://treo.sh/sitespeed 上的可视化工具显示随时间变化的 CWV 指标，可按设备、连接性和地理区域进行过滤。 它每周更新一次，并使用 CrUX 报告中的数据。

在下面 bbc.co.uk 的示例中，我们可以看到 CLS 指标在最近 3 个月内如何显着下降，所有核心指标均获得绿色“通过”结果。 这是分析 CWV 指标随时间推移的性能或进行竞争对手分析的好方法。

Treo 网站速度报告

可视化第三方请求

FID、TTI 和 TBT 的交互性指标通常很难排除故障。 PageSpeed Insights 在识别一些最重的第三方脚本方面很有用，但有时一个不错的可视化可以更容易地传达这些脚本的影响。

请求映射工具 https://requestmap.herokuapp.com/ 对此非常有用。 生成的映射包含每个第三方请求的节点，较大的节点表示影响较大的脚本。 如果您的交互性指标很差，您很可能会在这张地图上看到很多节点。

下面是一个站点的示例，该站点的“可交互时间”TTI 指标高达 26 秒。 快速浏览地图会显示一个实时聊天小部件，由顶部的众多深蓝色节点表示，占请求总数的一半以上。

请求映射工具也是确定从何处加载脚本或其他资产的好方法。 在本例中，我们可以在下面看到几个直接来自黄色 Google 标签管理器节点的节点。

重脚本的请求映射

WebPageTest 中的瀑布

WebPageTest 报告提供比 PageSpeed Insights 更详细的信息，并且可以从各种设备和位置生成。

我经常使用这个工具进行瀑布分析，它可以将页面上所有资产的加载顺序可视化。 这在尝试简化关键的“首屏”内容时特别有用。 例如，如果您正在优化 LCP，并且折叠上方最大的元素是图像或排版，您可能希望对最大的图像和字体文件实施预加载，并检查这些预加载的资源是否出现在瀑布的顶部. 网页测试瀑布

不确定 CWV 将如何影响您的网站，请立即联系我们。