核心 Web Vitals — 现已内置于 Chrome 中

您想知道 DevTools 中的这些数字是什么吗？

今年早些时候，Google 在 DevTools 中推出了 Core Web Vitals 的浏览器内预览。本文深入探讨了 Core Web Vitals (CWV) 是什么、它们为何重要以及我们如何改进它们。

Core Web Vitals (CWV) 是 Google Chrome 性能选项卡的新增功能。 CWV 是 Google 用于评估网页整体用户体验的一组指标。他们专注于性能的三个关键方面：

最大内容涂料 (LCP)

LCP 是衡量网页加载速度的指标。快速的 LCP 表明用户可以快速开始与页面上最重要的内容进行交互。

根据文档：

为了提供良好的用户体验，网站应努力使至少 75% 的页面访问的 LCP 为 2.5 秒或更短。

优化 LCP 的最佳实践：

• 优化图像并减小文件大小。
• 最小化渲染阻塞资源。
• 利用浏览器缓存。
• 提高服务器响应时间。
• 使用 CDN。
• 在这里了解更多。

互动绘画 (INP)

INP 是衡量点击按钮或输入表单等交互过程中页面响应能力的指标。快速的 INP 表明页面响应良好，不会感觉迟缓或无响应。

根据文档：

为了提供良好的用户体验，网站应努力与 Next Paint 的交互时间不超过 200 毫秒。

优化 INP 的最佳实践：

• 最小化 JavaScript 执行时间。
• 避免阻塞主线程的长任务。
• 优先考虑关键任务并推迟非关键任务。
• 优化事件处理和输入处理。
• 在这里了解更多。

累积布局偏移 (CLS)

CLS 是页面视觉稳定性的衡量标准，评估页面加载后元素意外移动的频率。您可以在此处找到意想不到的布局示例。

较低的 CLS 表示页面视觉上稳定，不会出现可能破坏用户体验的意外布局变化。根据文档：

为了提供良好的用户体验，网站应努力将 CLS 分数控制在 0.1 或更低。

优化 CLS 的最佳实践：

• 为动态内容预留空间。
• 避免使用没有指定尺寸的图像。
• 使用字体显示：交换字体。
• 最小化 JavaScript 触发的布局变化。
• 在这里了解更多。

为什么核心网络生命很重要？

用户体验：良好的用户体验对于网站的成功至关重要。核心网络生命直接影响用户如何看待网站的性能和可用性。

搜索引擎排名：Google 已表示核心网络生命力是一个排名因素。 Core Web Vital 分数较差的网站可能在搜索结果中排名较低。

转化率：快速稳定的网站更有可能将访问者转化为客户。

结论：

通过专注于改善 Core Web Vitals，您可以创造更好的用户体验，提高网站的搜索引擎排名，并提高网站的转化率。

以上是核心 Web Vitals — 现已内置于 Chrome 中的详细内容。更多信息请关注PHP中文网其他相关文章！