Google Core Web Vitals三个指标到底怎么优化——实操记录

上个月把两个客户站的Core Web Vitals从红色拉到了全绿。不是用什么奇技淫巧，就是把该做的事情做了。分享具体操作，可以直接照着改。

LCP（最大内容绘制）从4.8秒→1.9秒

LCP看的是页面最大内容块的加载时间。排查出来的问题：

① 首页大图2.3MB的PNG。换成WebP格式后只有180KB，肉眼完全看不出区别。命令行一行搞定：cwebp -q 80 input.png -o output.webp。

② 字体文件从Google Fonts加载，每次都要等300ms+。解决方案是把字体下载下来放本地，preload标签提前加载。

③ 首屏图片没有设置fetchpriority="high"。给LCP元素加上这个属性后浏览器会优先加载。

三个改动加起来，LCP直接从4.8秒掉到1.9秒。效果明显到客户自己都看出来了。

INP（交互延迟）从350ms→80ms

INP是2024年取代FID的新指标，看的是页面整个生命周期的交互响应。这个站的问题出在：

① 点击菜单后有一个200ms的动画才出现下拉。把动画直接干掉，瞬间弹出。

② 页面加载了一个200KB的统计脚本，是同步加载的，阻塞了主线程。改成async加载。

③ 轮播图用了第三方JS插件，初始化时DOM操作频繁。换成纯CSS实现，不用JS。（其实大部分轮播图都不需要JS）

CLS（累积布局偏移）从0.35→0.02

CLS是页面加载时元素的位置跳动。这个站的主要问题：

① 图片没设宽高。浏览器加载图片前不知道占多大位置，加载后突然撑开导致下面内容跳动。给所有img标签加上width和height，配合CSS的aspect-ratio。

② 顶部通知栏是JS动态插入的，加载时突然出现把整个页面往下挤。改成CSS预留固定高度占位。

③ 自定义字体加载时先用系统字体，加载完切换导致文字大小变化。用font-display: swap + size-adjust把两个字体的尺寸对齐。

工具推荐

别只看Lighthouse——那个是实验室数据。真正有用的是Google Search Console里的Core Web Vitals报告，那是真实用户的Chrome浏览器上报的。还有个免费工具叫Web Vitals Chrome扩展，装上去每个页面左上角会实时显示三个指标。

优化顺序

先搞图片和字体，这两个一般占大头。再搞JS阻塞。最后调CLS。按这个顺序来，90%的站都能进绿色。

标签： 网站优化 Core Web Vitals LCP CLS INP