2024 年 Google 把 INP 取代 FID 成为新的 Core Web Vitals 指标，这是过去 5 年里最大的一次调整。如果你的网站还在用 PageSpeed Insights 老版本的评分自我感觉良好，是时候重新校准了。
Core Web Vitals: 三个核心指标
这三个指标直接影响搜索排名，也是用户最能感知的性能维度：
- LCP（Largest Contentful Paint）：最大内容绘制时间。< 2.5s 为合格
- INP（Interaction to Next Paint）：交互到下一帧绘制的延迟。< 200ms 为合格
- CLS（Cumulative Layout Shift）：累计布局偏移。< 0.1 为合格
LCP 优化的四个杠杆
LCP 通常是首屏的主图、主标题或 hero 区域。优化路径：
- 关键资源预加载：用
<link rel="preload">提前加载首屏 hero 图片和字体 - 图片格式：用 WebP 或 AVIF 替代 JPEG/PNG，体积可减 30-60%
- 响应式图片：用
srcset让移动端只下载小图 - CDN + HTTP/2：让静态资源就近加载，多路复用降低 RTT
INP: 新指标的隐形杀手
INP 比旧的 FID 严苛得多——FID 只测第一次交互，INP 测整个会话所有交互的 P98。这意味着：
如果你的网站有一个用户偶尔点开的复杂模态框、过滤器、地图组件，只要它阻塞主线程超过 200ms，整站 INP 就会被它拖下水。
主线程优化清单
把超过 50ms 的长任务拆成 requestIdleCallback 分片；图片懒加载用 loading="lazy"；第三方脚本（统计、客服、广告）一律 async 或 defer。
CLS 的隐藏陷阱
CLS 不达标的网站，用户体验是这样的：你刚要点"确定"，按钮被广告挤下去了，结果点到了别的地方。常见成因：
- 图片没有显式
width/height，加载完才占位 - 字体加载导致 FOUT/FOIT，文字尺寸切换
- 动态插入的横幅广告、cookie 提示
- iframe 嵌入但没有预留高度
另外 7 个值得关注的指标
除了 Core Web Vitals，下面这些指标对真实用户体验同样关键：
- TTFB (Time to First Byte)：服务器响应速度，< 800ms
- FCP (First Contentful Paint)：首次内容渲染，< 1.8s
- TBT (Total Blocking Time)：主线程总阻塞时间，< 200ms
- Speed Index：视觉填充速度
- JS Bundle Size：单页 < 200KB（gzipped）是健康线
- 缓存命中率：CDN > 90%
- 错误率：JS 错误每千次会话 < 1 次
工具组合
我们在交付前的性能审计标准流程：
- Lighthouse 跑性能、可访问性、SEO 三类评分，目标 > 90
- WebPageTest 跑多地多设备，看真实网络下的瀑布流
- Chrome DevTools 的 Performance 面板抓主线程长任务
- 上线后用 RUM（Real User Monitoring）持续追踪 75 分位的真实指标
性能不是上线那一刻达标就完事的——任何一次新功能上线、第三方脚本接入，都可能让指标退化。把性能监控做成 CI 流程的一环，才是长效之计。