2026年网站Core Web Vitals优化：我把LCP从4秒压到了1.2秒

Google的Core Web Vitals说了好几年了，但说实话，2024年以前大部分站不优化也没太大影响。2026年不一样了——Google明确把CWV作为移动搜索排名的一个重要因子，而且权重在持续提升。

我自己的站今年年初LCP（最大内容绘制）在4秒左右，移动端评分45分。花了两个周末优化到1.2秒，评分90。分享一下具体做了什么。

第一步：先诊断，别盲改。

直接打开PageSpeed Insights，输入URL，看移动端和桌面端各自的分数。重点关注"实验室数据"里的具体指标，而不是总分数。

我的站核心问题是三个：LCP慢（首屏大图加载慢）、CLS有位移（字体加载后页面跳动）、TTFB不稳定（服务器响应慢）。

第二步：干TTFB。

TTFB（首字节时间）是服务器响应速度。我当时的TTFB波动很大，高峰时段能到1.5秒。查了三个东西：

1. 服务器CPU是不是被打满了——不是，2核4G的ECS跑WordPress，CPU占用不到20%。

2. 数据库查询有没有慢查询——有。WordPress的wp_postmeta表如果没有优化，元数据查询会很慢。用了Index WP MySQL For Speed插件，给常用的查询字段加了索引，TTFB降了大概0.3秒。

3. 有没有用CDN——没有。加了阿里云CDN之后，静态资源（CSS、JS、图片）的TTFB直接降到了50ms以内。这个改动效果最明显。

第三步：压LCP。

LCP慢的原因很简单：首屏那张大图太大了。原图是PNG格式，1.8MB。做了一件事：

- 转成WebP格式，体积变成140KB

- 用标签配合srcset，给不同屏幕宽度提供不同尺寸的图

- 给首屏图片加了fetchpriority="high"属性，让浏览器优先加载

- 用WP Rocket开启了延迟加载（但排除首屏图片）

这四个操作下来，LCP从4秒降到了1.2秒。WebP转换是最大的贡献者，一张图从1.8MB降到140KB，加载时间不降才奇怪。

第四步：解决CLS。

CLS（累积布局偏移）就是页面加载时元素位置跳动。我的站跳动是因为Google Fonts加载慢，中文字体回退后尺寸不一样。

解决方法：不用Google Fonts了。2026年中文字体解决方案很多，我直接用系统字体栈：

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;

没有额外的网络请求，字体即时可用，CLS直接归零。视觉上损失一点"设计感"，但换来的是移动端0位移。这个交易很划算。

第五步：持续监控。

优化不是一次性的。我设了一个每周自动跑一次PageSpeed Insights的脚本（Google有免费API，每天500次配额），把结果发到飞书群。只要分数掉了就查原因——通常是某篇新文章里塞了一张大图。

CWV优化不是什么高深技术，核心就是三件事：图片压缩、CDN、减少字体依赖。能做到这三点的站，移动端80分以上不难。

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