查加载慢用这Skill拆LCP

帮你用 Chrome DevTools 调试和优化页面加载速度。

debug-optimize-lcp 是定位页面 LCP 瓶颈的 Skill。LCP 是视口里最大内容元素显示的时间,它用性能记录找元素,并拆响应、资源发现、下载和显示延迟。

图片很小却很晚才被发现,压缩文件未必解决问题;下载已结束但主线程忙,也可能迟迟没显示。先看哪一段慢,再决定提前发现、减少阻塞或改善传输。

主文列出的时间比例不是每页都该凑的配方,文本型 LCP 也未必有独立图片资源。预加载和高优先级不能到处加,否则还可能竞争关键资源。

修改后在可比条件复测,实验室一次快了不说明所有真实用户都快。工具脚本与参数本文未展开执行;适合以证据选优化,不把首屏截图或总分当瓶颈解释,也不能用 bfcache 直接证明冷加载服务器响应更快。

分类:测试排错

来源仓库:chromedevtools/chrome-devtools-mcp

适合用来做什么

  • 如何使用Chrome DevTools调试LCP问题?
  • 请指导我优化页面的最大内容渲染时间。

安装 debug-optimize-lcp

npx skills add https://www.iskills.cc/skills/chromedevtools/chrome-devtools-mcp/debug-optimize-lcp/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 debug-optimize-lcp 的用途与原始说明

浏览全部 Skill 指南