自推出 Core Web Vitals 以来,它一直是一个热门话题,因为人们试图了解如何衡量、优化和报告这些新指标,以及谁负责进行所需的优化。
Google 的 Web.Dev 网站 通过推荐特定的工作流程来审核站点的 CWV 并计划优化策略,为开发人员提供帮助。
该建议附带了要使用的工具列表和要询问的问题,以使您的方法尽可能简化和有效。
核心 Web Vital 审计工作流的 ABC 方法
被称为“Web Vitals Loop”,建议审核员采取以下方法,这些方法是更建议的流程:
- 方法 A – 评估网络健康并确定痛点。
- 方法 B – 调试和优化表现不佳的页面。
- 方法 C – 持续监控和开发。
每种方法都带有建议的工具,在某些情况下,还有要回答的问题:
方法 A 概述(评估和识别)
建议执行审核的开发人员在审核时问自己以下问题,以保持流程的重点:
- 网站的性能如何,需要注意吗?
- 最近情况变好还是变坏了?
- 应该优先考虑哪些页面、设备和指标?
建议使用以下工具来帮助您执行最高质量的审核:
CrUX 仪表板
该工具提供了涵盖 CWV 指标的网站概览。 它还提供历史趋势和用户人口统计报告。
这个工具是一个很好的起点。 一旦您了解了哪些页面可能需要优化,审计的下一步就是深入挖掘以建立页面优化的优先级列表。
搜索控制台
Google Search Console 可以帮助开发人员通过 Core Web Vitals 报告根据 CWV 指标识别需要关注的页面。
该报告可以帮助您确定有多少页面的用户体验不佳,对性能指标进行精细化处理,了解是否有任何页面模板需要改进,并生成专注于桌面或移动性能的报告。
PageSpeed 见解
建议使用 Google 的 PageSpeed Insights 工具更深入地测量特定页面上的用户体验指标。
开发人员可以比较各个分数来创建需要 CWV 优化的页面的优先级列表。
完成研究后,您可以进入下一阶段的审核。
有关的: 如何进行深入的技术 SEO 审核
方法 B 概述(调试和优化)
Google 建议开发者在此阶段的审核中寻求回答以下问题:
- 优化这些页面的最佳方法是什么?
- 我们可以首先解决的低垂果实在哪里?
- 哪些修复需要更多规划?
推荐使用三种工具来协助完成 Core Web Vitals 审核的第二部分:
灯塔
这与用于 PageSpeed Insights 的工具相同,但您也可以使用 Chrome DevTools 或 web.dev/measure 访问它。
通过 Lighthouse,开发人员可以识别加载时间优化以改善用户体验。
Lighthouse 被称为在进行更奢侈的优化之前识别较小修复的工具。
网络生命体征扩展
虽然 Lighthouse 在页面加载之前测量指标并且不包括首次输入显示 (FID),但 Web Vitals 扩展在页面交互期间进行测量。
该工具还涵盖 FID 和 CLS。
Chrome 开发者工具
您可以使用此工具执行的一些操作包括实时查看布局变化的影响、删除未使用的代码以及测试任何代码更改。
如果进行了任何更改,您应该再次运行方法 A 以定期测量这些更新的影响。
有关的: Lighthouse 性能指标的技术 SEO 指南
方法 C 概述(监控和开发)
一旦您付出了艰苦的工作和努力来识别 CWV 优化机会并实施它们,您就必须继续监控性能并在必要时进行进一步的更新。
像数字空间中的大多数事情一样,这不是执行一次任务,将其从列表中剔除,然后忘记它的情况。
根据 谷歌进行的研究,大多数提高网站性能的网站都会在六个月内下降。
因此,还应报告回归跟踪,以便在可能需要安排额外工作时,您可以尽早采取措施以保持绩效和前瞻性计划。
协助监控和开发的推荐工具包括:
- 通过 BigQuery 的 CrUX
- CrUX API
- PageSpeed Insights API
- Web-vitals.js
- 灯塔-CI
遵循这样的策略不仅有助于识别和优化表现不佳的 Core Web Vital 指标,而且是推进计划优化策略并确保您部门内的其他人和更广泛的公司在同一页面上的好方法。