核心的Web Vitals工具来提高你的网络性能得分

8,090 阅读7分钟

您的网站的成功取决于它给用户留下的印象。通过优化你的核心网络生命力分数,你可以衡量和改善用户体验。从本质上讲,网络生命力是谷歌为用户体验和网络性能设定的一个质量标准。每个网络生命力代表了用户体验的一个离散方面。它可以根据用户访问你的网站的真实数据(现场指标)或在实验室环境中(实验室指标)来衡量。

事实上,有几个以用户为中心的指标被用来量化网络生命力。它们也在不断发展:因为有一些对话围绕着慢慢加入可访问性和响应性作为网络生命体征。事实上,核心网络指标只是这一大组指标中的一部分。

值得一提的是,良好的核心网络要素得分并不一定意味着你的网站在Lighthouse的得分高达90分。你的Lighthouse得分可能很低,但你的核心网络指标得分却很高。归根结底,目前看来,只有后者才有助于SEO排名--无论是在移动端还是在桌面端。

虽然下面涉及的大多数工具只依赖现场指标,但其他工具则混合使用了现场和实验室指标。 1

网页速度比较

PageSpeed Compare是一个页面速度评估和基准测试工具。它使用Google PageSpeed Insights测量单个页面的网络性能。它还可以比较你的网站或你的竞争对手的网站的多个页面的性能。它评估实验室指标、领域指标、页面资源、DOM大小、CPU时间以及网站的潜在节省。PageSpeed Compare使用土地和现场数据来测量诸如FCP、LCP、FID、CLS等重要指标。

它所生成的报告列出了一个页面所加载的资源,每个资源类型类别的总体大小,以及每个类型的请求数量。此外,它还检查了一个页面的第三方请求和资源的数量。它还列出了缓存的资源,并识别未使用的Javascript。PageSpeed Compare检查页面的DOM,并分解其大小、复杂性和儿童。它还能识别出未使用的图像和图形中的布局转变。

当涉及到CPU时间时,该工具分解了用于各种任务的CPU时间、Javascript执行时间和CPU阻塞。最后,它推荐你可以进行的优化,以改善你的页面。它绘制了服务器、网络、CSS、Javascript、关键内容和图像优化的图表,以显示你通过将修复措施纳入你的网站可以获得的潜在节省。它给出了特定资源的建议,你可以对你的页面性能进行优化。例如,它可以建议你删除未使用的CSS,并在图表中显示这将带来的节省。

PageSpeed Compare在一个类似于仪表盘的概览中提供网页性能报告,并有一组图表。你可以一次比较多达12个网页,并以简单和可读的方式展示报告,因为它使用PageSpeed Insights来生成报告。网络和CPU被节制在实验室数据测试中,以获得更真实的条件。

大量的核心网络生命体征检查

Experte的Bulk Core Web Vitals Check是一个免费的工具,它最多可以抓取整个域名的500个页面,并提供这些页面的Core Web Vitals分数的概览。一旦该工具抓取了所有页面,它就开始对每个页面进行Core Web Vitals检查,并在一个表格中返回结果。运行测试需要一段时间,因为每个网页的测试都是一次完成的。因此,让它运行15-30分钟以获得结果是一个好主意。

那么有什么好处呢?结果是,你可以全面了解表现最好的网页和表现最差的网页--并且可以在一段时间内比较这些数值。在引擎盖下,该工具使用Pagespeed Insights来测量核心网页要素。

你可以将结果导出为CSV文件,用于Excel、Google Sheets或Apple Pages。返回结果的表格格式使其很容易比较不同页面的网络生命力。这些测试可以在移动和桌面上运行。

另外,你也可以查看David Gossage的文章《如何批量审查核心网络生命力分数》,他在文章中分享了脚本和如何获得API密钥,以便在没有任何外部工具或服务的情况下手动运行该脚本。

纪念品

如果你正在寻找一个稍微高级一点的批量检查Core Web Vitals的选项,这个工具将很好地满足你的需求。Treo Site Speed还使用来自Chrome用户体验报告、LighthousePageSpeed Insights的数据进行网站速度审计。

这些审计可以在各种设备和网络条件下进行。此外,通过Treo,你可以跟踪你的网站地图中所有页面的性能,甚至可以设置性能退步的警报。此外,你可以收到关于你的网站性能的每月更新。

通过Treo网站速度,你还可以将网站与竞争对手进行比较Treo生成的报告是全面的,按设备和地域进行细分。它们是细化的,在域名和页面层面上可用。你可以导出报告或使用API访问其数据。它们也是可以共享的

WebPageTest核心网络生命力测试

当然,WebPageTest本身就是一个性能测试套件。然而,它提供的一个有用的功能是对Core Web Vitals指标的详细分解,并指出有问题的领域和如何解决它们。

实际的性能审计中,也有很多与Core Web Vitals有关的细节,还有一些改进建议,你可以在不改变一行代码的情况下打开。不过,对于某些情况,你需要一个专业账户。

累积布局转移调试器

基本上,CLS调试器 帮助你将CLS可视化。它使用Chromium中的Layout Instability API来加载页面并计算其CLS。CLS是为移动和桌面设备计算的,需要几分钟时间来完成。在测试过程中,网络和CPU被节制,而页面是由美国请求的。

CLS调试器生成一个GIF图像,其中的动画显示了视口元素如何移动。生成的GIF图像在实际可视化布局移动方面非常重要。对CLS贡献最大的元素被标记为方块,以便直观地看到它们的大小和布局变化。它们也和它们的CLS分数一起列在一个表格中。


CLS调试器在运行:逐帧高亮显示移位情况。

尽管CLS最初是作为实验室指标计算的,但CLS调试器也从Chrome用户体验报告中接收CLS测量值。因此,CLS是过去28天的滚动平均值。CLS调试器允许您忽略cookie中间广告--此外,您也可以为特定国家生成报告。

另外,你也可以使用Layout Shift GIF Generator。该工具可在其网页上使用,或作为一个命令行工具使用。通过CLI工具,你可以指定额外的选项,如视口宽度和高度、提供给页面的cookies、GIF输出选项和CLS计算方法。

Polypane Web Vitals

如果你想在开发过程中保持你的Core Web Vitals分数,Polypane Web Vitals是一个值得关注的奇妙功能。Polypane是一个用于网页开发的独立浏览器,它包括可访问性、响应式设计以及最近的性能和核心Web Vitals等工具。

你可以自动收集每个页面的Web Vitals分数,然后显示在你的页面底部。该工具还提供LCP的可视化,并显示布局的转变。

值得注意的提法

  • Calibre的Core Web Vitals Checker允许你通过一次点击来检查你的页面的Core Web Vitals。它使用来自Chrome用户体验报告的数据,测量LCP、CLS、FID、TTFB、INP和FCP。

  • CrUX Compare是一个免费的小工具,允许你添加一些网站,并并排比较它们的Core Web Vitals得分。

  • Web Vitals JavaScript库是一个小小的库,用于测量您网站上真实用户的所有Web Vitals指标。

  • 衡量核心网络指标的深入指南》是Barry Pollard在Smashing Magazine上发表的一篇关于如何衡量核心网络指标、发现问题并解决问题的指南。