核心摘要：2020 年谷歌宣布 Core Web Vitals 成为排名信号,2024 年 3 月 INP 取代 FID 成为第三大指标。本文系统讲解 LCP、CLS、INP 的定义、优化方法和实测工具。
一、Core Web Vitals 是什么
Core Web Vitals (核心网页指标) 是谷歌用来衡量用户在网页上体验质量的 3 个核心指标:
- LCP (Largest Contentful Paint) – 最大内容绘制时间
- CLS (Cumulative Layout Shift) – 累积布局偏移
- INP (Interaction to Next Paint) – 交互到下次绘制
三项都合格 = Core Web Vitals 通过,对 SEO 有明显加分。任一不合格 = 可能影响排名。
二、LCP 详解与优化
2.1 定义
页面加载时,较大的一块内容(通常是首屏 hero 图或主标题)完全渲染出来的时间。
2.2 达标标准
| 评级 | LCP |
|---|---|
| Good ✅ | < 2.5 秒 |
| Needs Improvement ⚠️ | 2.5-4 秒 |
| Poor ❌ | > 4 秒 |
2.3 4 大优化方法
方法 1:优化首屏图片
- Hero 图必须小于 200KB
- 用 WebP 格式(比 JPG 小 30%)
- 添加 <link rel=”preload” as=”image”> 预加载
- 不要用 <img loading=”lazy”> (首屏图不该延迟)
方法 2:优化字体加载
- 使用 <link rel=”preconnect”> 预连接 Google Fonts
- 加 font-display: swap 避免字体阻塞渲染
- 只加载需要的字重
方法 3:精简首屏 CSS
- Critical CSS 内联到 <head>
- 非首屏 CSS 异步加载
方法 4:服务器优化
- 启用 HTTP/2 或 HTTP/3
- 用 CDN(Cloudflare、阿里云)
- 数据库查询优化
三、CLS 详解与优化
3.1 定义
页面加载过程中,内容”跳动”的累计程度。用户点某个按钮,结果它突然跳到别的地方,这是最典型的 CLS 问题。
3.2 达标标准
| 评级 | CLS |
|---|---|
| Good ✅ | < 0.1 |
| Needs Improvement ⚠️ | 0.1-0.25 |
| Poor ❌ | > 0.25 |
3.3 5 大优化方法
方法 1:图片必须指定尺寸
<img src="hero.jpg" width="1200" height="675">
浏览器提前知道图片尺寸,不会加载时跳动。
方法 2:广告位预留空间
用 min-height 预留广告位置,避免广告加载后挤压内容。
方法 3:字体加载优化
用 size-adjust 属性让加载中的字体和实际字体尺寸接近。
方法 4:避免顶部动态插入
不要在已有内容上方 JS 动态插入元素(banner、通知条等)。
方法 5:动画用 transform
用 transform: translateY() 代替修改 top/margin,不会引发布局重排。
四、INP 详解与优化
4.1 定义
用户与页面交互(点击/输入/滚动)后,页面下次视觉响应的时间。
4.2 达标标准
| 评级 | INP |
|---|---|
| Good ✅ | < 200 ms |
| Needs Improvement ⚠️ | 200-500 ms |
| Poor ❌ | > 500 ms |
4.3 4 大优化方法
方法 1:拆分长任务
单个 JS 任务不超过 50 ms,长任务用 setTimeout 或 requestIdleCallback 拆分。
方法 2:延迟第三方脚本
Google Analytics、Facebook Pixel 等第三方脚本用 async 或 defer 加载。
方法 3:虚拟滚动
长列表(如 1000+ 条数据)只渲染可见部分,减少 DOM 操作。
方法 4:去除阻塞脚本
不需要立刻执行的脚本延迟到 window load 后。
五、测量工具
5.1 免费工具
- Google PageSpeed Insights:实时测,给具体建议
- Google Search Console → 核心网页指标:看整站真实用户数据
- Chrome DevTools → Lighthouse:开发者详细分析
- Web Vitals 扩展:Chrome 插件,实时看每个页面数据
5.2 付费工具
- WebPageTest.org(免费但深度)
- SpeedCurve
- New Relic
六、常见问题排查
Q:LCP 一直不达标怎么办?
先在 GSC 看哪些页面 LCP 差,针对性优化这些页面的 hero 图和字体。
Q:CLS 忽好忽坏怎么办?
可能是广告 / A/B 测试脚本引起的,用真实用户监控(RUM)找出真凶。
Q:INP 提示”Long Task”怎么办?
用 DevTools Performance 面板录制,找出耗时的 JS 函数,拆分或异步化。
七、企业实施建议
- 第 1 天:PageSpeed Insights 全站扫描,记录基线
- 第 1 周:优化图片、字体、CSS
- 第 2 周:精简 JS,延迟第三方脚本
- 第 3-4 周:GSC 数据周对比,持续调整
- 目标:1 个月内 3 项指标全部转 Good
石家庄楷轩网络提供 Core Web Vitals 专项优化服务,通常 30 天内 3 项达标。咨询电话 15632118538。
