什么是核心 Web 指标 (Core Web Vitals)？
核心 Web 指标 (Core Web Vitals) 是一组由 Google 提出的用于衡量网页用户体验的指标。这些指标关注网页的加载速度、交互性和视觉稳定性，旨在帮助开发者提升网页的用户体验。
核心 Web 指标
最大内容渲染时间（Largest Contentful Paint，LCP）
定义
LCP 衡量的是在页面首次开始加载时，最大可见元素完成渲染的时间。
影响因素
- 服务器响应时间
- 渲染阻塞的 JavaScript 和 CSS
- 资源加载时间
- 客户端渲染
优化方法
- 优化服务器响应时间
- 优化 CSS 和 JavaScript
- 优化图片
- 使用 CDN
良好 LCP
2.5 秒以内
指向原始笔记的链接
最大内容渲染时间（Largest Contentful Paint，LCP）
定义
LCP 衡量的是在页面首次开始加载时，最大可见元素完成渲染的时间。
影响因素
- 服务器响应时间
- 渲染阻塞的 JavaScript 和 CSS
- 资源加载时间
- 客户端渲染
优化方法
- 优化服务器响应时间
- 优化 CSS 和 JavaScript
- 优化图片
- 使用 CDN
良好 LCP
2.5 秒以内
指向原始笔记的链接首次输入延迟（First Input Delay，FID）
定义
首次输入延迟（First Input Delay，FID）是衡量用户首次与页面交互（例如点击链接、按钮或使用自定义 JavaScript 控件）时，浏览器响应的延迟时间。这个延迟是因为浏览器正忙于解析和执行主线程上的 JavaScript 代码，无法立即响应用户的输入。
为什么 FID 重要？
- 用户体验： 高 FID 会导致用户感到页面反应迟钝，影响用户体验。
- 性能评估： FID 是衡量页面交互性的关键指标，有助于开发者识别和解决性能瓶颈。
- SEO： 作为 Core Web Vitals 的一部分，FID 会影响搜索引擎排名。
如何优化 FID？
-
减少 JavaScript 执行时间：
- 代码拆分： 将 JavaScript 代码拆分成更小的块，按需加载。
- 移除未使用的代码： 删除页面上未使用的 JavaScript 代码。
- 延迟加载： 将非关键的 JavaScript 代码延迟加载。
-
优化第三方脚本：
- 评估第三方脚本的影响： 检查第三方脚本是否导致 FID 过高。
- 延迟加载第三方脚本： 将不重要的第三方脚本延迟加载。
-
减少主线程工作：
- 避免长时间运行的任务： 将长时间运行的任务分解成更小的任务。
- 使用 Web Workers： 将一些任务转移到 Web Workers 中执行，避免阻塞主线程。
如何测量 FID？
- Lighthouse： 使用 Lighthouse 工具可以模拟用户交互，测量 FID。
- Web Vitals 扩展： 使用 Chrome Web Vitals 扩展可以实时测量 FID。
- Real User Monitoring (RUM)： 使用 RUM 工具可以收集真实用户的 FID 数据。
示例
假设用户首次点击页面上的一个按钮，浏览器需要 300 毫秒才能响应这个点击事件，那么 FID 就是 300 毫秒。
总结
首次输入延迟（FID）是评估网页交互性的重要指标。通过优化 JavaScript 执行、第三方脚本和主线程工作，可以显著降低 FID，提升用户体验。
指向原始笔记的链接
首次输入延迟（First Input Delay，FID）
定义
首次输入延迟（First Input Delay，FID）是衡量用户首次与页面交互（例如点击链接、按钮或使用自定义 JavaScript 控件）时，浏览器响应的延迟时间。这个延迟是因为浏览器正忙于解析和执行主线程上的 JavaScript 代码，无法立即响应用户的输入。
为什么 FID 重要？
- 用户体验： 高 FID 会导致用户感到页面反应迟钝，影响用户体验。
- 性能评估： FID 是衡量页面交互性的关键指标，有助于开发者识别和解决性能瓶颈。
- SEO： 作为 Core Web Vitals 的一部分，FID 会影响搜索引擎排名。
如何优化 FID？
-
减少 JavaScript 执行时间：
- 代码拆分： 将 JavaScript 代码拆分成更小的块，按需加载。
- 移除未使用的代码： 删除页面上未使用的 JavaScript 代码。
- 延迟加载： 将非关键的 JavaScript 代码延迟加载。
-
优化第三方脚本：
- 评估第三方脚本的影响： 检查第三方脚本是否导致 FID 过高。
- 延迟加载第三方脚本： 将不重要的第三方脚本延迟加载。
-
减少主线程工作：
- 避免长时间运行的任务： 将长时间运行的任务分解成更小的任务。
- 使用 Web Workers： 将一些任务转移到 Web Workers 中执行，避免阻塞主线程。
如何测量 FID？
- Lighthouse： 使用 Lighthouse 工具可以模拟用户交互，测量 FID。
- Web Vitals 扩展： 使用 Chrome Web Vitals 扩展可以实时测量 FID。
- Real User Monitoring (RUM)： 使用 RUM 工具可以收集真实用户的 FID 数据。
示例
假设用户首次点击页面上的一个按钮，浏览器需要 300 毫秒才能响应这个点击事件，那么 FID 就是 300 毫秒。
总结
首次输入延迟（FID）是评估网页交互性的重要指标。通过优化 JavaScript 执行、第三方脚本和主线程工作，可以显著降低 FID，提升用户体验。
指向原始笔记的链接累计布局偏移 (Cumulative Layout Shift, CLS)
定义
累计布局偏移（Cumulative Layout Shift，CLS）是衡量网页视觉稳定性的指标。它量化了页面上所有非预期布局偏移的总和。布局偏移是指页面上可见元素在渲染过程中位置发生变化，导致用户体验中断。
为什么 CLS 重要？
- 用户体验： 高 CLS 会导致用户感到页面不稳定，影响用户体验。例如，用户在点击一个链接时，链接突然移动，导致点击失败。
- 性能评估： CLS 是 Core Web Vitals 的一部分，用于评估页面的视觉稳定性。
- SEO： 作为 Core Web Vitals 的一部分，CLS 会影响搜索引擎排名。
如何优化 CLS？
-
为图像和视频设置尺寸属性：
- 在
<img> 和 <video> 标签中明确指定 width 和 height 属性，或者使用 CSS 的 aspect-ratio 属性，确保浏览器在加载内容之前预留足够的空间。
-
为广告预留空间：
- 避免在现有内容上方插入广告，导致布局偏移。可以预先为广告位设置固定大小的容器。
-
避免在现有内容上方插入新内容：
- 除非是用户交互触发的，否则不要在现有内容上方插入新内容。
-
使用 transform 代替引起布局偏移的动画：
- 使用
transform: translate() 和 transform: scale() 等属性进行动画，这些属性不会引起布局偏移。
如何测量 CLS？
- Lighthouse： 使用 Lighthouse 工具可以模拟用户交互，测量 CLS。
- Web Vitals 扩展： 使用 Chrome Web Vitals 扩展可以实时测量 CLS。
- Real User Monitoring (RUM)： 使用 RUM 工具可以收集真实用户的 CLS 数据。
示例
- 未优化： 页面加载时，广告突然出现，将下方的内容向下推，导致用户在阅读时内容发生偏移。
- 已优化： 页面为广告预留了固定大小的空间，广告加载时不会引起布局偏移。
总结
累计布局偏移（CLS）是评估网页视觉稳定性的重要指标。通过为图像和视频设置尺寸、为广告预留空间、避免在现有内容上方插入新内容以及使用 transform 进行动画，可以显著降低 CLS，提升用户体验。
指向原始笔记的链接
累计布局偏移 (Cumulative Layout Shift, CLS)
定义
累计布局偏移（Cumulative Layout Shift，CLS）是衡量网页视觉稳定性的指标。它量化了页面上所有非预期布局偏移的总和。布局偏移是指页面上可见元素在渲染过程中位置发生变化，导致用户体验中断。
为什么 CLS 重要？
- 用户体验： 高 CLS 会导致用户感到页面不稳定，影响用户体验。例如，用户在点击一个链接时，链接突然移动，导致点击失败。
- 性能评估： CLS 是 Core Web Vitals 的一部分，用于评估页面的视觉稳定性。
- SEO： 作为 Core Web Vitals 的一部分，CLS 会影响搜索引擎排名。
如何优化 CLS？
-
为图像和视频设置尺寸属性：
- 在
<img>和<video>标签中明确指定width和height属性，或者使用 CSS 的aspect-ratio属性，确保浏览器在加载内容之前预留足够的空间。
- 在
-
为广告预留空间：
- 避免在现有内容上方插入广告，导致布局偏移。可以预先为广告位设置固定大小的容器。
-
避免在现有内容上方插入新内容：
- 除非是用户交互触发的，否则不要在现有内容上方插入新内容。
-
使用
transform代替引起布局偏移的动画：- 使用
transform: translate()和transform: scale()等属性进行动画，这些属性不会引起布局偏移。
- 使用
如何测量 CLS？
- Lighthouse： 使用 Lighthouse 工具可以模拟用户交互，测量 CLS。
- Web Vitals 扩展： 使用 Chrome Web Vitals 扩展可以实时测量 CLS。
- Real User Monitoring (RUM)： 使用 RUM 工具可以收集真实用户的 CLS 数据。
示例
- 未优化： 页面加载时，广告突然出现，将下方的内容向下推，导致用户在阅读时内容发生偏移。
- 已优化： 页面为广告预留了固定大小的空间，广告加载时不会引起布局偏移。
总结
累计布局偏移（CLS）是评估网页视觉稳定性的重要指标。通过为图像和视频设置尺寸、为广告预留空间、避免在现有内容上方插入新内容以及使用 transform 进行动画，可以显著降低 CLS，提升用户体验。
如何衡量核心 Web 指标？
- Chrome DevTools： 使用 Chrome DevTools 的 Lighthouse 工具进行测量。
- PageSpeed Insights： 使用 PageSpeed Insights 工具进行测量。
- Web Vitals 扩展： 使用 Web Vitals Chrome 扩展进行实时测量。
- Google Search Console： 在 Google Search Console 中查看核心 Web 指标报告。
总结
核心 Web 指标是衡量网页用户体验的重要指标。通过优化 LCP、FID 和 CLS，可以提升网页的加载速度、交互性和视觉稳定性，从而提升用户体验。