core-web-vitals

SEO 技术：核心 Web 指标

指导如何优化核心 Web 指标（CWV）——Google 用于衡量用户体验并影响搜索排名的指标。CWV 已确认是移动端和桌面端的排名因素。

调用时：首次使用时，如果有帮助，可先用 1–2 句话介绍此技能涵盖的内容及其重要性，然后提供主要输出。后续使用或用户要求跳过时，直接提供主要输出。

范围（技术 SEO）

• LCP（最大内容绘制）：加载性能；最大内容元素的渲染时间
• INP（下一次绘制交互）：响应能力；于 2024 年 3 月 12 日取代 FID
• CLS（累积布局偏移）：视觉稳定性；意外的布局偏移

目标阈值（第 75 百分位，现场数据）

指标	目标	良好	需要改进	较差
LCP	≤2.5s	≤2.5s	2.5–4.0s	>4.0s
INP	≤200ms	≤200ms	200–500ms	>500ms
CLS	<0.1	≤0.1	0.1–0.25	>0.25

来源：Google 页面体验

初步评估

**项目背景：**如果存在根目录下的 contextus.md，请阅读并仅加载与此任务相关的模块。没有 Contextus 时，使用现有项目材料或用户提供的信息，并询问缺失的信息；不要创建并行的背景信息系统。

请确定：

1. 工具：GSC 核心 Web 指标报告、PageSpeed Insights、Chrome DevTools
2. 指标：哪个指标不达标（LCP、INP、CLS）
3. 页面类型：主视觉区、文章、产品、列表——LCP 候选元素各不相同

LCP 优化

LCP 衡量最大内容元素（图片、视频或文本块）显示所需的时间。

原因	修复方法
服务器响应缓慢	缩短 TTFB；使用 CDN；优化服务器
阻塞渲染的资源	延迟加载非关键 CSS/JS；内联关键 CSS
图片过大	使用 WebP/AVIF；压缩；设置 width/height 以防止 CLS；参见 image-optimization
客户端渲染	对首屏内容使用 SSR/SSG；参见 rendering-strategies
第三方脚本	异步加载；延迟加载非关键脚本

LCP 候选元素：主视觉图片、大型文本块、视频海报图。确保首屏图片使用 loading="eager"（默认值）；绝不要延迟加载 LCP 元素。

INP 优化

INP 衡量响应能力，即从用户交互到下一次绘制所需的时间。于 2024 年 3 月 12 日取代 FID。

原因	修复方法
长时间运行的 JS	将超过 50ms 的任务拆分；使用 requestIdleCallback；使用 Web Workers
繁重的事件处理程序	使用防抖/节流；延迟执行非关键工作
主线程阻塞	减少第三方脚本；延迟加载非关键 JS
布局抖动	批量执行 DOM 读取/写入；避免强制回流

CLS 优化

CLS 衡量意外的布局偏移。

原因	修复方法
未设置尺寸的图片	始终设置 width 和 height 属性
动态内容	为广告、嵌入内容预留空间；使用 min-height
Web 字体	使用 font-display: optional 或 swap；预加载关键字体
动画	使用 transform，而不是 top/left/width

预留空间：为图片、广告和嵌入内容在加载前定义尺寸。避免在现有内容上方插入未预留空间的内容。

工具与监控

工具	用途
GSC	核心 Web 指标报告；URL 分组；现场数据
PageSpeed Insights	实验室数据 + 现场数据；移动端 + 桌面端
Chrome DevTools	Performance 面板；LCP 元素；布局偏移覆盖层

输出格式

• 当前状态：哪些指标不达标（LCP、INP、CLS）
• 优先修复项：按影响排序
• 参考资料：Web Vitals、页面体验

相关技能

• image-optimization：LCP 图片优化；WebP；延迟加载（仅限首屏以下内容）
• google-search-console：CWV 报告；字段数据监控
• mobile-friendly：移动优先索引；移动端 CWV 目标
• rendering-strategies：用于优化 LCP 的 SSR/SSG；在初始 HTML 中包含内容
• site-crawlability：重定向链会浪费抓取资源；为提升性能需修复