core-web-vitals

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SEO Technical: Core Web Vitals

SEO技术：Core Web Vitals

Guides optimization of Core Web Vitals (CWV)—Google's user experience metrics that affect search ranking. CWV are confirmed ranking factors for mobile and desktop.

When invoking: On first use, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.

指导Core Web Vitals（CWV）的优化，CWV是谷歌推出的衡量影响搜索排名的用户体验指标，已被证实是移动端和桌面端的搜索排名因素。

调用规则：首次使用时如果合适，可以先用1-2句话介绍该技能覆盖的内容及重要性，再输出核心内容。后续调用或用户要求跳过介绍时，直接输出核心内容即可。

Scope (Technical SEO)

覆盖范围（技术SEO）

LCP (Largest Contentful Paint): Loading performance; time to render largest content element
INP (Interaction to Next Paint): Responsiveness; replaced FID in March 2024
CLS (Cumulative Layout Shift): Visual stability; unexpected layout shifts

LCP（Largest Contentful Paint）：加载性能，指渲染最大内容元素所需的时间
INP（Interaction to Next Paint）：响应性指标，2024年3月正式取代FID
CLS（Cumulative Layout Shift）：视觉稳定性指标，衡量页面意外布局偏移的情况

Target Thresholds (75th percentile, field data)

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

Metric	Target	Good	Needs Improvement	Poor
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

Source: Google Page Experience

指标	目标	良好	需要优化	较差
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 Page Experience

Initial Assessment

初步评估

Check for project context first: If

.claude/project-context.md

.cursor/project-context.md

exists, read it for site URL.

Identify:

Tools: GSC Core Web Vitals report, PageSpeed Insights, Chrome DevTools
Metrics: Which metric is failing (LCP, INP, CLS)
Page type: Hero, article, product, list—LCP candidate differs

优先检查项目上下文：如果存在

.claude/project-context.md

或

.cursor/project-context.md

，读取文件中的站点URL信息。

确认以下信息：

工具：GSC Core Web Vitals报告、PageSpeed Insights、Chrome DevTools
指标：哪项指标未达标（LCP、INP、CLS）
页面类型：首屏页、文章页、产品页、列表页——不同页面的LCP候选元素存在差异

LCP Optimization

LCP优化

LCP measures the time until the largest content element (image, video, or text block) is visible.

Cause	Fix
Slow server response	Reduce TTFB; use CDN; optimize server
Render-blocking resources	Defer non-critical CSS/JS; inline critical CSS
Large images	WebP/AVIF; compress; `width` / `height` to prevent CLS; see image-optimization
Client-side rendering	SSR/SSG for above-fold content; see rendering-strategies
Third-party scripts	Load async; defer non-critical

LCP candidates: Hero image, large text block, video poster. Ensure above-fold images use

loading="eager"

(default); never lazy-load LCP.

LCP衡量最大内容元素（图片、视频或文本块）变为可见状态所需的时间。

问题原因	解决方案
服务器响应缓慢	降低TTFB；使用CDN；优化服务器配置
渲染阻塞资源	延迟加载非关键CSS/JS；内联关键CSS
图片体积过大	使用WebP/AVIF格式；压缩图片；设置 `width` / `height` 属性避免CLS；参考image-optimization
客户端渲染	首屏内容使用SSR/SSG；参考rendering-strategies
第三方脚本影响	异步加载；延迟加载非关键脚本

LCP候选元素：首屏图、大文本块、视频封面图。确保首屏图片使用

loading="eager"

（默认值）；绝对不要对LCP元素设置懒加载。

INP Optimization

INP优化

INP measures responsiveness—time from user interaction to next paint. Replaced FID in March 2024.

Cause	Fix
Long-running JS	Break tasks >50ms; use `requestIdleCallback` ; Web Workers
Heavy event handlers	Debounce/throttle; defer non-critical work
Main thread blocking	Reduce third-party scripts; defer non-critical JS
Layout thrashing	Batch DOM reads/writes; avoid forced reflows

INP衡量页面响应性——从用户发起交互到下一次页面绘制的间隔时间，2024年3月取代了FID。

问题原因	解决方案
JS任务运行时间过长	拆分执行时长超过50ms的任务；使用 `requestIdleCallback` ；使用Web Workers
事件处理函数逻辑过重	防抖/节流处理；延迟执行非关键任务
主线程阻塞	减少第三方脚本；延迟加载非关键JS
布局抖动	批量处理DOM读/写操作；避免强制回流

CLS Optimization

CLS优化

CLS measures unexpected layout shifts.

Cause	Fix
Images without dimensions	Always set `width` and `height` attributes
Dynamic content	Reserve space for ads, embeds; use `min-height`
Web fonts	`font-display: optional` or `swap` ; preload critical fonts
Animations	Use `transform` instead of `top` / `left` / `width`

Reserve space: For images, ads, embeds—define dimensions before load. Avoid inserting content above existing content without reserved space.

CLS衡量页面意外布局偏移的情况。

问题原因	解决方案
图片未设置尺寸	始终为图片设置 `width` 和 `height` 属性
动态内容插入	为广告、嵌入内容预留空间；使用 `min-height` 占位
网页字体加载影响	使用 `font-display: optional` 或 `swap` 配置；预加载关键字体
动画实现不合理	使用 `transform` 属性实现动画，避免修改 `top` / `left` / `width` 属性

预留空间提示：针对图片、广告、嵌入内容，在资源加载前先定义占位尺寸。不要在已有内容上方插入未提前预留空间的内容。

Tools & Monitoring

工具与监控

Tool	Use
GSC	Core Web Vitals report; URL grouping; field data
PageSpeed Insights	Lab + field data; mobile + desktop
Chrome DevTools	Performance panel; LCP element; layout shift overlay

工具	用途
GSC	查看Core Web Vitals报告；URL分组；获取现场数据
PageSpeed Insights	同时提供实验室+现场数据；支持移动端+桌面端检测
Chrome DevTools	性能面板分析；定位LCP元素；查看布局偏移叠加层