Core Web Vitals三个指标是什么
Google 2024年3月正式将INP（Interaction to Next Paint）纳入Core Web Vitals指标，取代了之前的FID。这个变化影响了不少网站的搜索排名，但很多人到现在还没搞清楚INP和FID到底差在哪，也不知道从哪下手优化。
这篇讲清楚Core Web Vitals三个指标的具体要求，重点拆解INP的优化方法，帮你把页面响应速度提上来。
Core Web Vitals三个指标是什么
Google的Web Vitals官方文档定义了三个核心指标，分别衡量页面体验的三个维度：
LCP（Largest Contentful Paint） 衡量加载性能。页面最大内容元素渲染完成的时间。好的标准是2.5秒以内，2.5到4秒需要改善，超过4秒算差。
INP（Interaction to Next Paint） 衡量交互响应。用户与页面交互后到下一次画面渲染的时间。好的标准是200毫秒以内，200到500毫秒需要改善，超过500毫秒算差。INP在2024年3月正式成为稳定指标，取代了之前的FID。
CLS（Cumulative Layout Shift） 衡量视觉稳定性。页面加载过程中元素位置偏移的累积量。好的标准是0.1以内，0.1到0.25需要改善，超过0.25算差。
Chrome使用数据显示，用户在页面上90%的时间花在页面加载完成之后。所以Google把响应性指标从FID（只测第一次交互的延迟）升级到INP（测量整个页面生命周期中所有交互的延迟），更贴近真实用户体验。这个数据来自web.dev官方文档。
INP和FID的关键区别
FID只测量用户第一次与页面交互时的延迟。点击一个按钮，从点击到浏览器开始处理这个点击的时间，就是FID。它只管第一次，后面的交互不管。
INP测量用户在整个页面访问过程中所有交互的延迟，取其中最差的一个（严格说是第98百分位）。这意味着如果你的页面有10个可交互元素，INP关注的是响应最慢的那次交互。
这个区别很重要。一个页面可能第一次交互很快但后面的交互卡顿，FID会显示没问题，INP会暴露真实问题。
LCP优化：让最大内容更快出现
LCP元素通常是页面上最大的文字块或图片。优化方向：
优化图片加载。 如果LCP元素是图片，用现代格式。WebP比JPEG小25%到35%，AVIF比WebP还小20%。图片加载快了LCP就低。给图片加fetchpriority=”high”属性，告诉浏览器优先加载这张图。
减少渲染阻塞资源。 CSS和JavaScript会阻塞渲染。把非关键的CSS异步加载，把非关键的JavaScript加defer或async属性。Critical CSS（首屏需要的最小CSS）内联到HTML里，避免额外请求。
使用CDN。 静态资源走CDN能减少网络延迟。Cloudflare的免费tier就够用。
服务器响应时间。 TTFB（Time to First Byte）控制在800毫秒以内。用缓存、优化数据库查询、考虑SSR或静态生成。
INP优化：让交互更快响应
INP优化是最多人头疼的部分。交互卡顿通常是因为JavaScript执行时间太长，阻塞了主线程。
减少JavaScript执行时间。 浏览器的主线程同时负责JavaScript执行和页面渲染。如果一段JavaScript执行超过50毫秒，用户就会感觉到卡顿。把长任务拆成小块，用setTimeout或requestIdleCallback让出主线程。
使用Web Worker。 耗时的计算任务放到Web Worker里执行，不阻塞主线程。比如JSON解析、数据处理、复杂计算。主线程只负责UI更新。
优化事件监听。 不要在scroll、resize、mousemove这些高频事件里做重活。用防抖或节流控制执行频率。scroll事件一秒能触发几十次，每次都跑一段复杂逻辑会把页面拖死。
延迟加载非关键JavaScript。 第三方脚本（分析工具、客服插件、广告SDK）是INP杀手。用Partytown或自建代理把这些脚本移到Web Worker里执行，不占用主线程。
分解大块渲染。 如果一次DOM更新涉及大量元素，浏览器渲染会卡住。用requestAnimationFrame分批渲染，每帧只处理一部分。
CLS优化：让页面不跳动
页面元素突然移位是用户体验的大问题。你准备点一个按钮，结果页面跳了一下，点到了别的地方。
给图片和视频指定尺寸。 浏览器在加载图片之前不知道它有多大，会先占0像素，加载完突然撑开，其他元素跟着移位。给所有img标签加width和height属性，或者用CSS aspect-ratio。
不要在已渲染内容上方插入元素。 这是CLS最常见的原因。广告、弹窗、cookie提示条如果从顶部插入，下面所有内容都会往下移。把固定高度的占位容器先放好，内容加载进去不会改变布局。
避免动态改变字体大小。 字体加载完之后文字尺寸变了，整个布局跟着跳。用font-display: optional让浏览器用回退字体渲染，不等待自定义字体加载。
怎么测量Core Web Vitals
PageSpeed Insights。 输入URL直接测，同时给出Lab Data（实验室数据）和Field Data（真实用户数据）。最常用的工具。
Search Console。 Google Search Console的Core Web Vitals报告显示你网站所有页面的真实用户数据。能看到哪些页面有INP问题、LCP问题或CLS问题。
Chrome DevTools。 打开Performance面板，录制一段交互操作，能看到每个任务的执行时间。长任务会被红色标记。
web-vitals JavaScript库。 在自己网站上加这段代码收集真实用户的Core Web Vitals数据：
import { onCLS, onINP, onLCP } from 'web-vitals';
onCLS(console.log);
onINP(console.log);
onLCP(console.log);这个库是Google官方维护的，npm install web-vitals就能用。收集到的数据发送到你自己的分析服务，能看到真实用户在不同设备上的体验。
优化优先级
如果三个指标都不达标，先优化哪个？
LCP对排名影响最直接，用户也更敏感于加载速度，先搞定。CLS通常改几个HTML属性就能大幅改善，成本低收益高，第二个做。INP优化工作量最大，需要深入分析JavaScript执行情况，放最后但必须做。
根据Search Console的数据决定具体优先级。如果某个指标已经达标，把精力放到没达标的那个上面。
0 条评论