核心网络指标优化：如何提升LCP、INP和CLS

一个网站看起来可能很快，但用户体验却可能很差。.

网页显示主要内容可能需要过长时间，当访客点击或轻触时响应迟缓，或者在用户试图阅读或与页面交互时，页面元素会意外移动。.

谷歌的 核心网页指标 旨在衡量真实页面体验中的这些重要方面。.

当前的三个“核心网络指标”是：

• LCP（最大内容绘制） — 加载性能
• INP（交互到下一次绘制） — 响应性
• CLS（累积布局偏移） — 视觉稳定性

本指南介绍了实用的 核心网络指标优化 无需盲目安装优化插件或升级服务器，即可诊断和改善 LCP、INP 和 CLS 的方法。.

绩效策略： 测量 → 确定指标 → 找出瓶颈 → 优化 → 通过真实用户进行验证。.

什么是核心网络指标？

“核心网页指标”是一组旨在评估网页用户体验关键方面的性能指标。.

谷歌根据页面加载的第75百分位数来评估核心网络指标，并按移动端和桌面端体验进行分类。.

这意味着，通过“核心网络生命体征”测试并非仅仅要完成一次完美的实验室测试。.

我们的目标是向真实的访客提供始终如一的优质体验。.

LCP、INP 与 CLS：它们有什么区别？

理解这三项指标最简单的方法是：

LCP： 主要内容多久会显示出来？

INP： 当访客进行交互时，页面在视觉上的响应速度有多快？

CLS： 当访客正在使用该页面时，页面会意外移动吗？

一个网页在某项指标上表现优异，但在另一项指标上表现不佳。.

例如：

• 服务器速度快 + 超大英雄图 → LCP 表现不佳
• 加载速度快 + 大量 JavaScript → INP 较差
• 加载速度快 + 广告未预留空间 → CLS 较差

这就是为什么应该分别优化“核心网络指标”的原因。.

指标 → 根本原因 → 针对性整改。.

如何测试核心网络指标

在修改网站之前，请先确定一个基准。.

有用的工具包括：

• Google PageSpeed Insights
• Google 搜索控制台
• Chrome 开发者工具
• 灯塔
• Chrome 用户体验报告数据

不要仅依赖一项测试。.

性能可能会因以下因素而有所不同：

• 设备
• 网络连接
• 地理位置
• 服务器负载
• 缓存状态
• 浏览器
• 第三方脚本

现场数据与实验室数据

在优化“核心网络生命体征”时，理解现场数据与实验室数据之间的区别至关重要。.

现场数据

实地数据来自真实用户在真实设备和网络条件下的使用情况。.

它反映了实际访问者的体验，在评估某个URL或一组URL在现实环境中是否通过“核心网络指标”测试时，是更具参考价值的依据。.

实验室数据

实验室数据是在受控的测试条件下生成的。.

这对于诊断性能问题非常有用，因为可以在更换特定组件的同时重复进行测试。.

正确的工作流程是：

现场数据 → 查找问题 → 实验室测试 → 修复 → 监控现场数据。.

当一次“灯塔”跑的数值从92变为87时，请不要惊慌。.

寻找一致的模式和真正的瓶颈。.

如何改善LCP

最大内容绘制（LCP） 衡量视口内最大的可见内容元素完成渲染所需的时间。.

LCP 元素通常是：

• 主图
• 特色图片
• 一个大标题
• 一张背景图片
• 一大段文字
• 一段视频的海报图片

一个好的LCP通常是 2.5秒或更短.

1. 确定 LCP 元素

在确定哪个元素实际上被作为LCP进行测量之前，请勿对随机图像进行优化。.

使用 PageSpeed Insights 或 Chrome 开发者工具来确定 LCP 元素。.

一旦发现，请调查延迟的原因。.

延迟可能涉及：

• 服务器响应
• 资源发现
• 图片下载
• CSS
• JavaScript
• 字体
• 渲染

在优化 LCP 之前，先找出 LCP 要素。.

2. 提高服务器响应时间

在服务器开始传输页面之前，浏览器无法显示重要内容。.

因此，起初反应迟缓可能会导致后续所有工作都受到延误。.

可能的服务器端原因包括：

• 主机速度慢
• PHP 执行速度慢
• 数据库查询
• CPU 饱和
• 应用容量不足
• 外部 API 调用速度慢
• 缺少缓存

对于 WordPress 而言，全页面缓存可以显著减少匿名访客的页面处理负担。.

不过，不要以为每个 LCP 问题都需要更换主机。.

TTFB 较慢 → 排查服务器问题。.
TTFB 快 + LCP 慢 → 排查前端问题。.

如果 WordPress 本身响应缓慢，请参阅我们的 WordPress 运行缓慢的故障排除指南.

3. 优化 LCP 图片

大型英雄图和特色图片是常见的LCP元素。.

通过以下方式对其进行优化：

• 使用适当的尺寸
• 压缩图像
• 在适当的情况下使用 WebP 或 AVIF 等高效格式
• 提供响应式图片尺寸
• 避免源文件体积过大

一张3000像素的图像若以800像素的分辨率显示，传输的数据量可能会远超实际所需。.

4. 不要对 LCP 图片进行延迟加载

懒加载对于页面下方较远的图片很有用，但若将其应用于页面折叠线以上的主要LCP图片，可能会延迟该图片的发现和加载。.

优先加载“折叠线以上”的重要资源，同时对“折叠线以下”的非关键内容进行延迟加载。.

折叠线以下的图片 → 延迟加载。.
关键 LCP 图像 → 尽早加载。.

5. 谨慎预加载关键资源

预加载可以告知浏览器，应以更高的优先级获取该资源。.

对于某些关键资源（例如重要的英雄图片或字体），此功能会很有用。.

但预加载过多的文件可能会导致带宽争夺。.

应有选择地使用预加载，而不是将其视为一种通用的速度优化手段。.

6. 减少阻碍渲染的资源

CSS 和 JavaScript 可能会延迟浏览器对重要内容的渲染。.

可能的改进包括：

• 减少未使用的 CSS
• 在适当的情况下将有限的关键CSS内联
• 延迟执行非关键的 JavaScript 代码
• 删除不必要的库
• 仅在需要时加载资源

进行修改后请仔细测试，因为过度优化 CSS 或 JavaScript 可能会导致页面功能失效。.

7. 当地理位置因素重要时，请使用 CDN

内容分发网络可以通过从更靠近访问者的位置提供缓存资源，从而降低网络延迟。.

当您的受众分布在不同地区时，CDN 会特别有用。.

根据配置的不同，CDN 可能提供以下服务：

• 图片
• CSS
• JavaScript
• 字体
• 缓存的 HTML

但请记住：

CDN ≠ 解决应用程序代码运行缓慢的方案。.

如果源端的 PHP 或数据库处理速度较慢，也请排查该瓶颈。.

如何提高INP

与“下次绘制”的交互 用于衡量页面在用户访问期间对用户交互的响应速度。.

例如：

• 单击菜单
• 打开下拉菜单
• 将商品加入购物车
• 点击按钮
• 使用交互式筛选器

一个好的INP通常是 200毫秒或更短.

INP 表现不佳通常与浏览器主线程上的工作量过大有关。.

8. 减少耗时的 JavaScript 任务

如果 JavaScript 占用主线程的时间过长，浏览器将无法快速响应用户输入。.

常见原因包括：

• 大型 JavaScript 包
• 页面构建器
• 复杂的前端框架
• 分析
• 广告
• 聊天小工具
• 社交小工具
• 弹出窗口

使用浏览器性能工具来识别耗时较长的任务，而不是凭空猜测是哪段脚本导致的。.

9. 删除不必要的 JavaScript

最快的 JavaScript 往往是你无需执行的 JavaScript。.

由以下脚本加载的审计脚本：

• 插件
• 主题
• 分析工具
• 广告平台
• 营销工具
• 社交媒体小工具

如果某个脚本几乎无法带来业务或用户价值，请考虑将其删除。.

每个脚本都应证明其性能开销是合理的。.

10. 将冗长的任务拆分成小任务

大型 JavaScript 任务可能会长时间阻塞用户交互。.

将耗时较长的任务拆分为较小的子任务，可以让浏览器在两次操作之间有机会响应用户输入。.

对于复杂的交互式应用程序而言，这一点尤为重要。.

11. 避免 DOM 过度复杂

非常庞大且嵌套很深的 DOM 结构会增加浏览器的处理负担。.

以下情况可能会出现这种情况：

• 复杂的页面构建器
• 大型巨型菜单
• 重复的布局容器
• 隐藏的页面元素
• 大型产品网格

在满足设计和功能需求的前提下，应尽可能简化标记语言。.

12. 优化事件处理程序

用户交互可能会触发耗时的 JavaScript 操作。.

例如，点击一个按钮可能会触发：

• DOM 更新
• 布局计算
• API调用
• 分析事件
• 多个插件功能

排查导致交互缓慢的处理程序，并减少不必要的同步操作。.

13. 延迟加载非关键的第三方脚本

第三方脚本可能会占用大量主线程时间。.

例如：

• 广告
• 分析
• 热力图
• 聊天
• 社交媒体嵌入
• 营销像素

在适当的情况下，应在稍后或交互之后加载非必要功能。.

如果某些脚本对于基本功能、用户同意、分析准确性或业务运营必不可少，请勿盲目延迟这些脚本的执行。.

如何改善 CLS

累积布局偏移 在用户浏览页面时，检测到意外的视觉移动。.

通常来说，一个好的CLS分数是 0.1 或更小.

试想一下，当你正要点击一个按钮时，恰好有广告出现在按钮上方，并将按钮向下顶了一下。.

这正是CLS旨在检测的那种不稳定的情况。.

14. 为图片添加宽度和高度

当浏览器在加载图片之前就知道其尺寸时，就可以预留出相应大小的空间。.

如果没有预留空间，当图片出现时，周围的内容可能会发生位移。.

请确保图片具有适当的尺寸或宽高比信息。.

15. 预留广告位

广告是导致布局偏移的常见原因之一。.

如果广告加载到一个此前未定义高度的区域中，下方的内容可能会突然发生位移。.

在广告加载之前，预留一个尺寸合适的容器。.

对于通过内容盈利的网站而言，这一点尤为重要。.

广告加载到预留位置 → 布局稳定。.
广告开辟新空间 → 潜在的CLS。.

16. 为嵌入内容和小工具预留空间

同样的原理也适用于：

• YouTube 视频
• 社交媒体嵌入
• 地图
• 聊天小工具
• 推荐小工具

定义预期的尺寸或宽高比，以便浏览器在外部内容显示之前预留空间。.

17. 优化网页字体

当备用文本被尺寸不同的网页字体替换时，字体可能会导致版式发生变化。.

可能的改进包括：

• 减少字体家族的使用
• 减少不必要的字体粗细
• 仔细预加载关键字体
• 使用适当的 font-display 行为
• 选择兼容的备用字体

字体应在加载性能和布局稳定性两方面都进行优化。.

18. 避免将内容插入到现有内容上方

在页面开始渲染后，内容上方突然插入的横幅、通知、表单、促销信息或小工具可能会导致明显的布局偏移。.

在可能的情况下：

• 请提前预订场地
• 使用不会导致内容位移的叠加层
• 将动态内容放置在现有内容下方

对于Cookie提示、促销横幅、联盟广告和通知栏，请务必格外小心。.

WordPress 的核心网络指标优化

WordPress 网站可能在多个层面上存在“核心网络指标”问题：

主机 → PHP → WordPress → 主题 → 插件 → 图片 → CSS → JavaScript → 第三方

一个合理的优化顺序是：

1. 衡量核心网络生命体征
2. 确定出现问题的指标
3. 确定导致问题的页面元素或进程
4. 消除瓶颈
5. 重新测试
6. 监控现场数据

如需进一步提升 WordPress 的性能，请阅读我们的 WordPress 加速指南.

主机服务会影响核心网络指标吗？

是的——但主要是当服务器端的性能影响页面资源的交付时。.

主机服务可能会影响：

• 服务器响应时间
• PHP 执行
• 数据库处理
• 来源可靠性
• 流量高峰期间的处理能力

这可能会导致LCP，尤其是在初始HTML响应较慢的情况下。.

但主机服务通常无法直接解决以下问题：

• 巨大的前端图片
• 冗长的 JavaScript
• 导致版面偏移的广告
• 图片尺寸不正确
• 复杂的 DOM 结构

因此：

服务器运行缓慢 → 优化基础设施。.
前端运行缓慢 → 优化前端。.
“两者都慢”→“两者都修复”。.

何时应为“核心网络指标”升级主机服务？

如果测试表明源服务器始终是瓶颈之一，则应考虑对基础设施进行调整。.

症状包括：

• 未缓存的服务器响应始终较慢
• CPU 饱和
• PHP 执行速度慢
• 数据库资源限制
• 正常流量下的性能下降
• 频繁出现的 5xx 错误

对于规模较小的 WordPress 网站，一个经过良好优化的 WordPress 托管环境可能就已足够。而正在发展的动态网站，最终可能会从托管型 VPS 或云基础设施中获益。.

如果您已达到该阶段，请在升级前对比您的实际需求。我们的 WordPress 托管要求指南 解释了CPU、内存和存储如何与不同的WordPress工作负载相关联。.

请勿通过升级主机服务来解决 JavaScript 问题。.

核心网络指标与CDN性能

CDN 可以通过缩短访问者与缓存内容之间的距离来改善资源分发。.

这尤其有助于：

• 图片
• CSS
• JavaScript
• 字体
• 静态资源
• 在支持的情况下缓存 HTML

然而，CDN的性能取决于配置、缓存命中率、地理覆盖范围、源服务器性能以及所提供内容的类型。.

在启用主要 CDN 功能之前和之后进行测量。.

核心网络指标与搜索引擎优化

核心网页指标是谷歌更广泛的页面体验信号的一部分。.

但不应将其解释为：

核心网络指标越好，排名自然越高。.

谷歌会综合评估多种因素，而有价值且相关的内容仍然是根本。.

正确的目标是：

高质量的内容 + 坚实的技术基础 + 良好的用户体验。.

若需进行更全面的网站审计，请使用我们的 技术SEO检查清单.

“共同核心”网站关键指标优化中的常见错误

• 力争获得100/100的Lighthouse评分
• 仅测试首页
• 仅使用一项性能测试
• 忽略现场数据
• LCP 图片的延迟加载
• 预加载了过多的资源
• 盲目延迟关键的 JavaScript 代码
• 安装多个优化插件
• 在不检查 TTFB 的情况下升级主机
• 忽略第三方脚本
• 将广告视为CLS来源而予以忽略
• 优化桌面端体验，却忽视了移动端用户

优化瓶颈——而不是分数。.

核心网络指标故障排除对照表

核心网络指标常见问题解答

什么是“三大核心网络指标”？

当前的核心网页指标包括“最大内容绘制”（LCP）、“交互到下次绘制”（INP）和“累计布局偏移”（CLS）。这些指标用于衡量加载性能、响应速度和视觉稳定性。.

什么样的LCP分数算好？

一个良好的LCP值应为页面加载第75百分位数时不超过2.5秒。.

什么样的INP分数算好？

一个良好的INP值在第75百分位数处应为200毫秒或更短。.

什么样的CLS分数算好？

一个良好的CLS分数应为第75百分位数处0.1或更低。.

PageSpeed Insights 会直接影响谷歌的排名吗？

PageSpeed Insights 的评分本身不应被视为直接的排名分数。请利用该工具诊断性能问题，同时在有相关数据时，应特别关注真实用户的“核心网络生命体征”数据。.

主机服务会影响LCP吗？

当服务器响应缓慢导致初始 HTML 或重要资源加载延迟时，主机服务可能会影响 LCP。不过，LCP 也可能由大尺寸图片、CSS、字体、资源优先级设置或前端渲染等问题引起。.

JavaScript 会影响 INP 吗？

是的。耗时较长或运行时间较长的 JavaScript 代码可能会阻塞浏览器的主线程，从而延迟对用户交互的视觉响应。.

广告会影响 CLS 吗？

是的。如果在广告加载前未预留空间，广告可能会导致布局偏移。定义稳定的广告容器可以减轻这一问题。.

CDN 能否改善核心网络指标？

当网络距离或静态资源分发成为瓶颈时，CDN 可以改善内容分发延迟，并可能有助于提升 LCP。但它并不能自动解决 JavaScript、布局、数据库或应用程序方面的问题。.

我应该升级我的VPS来改善核心网络指标吗？

只有当服务器监控和测试表明，CPU、PHP、数据库、存储或其他基础设施限制是导致性能不佳的原因时，才需要这样做。更大的VPS无法解决前端问题，例如过重的JavaScript或布局偏移。.

核心网络指标优化检查清单

LCP

• ✓ 识别 LCP 元素
• ✓ 检查服务器响应时间
• ✓ 优化 LCP 图片
• ✓ 避免对关键 LCP 内容进行延迟加载
• ✓ 优先配置关键资源
• ✓ 减少阻塞渲染的资源
• ✓ 在适当的情况下使用 CDN

INP

• ✓ 识别响应缓慢的交互
• ✓ 减少耗时的 JavaScript 任务
• ✓ 删除不必要的脚本
• ✓ 减少主线程的工作量
• ✓ 简化冗余的 DOM 结构
• ✓ 优化交互处理程序
• ✓ 控制第三方脚本

CLS

• ✓ 设定图像尺寸
• ✓ 预订广告位
• ✓ 预留嵌入/小工具位置
• ✓ 优化网页字体
• ✓ 避免将内容插入到现有内容上方
• ✓ 测试动态横幅和通知

最终建议

成功 核心网络指标优化 这并不是说要安装每一个性能插件，也不是说要买得起就买最快的服务器。.

首先，确定是哪项指标未达标。.

如果 LCP 表现不佳，请排查 LCP 相关资源、服务器响应、图片、CSS、字体以及资源加载情况。.

如果 INP 表现不佳，请排查 JavaScript、主线程操作、事件处理程序和第三方脚本。.

如果CLS表现不佳，请检查图片、广告、嵌入内容、字体以及动态插入的内容。.

然后对实际的瓶颈进行优化，并再次进行测量。.

LCP → 加载更快。.
INP → 响应更迅速。.
CLS → 保持稳定。.

请记住：

测量 → 诊断 → 优化 → 验证。.

一个快速的网站，并不是指安装了最多优化插件或拥有最大服务器容量的网站。而是一个从主机、应用程序代码到图片和JavaScript等各个层面的设计，都与工作负载和用户体验相匹配的网站。.