当需要诊断和修复 LCP、INP、CLS 等 Core…

适用于按 Google Core Web Vitals 阈值优化网站加载性能、交互响应和视觉稳定性。

适用场景

解决思路

1. 首次调用本技能时，如有帮助，先用 1–2 句话说明本技能覆盖什么、为什么重要，然后给出主要输出；后续调用或用户要求跳过时，直接给出主要输出。
2. 明确范围：CWV 是 Google 确认的移动端和桌面端排名因素；LCP 衡量加载性能，即最大内容元素渲染完成的时间；INP 衡量响应性，已于 2024 年 3 月 12 日取代 FID；CLS 衡量视觉稳定性，即意外布局偏移。
3. 按第 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 Page Experience（https://developers.google.com/search/docs/appearance/page-experience）。
4. 初始评估时先检查项目上下文：如果 `.claude/project-context.md` 或 `.cursor/project-context.md` 存在，读取其中的站点 URL。
5. 识别：可用工具（GSC Core Web Vitals 报告、PageSpeed Insights、Chrome DevTools）；哪个指标未达标（LCP、INP、CLS）；页面类型（hero、文章、产品、列表等），因为 LCP 候选元素会不同。
6. LCP 优化：针对慢服务器响应，降低 TTFB、使用 CDN、优化服务器。
7. LCP 优化：针对渲染阻塞资源，延迟非关键 CSS/JS，内联关键 CSS。
8. LCP 优化：针对大图片，使用 WebP/AVIF、压缩、设置 `width`/`height` 防止 CLS；参见 image-optimization。
9. LCP 优化：针对客户端渲染，对首屏内容使用 SSR/SSG；参见 rendering-strategies。
10. LCP 优化：针对第三方脚本，异步加载，延迟非关键脚本。
11. LCP 优化：识别 LCP 候选元素（hero 图片、大文本块、视频 poster）；确保首屏图片使用 `loading="eager"`（默认值）；绝不要对 LCP 元素做懒加载。
12. INP 优化：针对长耗时 JS，拆分超过 50ms 的任务；使用 `requestIdleCallback`；使用 Web Workers。
13. INP 优化：针对重事件处理器，做防抖/节流；延迟非关键工作。
14. INP 优化：针对主线程阻塞，减少第三方脚本；延迟非关键 JS。
15. INP 优化：针对布局抖动，批量处理 DOM 读写；避免强制重排。
16. CLS 优化：针对无尺寸图片，始终设置 `width` 和 `height` 属性。
17. CLS 优化：针对动态内容，为广告、嵌入内容预留空间；使用 `min-height`。
18. CLS 优化：针对 Web 字体，使用 `font-display: optional` 或 `swap`；预加载关键字体。
19. CLS 优化：针对动画，使用 `transform` 而不是 `top`/`left`/`width`。
20. CLS 优化：为图片、广告、嵌入内容预留空间——在加载前定义尺寸；避免在没有预留空间的情况下在现有内容上方插入内容。
21. 工具与监控：使用 GSC 查看 Core Web Vitals 报告、URL 分组、字段数据。
22. 工具与监控：使用 PageSpeed Insights 查看实验室数据 + 字段数据，移动端 + 桌面端。
23. 工具与监控：使用 Chrome DevTools 的 Performance 面板，定位 LCP 元素，查看布局偏移叠加层。
24. 输出格式：给出当前状态——哪些指标未达标（LCP、INP、CLS）。
25. 输出格式：给出按影响排序的优先修复项。
26. 输出格式：附上参考：Web Vitals（https://web.dev/vitals/）、Page Experience（https://developers.google.com/search/docs/appearance/page-experience）。
27. 关联技能：image-optimization——LCP 图片优化、WebP、懒加载（仅首屏以下）。
28. 关联技能：google-search-console——CWV 报告、字段数据监控。
29. 关联技能：mobile-friendly——移动优先索引、移动端 CWV 目标。
30. 关联技能：rendering-strategies——用 SSR/SSG 优化 LCP；确保内容出现在初始 HTML 中。
31. 关联技能：site-crawlability——重定向链浪费抓取预算；修复以提升性能。

适用边界 · 注意事项

• 不适用于只想操作 GSC 的 Core Web Vitals 报告的场景；原文提示应改用 google-search-console 技能。
• 不适用于非 Web 前端性能问题（如后端 API、数据库、网络基础设施）或与 LCP/INP/CLS/页面体验无关的一般性能优化。
• 如果无法获取字段数据或无法用实验室/DevTools 验证，修复优先级可能不可靠。