核心网页指标（LCP、INP、CLS）：改善企业网站速度的实用指南

许多企业主都听说过网站必须快，但很难把这句建议变成具体的工作。快是指谁的体验？用什么来衡量？在哪种设备上？Core Web Vitals（核心网页指标）就是谷歌对这些问题的回答：三项指标，分别衡量主要内容出现的速度、页面对点击和触摸的响应速度，以及加载过程中版面的稳定程度。

本文用企业主和营销团队都能理解的语言解释这三项指标，而不只是写给开发人员。你将了解这些数字的含义、在哪里查看自己网站的得分、成绩不佳的最常见原因，以及回报最大的修复顺序。速度对销售的整体影响见网站速度及其影响一文；这里聚焦搜索引擎实际使用的具体指标。

摘要

• 核心网页指标包括三项：LCP（主要内容速度）、INP（交互响应性）和 CLS（版面稳定性）
• 当 LCP 不超过 2.5 秒、INP 不超过 200 毫秒、CLS 不超过 0.1 时视为良好，按真实访问的第 75 百分位计算
• 最重要的数据来自真实用户的手机访问，而不仅仅是开发人员笔记本上的实验室测试
• 大多数问题源于图片过大、沉重的第三方脚本、阻塞渲染的字体，以及没有固定尺寸的元素
• 最佳做法是按顺序修复：先测量，找出最差的页面，修复最大的原因，再持续监控，避免分数再次下滑

什么是核心网页指标，企业为什么要关心？

核心网页指标是谷歌公布的一组用户体验指标，并作为页面评估的信号之一。需要坦诚地看待比重：内容相关性仍然远比速度得分重要。一个很慢但能出色解答搜索者问题的页面，仍然可能排名靠前。但当两个页面同样相关时，体验更好的往往胜出；更重要的是，糟糕的体验会让访客在成为潜在客户之前就离开。

因此，改善核心网页指标最有力的理由不只是排名，而是转化。来自广告或搜索的访客，如果等了三秒才看到页面，又点到一个没有反应的按钮，很少会再回来。对这些指标的几乎每一项改进，真实访客都能立刻感受到，所以收益可以用提交的表单和收到的 WhatsApp 消息来计算。

需要了解的三项指标

LCP：主要内容多快可见

最大内容绘制（LCP）衡量首屏中最大元素渲染完成所需的时间，通常是主图、横幅图片或大标题区块。良好的值是 2.5 秒或更短；超过 4 秒则为较差。对访客来说，这就是页面感觉已经打开的那一刻。在企业网站上，LCP 元素几乎总是首屏大图，因此这张图片的交付方式几乎决定了整个得分。

INP：页面响应多快

下次绘制交互（INP）在 2024 年 3 月取代了旧指标首次输入延迟（FID）。与只衡量第一次交互的前任不同，INP 会关注一次访问中的所有交互，即点击、触摸和按键，并报告最差或接近最差的那一次。良好的值是 200 毫秒或更短；超过 500 毫秒则为较差。当浏览器正忙于运行 JavaScript，无法对用户的点击做出反应时，问题就出现了。菜单打开很慢、购物车按钮像失灵一样，都是典型症状。

CLS：版面有多稳定

累积布局偏移（CLS）衡量页面加载过程中元素意外移动的程度。这个数字没有单位，良好的值是 0.1 或更低。每个人都遇到过：正要点一个按钮，结果上方出现了广告或图片，把按钮挤到下面，于是点到了另一个链接。在产品页或表单上，这类偏移会立即降低信任感并造成误点。

如何查看你网站的得分

需要区分两类数据。现场数据来自真实用户，是评估所采用的依据。实验室数据来自受控的模拟，适合查找原因和测试修复，但不是正式数字。

• Google Search Console 中的核心网页指标报告，基于现场数据把你的页面分为良好、需要改进和较差，并分别列出手机和桌面
• PageSpeed Insights 在流量足够时显示现场数据，并附上实验室诊断和改进机会清单
• Chrome 浏览器中的 Lighthouse 适合在发布前测试改动
• 在自己网站上做真实用户监测，可以看到按页面、设备和国家划分的趋势

建议从 Search Console 开始，因为它的报告会把相似页面归为一组，例如所有产品页或所有博客文章。对模板做一次修复，通常能同时改善数百个页面。如果网站是新的或流量很低，可能还没有现场数据；这时可使用手机配置并限制网络速度的实验室测试作为近似。

得分不佳的常见原因与修复方法

改善 LCP

• 压缩首屏大图并转换为 WebP 或 AVIF 等现代格式，按屏幕需要设置尺寸，而不是使用几兆字节的相机原图
• 提供多种尺寸的图片，避免手机下载桌面版本
• 不要对主图使用延迟加载；页面顶部的图片应立即加载，首屏以下的图片可以稍后再加载
• 通过缓存、内容分发网络和高效的数据库查询缩短服务器响应时间，详见[数据库与业务应用性能](/blog/performa-database-dan-aplikasi-bisnis-yang-melambat)
• 避免在页面顶部使用一次加载大量图片的大型轮播图

改善 INP

• 审查第三方脚本，如聊天插件、广告追踪、地图和视频播放器；每个脚本都会给浏览器增加工作量
• 把首屏不需要的脚本推迟到用户交互后或页面加载完成后再执行
• 把耗时较长的 JavaScript 任务拆分成小块，让浏览器在其间能够响应
• 避免为小功能引入大型库；很多时候几行普通代码就足够了
• 对于大量依赖 JavaScript 框架的应用，可考虑服务端渲染，让更少的代码在用户设备上运行

改善 CLS

• 为所有图片和视频设置宽度和高度（或宽高比），让浏览器在文件下载完成前就预留空间
• 为广告、Cookie 同意横幅和稍后出现的插件预留固定空间
• 选择不会让文字跳动的字体加载策略，并使用大小相近的备用字体
• 不要在已显示的内容上方插入新内容，除非是对用户操作的响应
• 动画应使用变换（transform），而不是改变会影响版面的元素尺寸或位置

第三方脚本：最容易被忽视的原因

在许多企业网站上，自己团队编写的代码其实很轻。真正拖慢页面的，是营销和销售人员逐个添加的附加项：多个平台的广告追踪、会话录制、弹窗问卷、聊天插件、交互式地图和 A/B 测试工具。每一个都加载自己的代码，往往来自其他服务器，而且不少还会互相覆盖。

做一次清点：列出所有第三方脚本、其用途、负责人，以及是否仍在使用。为两年前已结束的活动而安装的脚本，是第一批该删除的对象。对于仍然需要的脚本，要问它能否在首次交互后再加载，或能否换成更轻量的版本。整洁的标签管理也有利于数据衡量；更多指导见网站与移动应用分析一文。

建议的工作顺序

1. 01打开 Search Console 中的核心网页指标报告，记录被评为较差或需要改进的页面组，先从手机开始
2. 02从每组中挑选一个代表页面，例如首页、一个服务页、一篇文章和一个产品页
3. 03对这些页面运行 PageSpeed Insights，记录 LCP 元素、最重的脚本和版面偏移的来源
4. 04先修复最大的原因，通常是首屏大图和第三方脚本
5. 05在实验室中重新测试、发布，然后等待现场数据更新，这需要整整约四周
6. 06建立监控和性能预算，避免后续改动悄悄拉低得分

最后一步常被跳过，但从长远看最关键。一个上线时很快的网站，可能因为新内容、新插件和新脚本，在一年内变慢。设定上限，例如页面体积上限或第三方脚本数量上限，并在每次发布时自动检查，远比定期进行大型修复项目便宜。这种做法类似于网站正常运行时间与健康监控。

CMS、主题与网站架构的作用

如果地基本身很沉重，优化能走的距离是有限的。基于现成主题并安装数十个插件的网站，通常每个页面都携带大量用不到的代码。这种情况下小修小补有帮助，但最好的结果来自精简主题和插件，或者在某个阶段用更精简的架构重建。平台选择见CMS 与网站内容管理和无头网站架构。

如果决定重建，要注意重定向、URL 结构和元数据，以保护现有排名，详见网站改版与迁移而不丢失 SEO 排名。其他互补的优化基础列在公司网站的基础 SEO中。

常见错误

• 现场数据已经良好，却还在追求实验室 100 分；满分并非必要，而且成本很高
• 只在桌面端测试，而大部分评估基于手机
• 手动修复单个页面，而问题其实出在被数百个页面共用的模板上
• 在不了解改动内容的情况下安装优化插件，导致其他功能出问题
• 忽视 Cookie 横幅、聊天插件和广告对 CLS 与 INP 的影响
• 修复后不再监控，几个月后得分又下降

常见问题

核心网页指标会决定排名吗？这些指标是页面体验的信号之一，但不是唯一的决定因素，其权重小于内容相关性。应把它视为良好体验的要求，而不是提升排名的捷径。

为什么每次测试 PageSpeed Insights 的得分都不一样？实验室测试受当时的网络状况和设备负载影响。请参考多次测试的趋势，并优先看现场数据，因为它是 28 天的汇总，更稳定。

改进多久后会在 Search Console 中体现？由于数据按滚动的 28 天收集，变化通常要在大约一个月后才能完全体现。但用户实际感受到的改善从发布那一刻就开始了。

流量很少的小网站需要担心吗？仍需确保基本体验良好，但不需要大项目。压缩图片、减少插件、删除不用的脚本，就能解决大部分问题。

这些修复对国际访客也有用吗？非常有用。网络较慢地区的访客受沉重页面的影响最大。使用内容分发网络和轻量图片对每个市场都有帮助，包括多语言网站。

结论

核心网页指标并不是只有开发人员才懂的技术谜题。三个问题很简单：主要内容多快出现，页面响应多快，外观有多稳定。通过衡量真实用户数据、先修复最大的原因并持续监控，企业网站可以提供更好的体验、更健康的 SEO 前景，并从同样的流量中获得更高的转化。