网站Core Web Vitals飘红了半年，2026年我用这三招全部变绿

Core Web Vitals是Google排名的一个硬指标，但说实话很多站长都没认真管过。我之前也是——直到一个主要关键词从第3掉到第12，查Search Console才发现LCP和CLS全线飘红。

问题基本都出在三个地方，修起来其实不复杂：

LCP（最大内容绘制）超标——图片是罪魁祸首。首页一张1920px的banner图，原始大小1.2M。改了三件事：压缩到WebP格式（降到180K）、加了srcset按屏幕宽度加载不同尺寸、首屏图片用fetchpriority=high标记优先加载。LCP从4.8秒降到了1.9秒。

CLS（累计布局偏移）超标——广告和字体在跳。Google AdSense的自动广告是CLS大户。改用手动放置，固定广告位高度用CSS写死（min-height）。字体加载期间用font-display: swap + 预设fallback字体尺寸，避免FOUT导致的布局跳动。CLS从0.35降到了0.02。

INP（交互延迟）超标——JS太重。之前加载了一个分析工具SDK，400K的JS在主线程跑了很久。用webpack做了code splitting，非关键JS全部defer。再把一些不紧急的计算（统计数据、热力图）放到requestIdleCallback里跑。INP从380ms降到了90ms。

工具方面，PageSpeed Insights和Lighthouse日常用。但有一个容易被忽略的是Chrome DevTools的Performance面板——它能精确告诉你是哪个函数在拖后腿，比Lighthouse细得多。

改完之后Search Console全绿了。三周后那个掉到12的关键词回到了第5，虽然没回到第3，但这个趋势是对的。

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