LCP与INP性能优化：提升谷歌核心网页指标的前端实战

作为一名站长，我对谷歌 SEO 排名的核心因素一直很关注：

页面速度（即前端性能优化）在这张图中只占 3%，看似微不足道，其实它位列前十，每一项都对 SEO 有着不可忽视的影响。要知道影响 SEO 的因素成千上万，大多数因素的权重连 0.x% 都不到。而且今年谷歌对页面速度的重视程度又提高了——去年它的占比还只有 1%。

所以，想让自己的站点排名靠前，发布前后都得认真分析、调优网站的性能。

LCP、INP、CLS 这三项指标

性能方面最关键的三个核心网页指标就是 LCP、INP 和 CLS。

• LCP（最大内容绘制）：页面首次加载时，最大元素完成渲染的时间，衡量的是加载速度。
• INP（交互下一步绘制）：所有点击、滑动等用户交互的响应延迟，衡量的是交互流畅度。
• CLS（累积布局偏移）：页面加载过程中元素意外错位、跳动的累计偏移量，衡量的是视觉稳定性。

这三项都可以在浏览器自带的 DevTools 开发者工具里用 Lighthouse 检测到。

其中最难搞的就是 INP。说白了，它就是用户点击到页面真正更新之间的时间差。Lighthouse 给出的报告值，是你页面里表现最差的那次交互延迟（优秀的参考值是 200 毫秒以内）。有统计显示，目前 43% 的网站还达不到 200 毫秒的“良好”阈值。

一个棘手的 INP 案例

三项指标里，INP 最让人头疼。

LCP 的瓶颈主要在网络传输上，想办法优化网络就好。CLS 本质上是 CSS 布局的问题，让前端同学晚上加个班重新梳理一下 CSS 和 HTML 也能解决。

INP 就不同了，它牵扯到布局、内存、JavaScript、不同设备、各种架构……牵一发而动全身。

说说我之前的一个亲身案例吧。

去年朋友有个项目——一个在线文档编辑器，里面有几个十个组件，单击后会重新渲染组件，然后显示字体的高亮效果。在桌面端还算流畅，可在一款常见的手机上，这个过程居然要持续 500 多毫秒，延迟非常明显。

怎么优化？

最先想到的，就是打开 Chrome 开发者工具 → Performance 面板，录制一次交互过程，然后找出执行时间超过 50ms 的 Task。

果然，我们很快发现一个明显的阻塞点：有个库里的分析脚本在偷偷做同步操作，但实际上这种操作没有意义。把它移到 Web Worker 里之后，延迟从 500 多毫秒降到了 300 毫秒。

接下来要做的就是“先给反馈，再慢慢算”。

案例里原本的逻辑是先渲染组件再显示高亮，那不如反过来：先显示高亮，再慢慢渲染组件。毕竟高亮效果最直观，用户马上就能看到反馈，组件稍慢一点，体感上会舒服很多。

最后，React 框架里的 useDeferredValue 也派上了用场——它可以延迟非关键的渲染。

const [filter, setFilter] = useState('');
const deferredFilter = useDeferredValue(filter);

// 注释：
// 输入框用 filter（立即响应）
// 列表渲染用 deferredFilter（延迟更新）

不到一上午，问题就解决了。

关于 INP 的性能调优，基本就是这个思路，大家可以参考一下。

LCP 一般怎么优化

很多人第一反应是“优化图片”，但这里其实有个很大的误解。

抛开其他部门负责的硬件性因素（比如网速）不谈，多年来的前端经验告诉我，真正拖慢 LCP 的并不是图片太多，也不是图片太大，而是首屏最大的那张图片加载太慢了。

可以用 npm install web-vitals 装上这个包，然后让它告诉我们“罪魁祸首”到底是谁：

import { onLCP } from 'web-vitals';

onLCP(metric => {
  console.log('罪魁祸首是这个:', metric.entries.at(-1)?.element);
  console.log('加载用了多久:', metric.value);
});

跑一下，你就会看到类似 xxx.png 的输出。对，找出那一个就够了，问题要一个一个解决。

找到之后，给它设置预加载：

<link rel="preload" as="image" href="你的罪魁祸首图片.jpg" fetchpriority="high">

但注意别滥用，只预加载这一张就够。另一个容易犯的错误是对这张图使用懒加载（loading="lazy"），千万不要！ 这是非常常见的坑。

如果还不行，就换格式：因为体积方面 AVIF < WebP < JPEG，所以优先采用 AVIF 格式。

再进一步，还可以针对不同设备用不同分辨率的图片。手机屏幕上根本不需要那种超高分辨率的图，用 srcset 响应式加载不同尺寸的图片就好。

先讲这些吧，初步优化已经够用了。更多关于前端性能和 SEO 优化的实战经验，欢迎来云栈社区一起交流。