Inblog
开启你的企业博客
SEO

Core Web Vitals（核心网页指标）

Core Web Vitals 是 Google 定义的三项核心用户体验指标，用于量化网页的加载速度、响应能力和视觉稳定性。

Core Web Vitals 是 Google 定义的三项核心用户体验指标，用于量化网页的加载速度、响应能力和视觉稳定性。

为什么重要

Core Web Vitals 是 Google 网页体验算法中的一项官方搜索排名因素。根据 2025 至 2026 年的行业分析，它们约占整体排名信号的 10% 至 15%。对于竞争激烈的关键词，满足全部三项指标的网站报告称搜索可见度提升了 8% 至 15%。相反，根据 2025 年 Web Almanac 的数据，只有约 48% 的移动端页面和 56% 的桌面端页面通过了全部三项阈值，这意味着优化 Core Web Vitals 是获得竞争优势的真实机会。

三项核心指标

LCP（Largest Contentful Paint，最大内容绘制）—— 加载性能

衡量页面主要内容（最大的图片或文本块）在屏幕上渲染所需的时间。

评级阈值
良好<= 2.5s
需要改进2.5s – 4.0s
较差> 4.0s

INP（Interaction to Next Paint，交互到下次绘制）—— 响应能力

衡量从用户交互（点击、轻触、键盘输入等）到屏幕实际更新之间的延迟。INP 于 2024 年 3 月正式取代 FID（First Input Delay，首次输入延迟）成为 Core Web Vital，它评估的是整个页面生命周期内的响应能力，而不仅仅是首次输入。

评级阈值
良好<= 200ms
需要改进200ms – 500ms
较差> 500ms

CLS（Cumulative Layout Shift，累积布局偏移）—— 视觉稳定性

衡量页面加载过程中布局意外偏移的程度。CLS 分数过高的常见原因包括广告或图片加载过晚，从而把按钮位置挤来挤去。

评级阈值
良好<= 0.1
需要改进0.1 – 0.25
较差> 0.25

只有当至少 75% 的页面访问中三项指标都达到「良好」阈值时，才算通过 Core Web Vitals 评估。

优化方法

改进 LCP

  • 为 LCP 目标图片添加 fetchpriority="high" 属性，并使用 <link rel="preload"> 进行预加载。
  • 使用 WebP 和 AVIF 等新一代图片格式来减小文件体积。
  • 借助 CDN（内容分发网络）来缩短服务器响应时间（TTFB）。
  • 实施服务器端缓存并优化数据库查询。

改进 INP

  • 使用 defer 或 async 延迟会阻塞主线程的非必要 JavaScript。
  • 将长任务拆分为更小的单元，使浏览器能更快地响应用户输入。
  • 移除不必要的第三方脚本，或延迟其加载时机。

改进 CLS

  • 为图片和视频元素指定 width 和 height 属性，使浏览器能够提前预留空间。
  • 为网页字体加载搭配使用 font-display: swap 和 <link rel="preload">，以防止布局偏移。
  • 避免在已有内容之上动态插入横幅或广告。

测量工具

工具类型说明
Google Search Console（Core Web Vitals 报告）实地数据按 URL 分组查看整站的 CWV 状态
PageSpeed Insights实地 + 实验室数据同时提供 CrUX 数据和 Lighthouse 分析
Lighthouse（内置于 Chrome DevTools）实验室数据在开发过程中诊断性能问题并提供改进建议
Web Vitals Chrome 扩展程序实时监测在浏览时实时查看 LCP、INP 和 CLS
WebPageTest实验室数据在各种网络条件和设备环境下运行详细测试
Google Analytics 4实地数据收集并分析真实用户的 CWV 数据

实地数据反映访客的真实环境，是 Google 搜索排名直接使用的数据。实验室数据是在受控环境中测得的，适用于诊断和调试。同时结合使用这两类数据是最有效的方法。

Sources:

相关 inblog 文章

inblog 如何提供帮助

inblog 基于 Next.js SSR 构建，提供经过优化的 Core Web Vitals 性能。