前端优化：核心 SEO 网页指标优化 LCP、INP 的思路

作为一个站长，对于谷歌 seo 排名的前几大因素，还是很在意的：

别看页面速度（也就是前端性能优化）是占 3% ，看起来不重要，实际上这些是列举的前 10 项，这 10 项都是 SEO 看重的。影响 SEO 的因素很多种，大部分占比都是 0.x% 甚至更少。

其实今年，谷歌对页面速度的重视程度还提高了，往年只有 1%。

对于为了让自己站的排名更高，需要在发布网站前后，好好分析网站性能。

LCP、INP、CLS 方面

首先是性能最主要的 LCP、INP、CLS 这三个指标。

LCP 最大内容绘制：页面首次加载最大元素完成渲染时间，衡量加载速度。

INP 交互下一步绘制：页面所有点击、滑动等用户交互的响应延迟，衡量交互流畅度。

CLS 累积布局偏移：页面加载中元素意外错位、跳动的累计偏移量，衡量视觉稳定性。三者是谷歌核心网页指标。

这些都能在浏览器自带的 dev tool 开发者工具里的 Lighthouse 给检测到。

最棘手的是 INP ，其实就是【用户点击】到【页面更新】之间的时间延迟，好理解吧？

最后 Lighthouse 给你报告里的，是你页面最差的那个值（优秀参考值是 200ms）。实际上有统计，43%的网站目前未能达到 200 毫秒的"良好"阈值。

一个 INP 案例

在这三者之中，这个 INP 是最让人头疼的。

因为 LCP 其实大头都在文件网络传输上，你想办法优化网络就 OK 。

而 CLS 是一个 CSS 问题，让前端切图仔晚上加个班，重新优化一下 CSS HTML 也好解决。

最难受的就是 INP ！ 涉及到 布局、内存、JS 、不同设备、各种架构的问题。

接下来简单讲讲我的一个案例经验：

我朋友去年有个项目（在线文档编辑器），有几十个组件，单击后会重新渲染组件，之后再显示字体高亮。在电脑端还好，可是在一个常用的手机型号上，这个过程会持续 500 多毫秒，，，很明显的延迟。

怎么优化？？

最开始，先打开 Chrome 开发者工具 → Performance → 录制交互 → 找超过 50ms 的任务 。

然后我们发现了个很明显的阻塞点，我们发现有个库里面有分析脚本，在偷偷做同步操作。其实没意义。把它放到 work 里，这部分解决。延迟降到了 300ms。

然后是【先显示反馈，再做计算】。

因为案例里，我这个是先渲染组件，再显示高亮.... 那不如先显示高亮，再渲染组件.... 毕竟高亮这个最显眼了。组件久一点，没关系。体感上舒服很多。

然后是 react 方面。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 响应式加载不同分辨率的图片就 OK 。

先讲这几点吧，初步优化够用了。