第14课：网站速度与核心网页指标 (Core Web Vitals)

网站速度与核心网页指标：在“速度与激情”的竞赛中取胜

页面加载速度 (Page Speed) 早已是Google公开承认的排名因素。原因很简单：用户讨厌等待。研究表明，页面加载时间每增加1秒，跳出率就会急剧上升，转化率则会大幅下降。

为了让网站所有者有一个更具体、更标准化的衡量用户体验的指标，Google在2020年推出了核心网页指标 (Core Web Vitals, CWV)。这是一组专门衡量网页加载性能、交互性和视觉稳定性的指标，并且已经正式成为Google排名算法的一部分。

认识核心网页指标 (CWV) 三巨头

核心网页指标由三个具体指标组成：LCP, FID (后被INP取代), 和 CLS。

1. LCP (Largest Contentful Paint) - 最大内容绘制

• 它衡量什么？ 加载性能 (Loading Performance)。
• 通俗解释：从用户点击链接开始，到浏览器视口（用户能看到的第一屏）中最大的图片或文本块被完全渲染出来所花费的时间。简单来说，就是用户感觉**“主要内容出来了”**的那个时刻。
• 为什么重要？ LCP直接关系到用户对网站速度的第一感知。如果这个时间太长，用户会觉得网站“很卡”。
• Google标准：
  • 良好：≤ 2.5秒
  • 需要改进：> 2.5秒 且 ≤ 4.0秒
  • 差：> 4.0秒

2. FID (First Input Delay) - 首次输入延迟

• 它衡量什么？ 交互性 (Interactivity)。
• 通俗解释：从用户第一次与你的页面进行交互（例如，点击按钮、链接或输入框）开始，到浏览器能够真正开始处理这个交互事件所花费的时间。它衡量的是页面的响应速度。
• 为什么重要？ 如果用户点击一个按钮，但页面“没反应”或“反应迟钝”，会带来极大的挫败感。
• Google标准：
  • 良好：≤ 100毫秒
  • 需要改进：> 100毫秒 且 ≤ 300毫秒
  • 差：> 300毫秒

重要更新：从2024年3月开始，Google已正式使用 INP (Interaction to Next Paint) 指标取代FID。INP衡量的是页面上所有交互的延迟，而不仅仅是第一次。虽然FID的概念依然有助于理解交互性，但未来我们的优化目标将是INP。

3. CLS (Cumulative Layout Shift) - 累积布局偏移

• 它衡量什么？ 视觉稳定性 (Visual Stability)。
• 通俗解释：衡量页面在加载过程中，可见元素发生意外移动的程度。
• 最常见的例子：你正准备点击一个按钮，突然页面上方加载出一张图片或一则广告，导致整个页面向下移动，结果你点到了别的地方。这种体验非常糟糕。
• Google标准：CLS是一个无单位的分数。
  • 良好：≤ 0.1
  • 需要改进：> 0.1 且 ≤ 0.25
  • 差：> 0.25

如何检测你的核心网页指标？

Google提供了多种免费工具来检测CWV：

1. PageSpeed Insights (PSI)：
   这是最常用、最全面的工具。只需输入你的URL，它就会提供基于**真实用户数据（字段数据）和模拟环境数据（实验室数据）**的CWV报告，并给出详细的优化建议。

2. Google Search Console (GSC)：
   GSC中的“核心网页指标”报告会告诉你整个网站中哪些URL被评为“良好”、“需要改进”或“差”。这是从宏观上监控网站性能的最佳工具。

3. Chrome DevTools (Lighthouse)：
   在Chrome浏览器中按F12打开开发者工具，切换到Lighthouse标签，可以进行一次模拟的性能审计，实时查看CWV分数。

如何优化核心网页指标及提升整体速度？

优化 LCP (加载性能)

LCP不佳通常与服务器响应慢、资源加载慢有关。

• 选择高性能主机：廉价的共享主机通常是速度瓶颈。投资一个好的主机服务是提升速度的基础。
• 优化图片：这是最立竿见影的方法。确保图片经过压缩、尺寸合适，并使用WebP等现代格式（详见第7课）。
• 启用浏览器缓存 (Browser Caching)：让用户的浏览器“记住”你网站的静态资源（如Logo、CSS文件），这样他们再次访问时就无需重新下载，加载速度会快很多。
• 使用内容分发网络 (CDN)：CDN在全球各地部署服务器。当用户访问时，会从离他们最近的服务器获取内容，大大减少网络延迟。
• 减少服务器响应时间 (TTFB)：通过优化服务器配置、数据库查询等方式，缩短服务器处理请求并返回第一个字节的时间。

优化 FID / INP (交互性)

FID/INP不佳通常是由于浏览器“主线程”被长时间占用的JavaScript任务阻塞了。

• 减少或拆分大型JavaScript任务：将长时间运行的JS代码分解成多个小的、异步的任务，让浏览器有空闲去响应用户输入。
• 移除不必要的第三方脚本：你网站上每一个第三方脚本（如分析工具、社交分享插件、广告代码）都可能拖慢响应速度。定期审查并移除不再需要的脚本。
• 使用Web Workers：将一些复杂的计算任务放到后台线程中处理，不阻塞主线程。

优化 CLS (视觉稳定性)

CLS不佳通常是由于尺寸未定的图片、广告、或动态加载内容引起的。

• 为图片和视频元素指定尺寸：在<img>和<video>标签中明确设置width和height属性。这样，在图片加载出来之前，浏览器会预留出相应的空间，避免页面跳动。
  • 例子：<img src="image.jpg" width="800" height="400" alt="...">
• 为广告和嵌入内容预留空间：如果你在页面中插入广告或iframe，使用CSS为它们预留一个固定大小的容器，防止它们加载时突然撑开页面。
• 避免在现有内容上方插入新内容：除非是响应用户操作，否则不要在用户正在看的内容上方动态添加内容。

本课小结

• 网站速度是关键的SEO排名因素，直接影响用户体验和业务转化。
• 核心网页指标 (LCP, INP, CLS) 是Google衡量用户体验的标准化核心指标，直接影响排名。
• LCP 关注加载速度，INP 关注交互响应，CLS 关注视觉稳定。
• 使用 PageSpeed Insights 和 Google Search Console 定期检测你的网站性能。
• 优化速度的常见手段包括：优化图片、使用CDN、启用缓存、减少JS阻塞、为元素预留空间等。