用途
该技能面向使用 Chrome DevTools MCP 进行 Largest Contentful Paint（LCP）审计与优化的场景。其目标是找到实际的 LCP 元素，识别哪个 LCP 子部分拖慢速度，并验证修复是否真正缓解了瓶颈。
主要能力
- 录制性能 trace，并读取 trace 输出中可用的 insight 集合 ID。
- 运行 performance_analyze_insight 分析 LCPBreakdown，并按需分析 DocumentLatency、RenderBlocking 或 LCPDiscovery。
- 使用 evaluate_script 配合 references/lcp-snippets.md 识别 LCP 元素及常见 DOM 问题。
- 使用 list_network_requests 和 get_network_request 检查 LCP 资源的时序与优先级。
- 针对最慢子部分推荐最小修复，并在相同条件下重新录制 trace 验证改进。
使用方式
技能根据输入参数（$ARGUMENTS）分派不同动作：
- 参数为空：询问目标 URL/页面以及重新加载是否安全。
- 页面加载慢或涉及 Core Web Vitals：录制 trace，分析 LCP 洞察，再检查元素与网络证据。
- 首屏主图或主要内容慢：识别 LCP 元素，确认资源发现、优先级与加载时序。
- 关注 TTFB：在前端改动前先分析 DocumentLatency 与请求时序。
- 关注渲染阻塞：分析 RenderBlocking、脚本、CSS 与主线程证据。
- 修复验证：在相同条件下重新运行 trace，并比较各子部分时序。
调试工作流：
- 导航到页面，确认可以重新加载。
- 运行 performance_start_trace，参数为 reload: true 和 autoStop: true。
- 记录 trace 输出中可用的 insight 集合 ID。
- 运行 performance_analyze_insight 分析 LCPBreakdown，然后按指示分析 DocumentLatency、RenderBlocking 或 LCPDiscovery。
- 使用 evaluate_script 配合 references/lcp-snippets.md 识别 LCP 元素和常见 DOM 问题。
- 使用 list_network_requests 和 get_network_request 检查 LCP 资源的时序与优先级。
- 推荐针对最慢子部分的最小修复。
- 重新运行相同 trace 验证改进。
优化顺序：
- 消除资源加载延迟：让 LCP 资源在初始 HTML 中可被发现，避免对其懒加载。
- 消除元素渲染延迟：减少渲染阻塞的 CSS/JS 和主线程工作。
- 缩短资源加载时长：优化字节数、CDN、缓存和优先级。
- 降低 TTFB：移除重定向、缓存 HTML、优化服务器响应时间。
LCP 目标
- 良好：2.5 秒或更短。
- 需要改进：2.5 至 4.0 秒。
- 差：大于 4.0 秒。
适用场景
- 页面加载缓慢或需要优化 Core Web Vitals。
- 首屏主图或主要内容加载慢。
- 怀疑 TTFB 偏高。
- 怀疑存在渲染阻塞。
- 需要验证某项修复是否有效。
限制与注意事项
- 在推荐修复前必须先识别最慢的 LCP 子部分。
- 在检查资源加载延迟和渲染延迟之前，不要先优化字节数。
- trace 文件不应纳入版本控制。
- 比较修复前后的 trace 时，应使用相同的网络和 CPU 条件。
- 不得在仓库 MCP 策略之外启用额外的字段数据或遥测行为。
- Chrome DevTools MCP 性能工具可能根据服务器标志使用与 CrUX 相关的行为；应遵守仓库 MCP 加固要求，未经用户明确意图不得启用额外遥测或 CrUX 提交。
参考文件索引
- references/elements-and-size.md：哪些元素计入 LCP 以及大小如何确定；当 LCP 元素不明确时阅读。
- references/lcp-breakdown.md：四个 LCP 子部分及其优化含义；在解读 trace 洞察时阅读。
- references/lcp-snippets.md：用于 LCP 元素发现和 DOM 问题检查的脚本；当 trace 证据需要 DOM 确认时阅读。
- references/lcp-fixes.md：按 LCP 子部分给出的修复；在推荐更改时阅读。
- references/provenance.md：上游来源、提交、许可证和改编说明；在修改此技能或审计来源前阅读。
关键术语
- LCP：Largest Contentful Paint，最大可见内容元素的渲染时间。
- LCP 子部分：TTFB、资源加载延迟、资源加载时长或元素渲染延迟。
- Waterfall：LCP 资源的网络请求时序证据。
- 验证 trace：修复后在相同条件下捕获的第二次 trace。
验证契约
在声明技能更改完成前，运行 uv run wagents validate、uv run python skills/skill-creator/scripts/audit.py skills/chrome-devtools-debug-optimize-lcp 以及 uv run wagents package chrome-devtools-debug-optimize-lcp --dry-run。