SuperAPI AI 工具集

debug-optimize-lcp

测试与质量

查看项目

更新于 10-15 21:55

技能介绍

用途:指导开发者调试和优化网页的最大内容绘制(LCP)性能,使用 Chrome DevTools MCP 工具完成分析与验证。

主要能力:

  • 录制性能追踪(navigate_page 后执行 performance_start_trace,设置 reload: true、autoStop: true),获取含 LCP 时序与洞察集的追踪结果,并记录洞察集 ID。
  • 使用 performance_analyze_insight 分析 LCP 相关洞察,包括 LCPBreakdown、DocumentLatency、RenderBlocking、LCPDiscovery。
  • 使用 evaluate_script 配合 references/lcp-snippets.md 中的代码片段识别 LCP 元素、审核常见问题。
  • 使用 list_network_requests 和 get_network_request 检查网络瀑布流,判断 LCP 资源何时开始加载及其耗时。

LCP 子部分:TTFB 约占 40%,资源加载延迟应低于 10%,资源加载时长约占 40%,元素渲染延迟应低于 10%。两个延迟子部分越接近零越好。

优化策略(按瓶颈优先级):消除资源加载延迟(使用标准 img 与 src,避免对 LCP 图片使用懒加载,按需添加 link rel=preload fetchpriority=high 与 fetchpriority=high);消除元素渲染延迟(内联关键 CSS、延迟非关键 CSS/JS、拆分长任务、使用 SSR);缩短资源加载时长(使用 WebP、AVIF、srcset、CDN、Cache-Control、font-display: swap);降低 TTFB(减少重定向、优化服务器响应、CDN 边缘缓存 HTML、确保可进入 bfcache)。

使用方式:按步骤依次执行录制追踪、分析洞察、识别 LCP 元素、检查网络瀑布、审查 HTML 常见问题;修改后重新运行追踪对比子部分数据,并可配合 emulate(如 networkConditions: "Fast 3G"、cpuThrottlingRate: 4)在受限条件下测试。

限制:资料未提供具体支持的浏览器版本、MCP 配置要求或完整代码片段内容(片段位于 references/lcp-snippets.md)。