核心网页指标：测量并提升网站性能
你已经构建了一个快速的网站，但用户仍然抱怨加载缓慢。或者尽管内容很棒，你的SEO排名却停滞不前。罪魁祸首可能是核心网页指标——谷歌衡量用户体验的指标。在本指南中，你将了解它们是什么、如何测量以及改善每个指标的实用步骤。
什么是核心网页指标？
核心网页指标是谷歌用来量化用户体验的三个具体指标：
- 最大内容绘制（LCP）：衡量加载性能。应在页面开始加载后的2.5秒内发生。
- 交互到下一次绘制（INP）：衡量响应性。应在75%的页面访问中低于200毫秒。
- 累积布局偏移（CLS）：衡量视觉稳定性。应小于0.1。
这些指标是谷歌页面体验信号的一部分，可能影响你的搜索排名。更重要的是，它们反映了真实的用户体验——缓慢的网站会让访问者感到沮丧并离开。
如何测量核心网页指标
无法测量就无法改进。主要有两种类型的工具：实验室工具（合成测试）和现场工具（真实用户监控）。
实验室工具
- Lighthouse：内置于Chrome DevTools（Audits选项卡）。提供分数和具体的优化机会。
- PageSpeed Insights：结合实验室和现场数据的网页工具。
- WebPageTest：支持自定义位置和设备的高级测试。
现场工具
- Chrome用户体验报告（CrUX）：来自Chrome用户的真实数据，可通过PageSpeed Insights或BigQuery获取。
- web-vitals库：用于在自己的分析中测量指标的JavaScript库。
- Search Console：核心网页指标报告显示基于CrUX数据的群组性能。
从PageSpeed Insights开始快速概览，然后使用web-vitals库随时间跟踪真实用户指标。
改善LCP（最大内容绘制）
LCP通常是首屏最大的图片或文本块。要改善它：
- 优化图片：压缩图片，使用WebP或AVIF等现代格式，并通过
srcset提供响应式图片。 - 预加载关键资源：对主图图片和字体使用
<link rel="preload">。 - 消除阻塞渲染的资源：内联关键CSS，延迟非关键CSS和JavaScript。
- 使用CDN：从更接近用户的位置提供资源。
- 启用缓存：为静态资源设置较长的缓存时间。
对于图片，TryQuickToolBox的图片压缩器等工具可以帮助减小文件大小而不造成明显的质量损失。
改善INP（交互到下一次绘制）
INP衡量从用户交互（点击、轻触、按键）到下一次视觉更新的时间。要改善它：
- 减少JavaScript执行时间：拆分长任务，使用
requestIdleCallback或setTimeout让出主线程。 - 避免过大的DOM：保持DOM节点数低于1,500，深度低于32层。
- 优化事件处理程序：对滚动和调整大小等频繁事件进行防抖或节流。
- 使用Web Worker：将繁重计算移出主线程。
- 最小化第三方脚本：它们经常阻塞主线程。
使用Chrome DevTools性能面板识别长任务并优化它们。
改善CLS（累积布局偏移）
CLS衡量意外的布局偏移。要减少它：
- 始终为图片和视频包含宽度和高度属性：这样可以预留空间。
- 为广告和嵌入内容预留空间：使用CSS
aspect-ratio或固定尺寸。 - 避免在现有内容上方插入内容：除非是响应用户交互。
- 使用font-display: swap：防止文本不可见，但可能导致轻微偏移；对于关键文本，考虑
font-display: optional。 - 小心动态内容：在首屏下方加载或平滑动画过渡。
核心网页指标对比
| 指标 | 衡量内容 | 良好阈值 | 分数低的主要原因 |
|---|---|---|---|
| LCP | 加载性能 | ≤ 2.5秒 | 服务器慢、阻塞渲染的资源、大图片 |
| INP | 响应性 | ≤ 200毫秒 | 长任务、繁重的JavaScript、大DOM |
| CLS | 视觉稳定性 | ≤ 0.1 | 无尺寸的图片、动态内容、网页字体 |
持续监控的工具和技术
改善核心网页指标不是一次性任务。设置持续监控：
- 使用
web-vitals库将指标发送到你的分析平台。 - 设置指标超过阈值时的警报。
- 在CI/CD中定期运行Lighthouse以捕获回归。
- 在Search Console中监控CrUX数据以了解真实用户趋势。
如需快速检查，在每次重大更改后使用Chrome DevTools的Lighthouse选项卡或PageSpeed Insights。
常见问题
什么是核心网页指标，为什么它们重要？
核心网页指标是三个指标（LCP、INP、CLS），分别衡量加载、交互性和视觉稳定性。它们重要是因为反映了真实的用户体验，并被谷歌用作排名信号。
我应该多久测量一次核心网页指标？
每次重大代码更改后测量，并设置持续的现场监控以随时间跟踪真实用户指标。Lighthouse等实验室工具适合快速检查，但现场数据展示实际用户体验。
没有开发人员我能改善核心网页指标吗？
一些改进如压缩图片可以使用工具完成，但大多数需要代码更改（例如添加宽度/高度属性、优化JavaScript）。通常需要开发人员或熟悉网页性能的人。
准备好优化图片以获得更好的LCP了吗？试试我们免费的图片压缩器，在不牺牲质量的情况下减小文件大小。