先看看示例
作者提供的示例，实际效果取决于你的输入和使用工具。
输入
示例 trace：HTML 200ms；主脚本 400ms 下载后运行 300ms；首屏图由脚本完成后才请求，耗时 500ms。
输出
编辑示例 · 未运行
观察：首屏图片请求依赖脚本执行完成，最早约在 900ms 开始；这段记录提示图片发现较晚。
建议：检查能否由初始 HTML 直接提供图片地址，或在确认为关键图后设置合适预加载。
验证：同设备、缓存策略和网络条件比较图片请求起点与 LCP 元素，不只比较总下载量。
限制：此为构造时间线，尚无真实页面 LCP 或优化后结果。
方法说明
利用可用浏览器和性能工具分析关键指标、阻塞资源与请求链。 具体任务 从网络记录定位首屏图片等待：利用可用浏览器和性能工具分析关键指标、阻塞资源与请求链。 排查点击后的卡顿：结合长任务、事件处理与渲染记录找主线程阻塞，并确认是否影响关键操作。 必需材料 目标 URL 与具体慢的路径 设备、网络和测量方式 可选材料 性能 trace/HAR 源码和构建配置 使用门槛 有浏览器性能工具或可用记录，能区分首次加载与交互延迟。 这个 Skill 额外提供的方法 沿着加载和执行证据定位关键路径，按用户可感知影响排序，再用同条件复测。 编辑示例（未运行） 从网络记录定位首屏图片等待 任务：请根据下面的示例材料完成从网络记录定位首屏图片等待，把判断依据和待确认事项写清楚。 输入： 示例 trace：HTML 200ms；主脚本 400ms 下载后运行 300ms；首屏图由脚本完成后才请求，耗时 500ms。 结果片段： 观察：首屏图片请求依赖脚本执行完成，最早约在 900ms 开始；这段记录提示图片发现较晚。 建议：检查能否由初始 HTML 直接提供图片地址，或在确认为关键图后设置合适预加载。 验证：同设备、缓存策略和网络条件比较图片请求起点与 LCP 元素，不只比较总下载量。 限制：此为构造时间线，尚无真实页面 LCP 或优化后结果。 沿着加载和执行证据定位关键路径，按用户可感知影响排序，再用同条件复测。 该片段是编辑示例，用于说明交付形态，未运行上游技能。 首次任务 请使用「从加载过程查网页为什么慢」完成「从网络记录定位首屏图片等待」。 任务要求：沿着加载和执行证据定位关键路径，按用户可感知影响排序，再用同条件复测。 我的必需材料： - 目标 URL 与具体慢的路径：[请填写或粘贴] - 设备、网络和测量方式：[请填写或粘贴] 请基于上述实际材料输出：预期得到瓶颈证据、影响位置、建议优先级和复测方法。能采集 trace 时可分析长任务与关键路径；工具缺失时，应明确只能完成哪些网络或源码检查，而不补写没有测得的分数。缺少依据的地方单列为待确认，不编造事实；未执行的操作或测试明确标为未执行。 验收要求： 1. 测量包含设备网络缓存与目标路由。 2. 每个结论能指向 trace 或资源证据。 3. 前后比较使用一致条件并标明波动。 验收方法 测量包含设备网络缓存与目标路由 每个结论能指向 trace 或资源证据 前后比较使用一致条件并标明波动 依赖与准备 优先使用可用浏览器性能 trace 工具；源码分析可补充但不能替代测量，工具缺失时按实际能力注明未测指标。 使用边界 没有测量就不能宣称某项指标改善或打分。 生产访问只在授权范围采样，不以测试名义压测或提交真实业务动作。 排错 评分一会高一会低：固定网络和缓存条件，多次采样并记录中位及离散范围。 只减包体仍首屏慢：查看请求发现、服务响应、图片与主线程是否仍在关键路径。 固定来源 https://github.com/cloudflare/skills/blob/6dc7604903127485e7e4cb26314651ebd4a4df19/skills/web-perf/SKILL.md