Core Web Vitals优化实战：把网站速度从35提到92分

Core Web Vitals是Google衡量网页体验的三个核心指标：LCP（最大内容绘制）、INP（交互到下次绘制）、CLS（累积布局偏移）。2024年Google用INP替换了FID，这个改动影响不小——INP衡量的是整个页面生命周期的交互延迟，不是单次点击。

我之前的一个WordPress站，PageSpeed Insights移动端只有35分，改了一个多月提到92。下面说具体怎么做的。

LCP优化（从4.8秒降到1.6秒）：LCP衡量的是页面主要内容加载时间。我的问题是首屏有一张1920px宽的大图，加载了将近5秒。解决方案分三步：先把图片转成WebP格式，文件体积直接减了60%；然后用img标签的srcset属性，按屏幕宽度加载不同尺寸的图，手机上只加载640px宽的版本；最后给图片加了fetchpriority="high"属性，让浏览器优先加载它。三招下来LCP就达标了。

INP优化（从380ms降到95ms）：原来的问题是WordPress装了一个臃肿的页面构建器插件，每次点击都触发大量JavaScript重计算。处理办法是砍掉了这个插件，用原生Gutenberg编辑器重建了页面。同时用WP Rocket插件做了JS延迟加载——非关键脚本在用户交互之后才执行。最有效的改动是把Google Fonts从外部加载改成了本地托管，去掉了外部第三方域名的DNS查询延迟。

CLS优化（从0.35降到0.01）：布局偏移最烦人——你正要点一个按钮，广告突然加载出来把按钮顶飞了。我的问题出在文章里的嵌入式推文和YouTube视频，它们加载时高度不确定。修复方法很简单：给所有嵌入内容的外层容器设置固定的min-height，等于预期的内容高度。广告位也设置了固定高度占位。

还有一个全局优化：换了CDN。之前用的是美国节点，国内用户访问延迟很高。切换到了腾讯云CDN，国内加载时间直接减半。亚洲用户多的站，CDN节点位置比很多"优化技巧"都重要。

工具推荐：PageSpeed Insights看分数和具体建议，Web Vitals Chrome插件在开发时实时显示三个指标，DebugBear可以做更深入的分析（有免费试用）。

标签： Core Web Vitals 网站性能优化 LCP优化 PageSpeed