SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场webperf-core-web-vitals

webperf-core-web-vitals

前端与建站

查看项目

更新于 10-15 15:25

技能介绍

WebPerf: Core Web Vitals 是一套用于在 Chrome DevTools 中测量网页性能的 JavaScript 代码片段集合，主要围绕核心网页指标（Core Web Vitals）展开。它通过 mcp__chrome-devtools__evaluate_script 执行脚本，并使用 mcp__chrome-devtools__get_console_message 捕获输出。

用途

该技能用于测量和分析网页的核心性能指标，包括 LCP（最大内容绘制）、CLS（累积布局偏移）和 INP（交互到下一次绘制）。它提供自动化工作流和决策树，能够根据测量结果自动推荐后续诊断步骤，帮助开发者定位性能问题。

主要能力

技能包含以下脚本：

  • scripts/CLS.js — 累积布局偏移（CLS）
  • scripts/INP.js — 交互到下一次绘制（INP）
  • scripts/LCP-Image-Entropy.js — LCP 图像熵
  • scripts/LCP-Subparts.js — LCP 子部分
  • scripts/LCP-Trail.js — LCP 轨迹
  • scripts/LCP-Video-Candidate.js — LCP 视频候选
  • scripts/LCP.js — 最大内容绘制（LCP）

使用方式

技能提供多种常见工作流：

完整核心网页指标审计

当用户要求全面的核心网页指标分析或“审计 CWV”时，依次运行 LCP.js、CLS.js、INP.js、LCP-Subparts.js、LCP-Trail.js。

LCP 深入分析

当 LCP 缓慢或用户要求“调试 LCP”或“为什么 LCP 慢”时，运行 LCP.js 建立基线，LCP-Subparts.js 拆解 TTFB、资源加载、渲染延迟，LCP-Trail.js 识别所有 LCP 候选和变化，LCP-Image-Entropy.js 检查图像视觉复杂度问题，LCP-Video-Candidate.js 检测 LCP 是否为视频。

CLS 调查

当检测到布局偏移或用户要求“调试 CLS”或“布局偏移问题”时，运行 CLS.js 测量整体 CLS 分数，并交叉引用 webperf-loading 技能中的 Find-Above-The-Fold-Lazy-Loaded-Images.js 和 Fonts-Preloaded-Loaded-and-used-above-the-fold.js。

INP 调试

当交互感觉缓慢或用户要求“调试 INP”或“慢交互”时，运行 INP.js 测量整体 INP 值，在交互后调用 getINP()，使用 getINPDetails() 获取完整列表。

视频作为 LCP 的调查

当 LCP 是视频元素时，运行 LCP-Video-Candidate.js 识别视频作为 LCP 候选，并参考 Media 技能的 Video-Element-Audit.js 审计视频加载策略，LCP-Subparts.js 分析视频加载阶段。

图像作为 LCP 的调查

当 LCP 是图像时，运行 LCP.js 测量 LCP 时间，LCP-Subparts.js 拆解时间阶段，LCP-Image-Entropy.js 分析图像复杂度，并交叉引用 webperf-media 和 webperf-loading 技能中的相关脚本。

决策树

技能包含详细的决策树，根据脚本结果自动运行后续片段：

  • 在 LCP.js 之后：如果 LCP > 2.5s，运行 LCP-Subparts.js；如果 LCP > 4.0s，运行完整 LCP 深入分析工作流；如果 LCP 候选是图像，运行 LCP-Image-Entropy.js 和 webperf-media:Image-Element-Audit.js；如果 LCP 候选是视频，运行 LCP-Video-Candidate.js 和 webperf-media:Video-Element-Audit.js；始终运行 LCP-Trail.js。
  • 在 LCP-Subparts.js 之后：如果 TTFB 阶段 > 600ms，切换到 webperf-loading 技能并运行 TTFB-Sub-Parts.js；如果资源加载时间 > 1500ms，运行 webperf-loading 中的相关脚本；如果渲染延迟 > 200ms，运行 webperf-loading 和 webperf-interaction 中的相关脚本。
  • 在 LCP-Trail.js 之后：如果 LCP 候选变化多（>3），调查 webperf-loading 中的相关脚本和 CLS.js；如果最终 LCP 候选出现晚，运行 webperf-loading:Resource-Hints-Validation.js；如果早期候选被替换，理解初始内容被推下的原因。
  • 在 LCP-Image-Entropy.js 之后：如果熵很高，推荐现代格式（WebP、AVIF）、适当压缩、占位符策略；如果熵低，图像可能过度优化或类似占位符；如果检测到大文件，运行 webperf-media:Image-Element-Audit.js。
  • 在 LCP-Video-Candidate.js 之后：如果视频是 LCP，运行 webperf-media:Video-Element-Audit.js、webperf-loading:Priority-Hints-Audit.js、LCP-Subparts.js；如果海报图像是 LCP，按图像 LCP 处理。
  • 在 CLS.js 之后：如果 CLS > 0.1，运行 webperf-interaction:Layout-Shift-Loading-and-Interaction.js（待定）；如果 CLS > 0.25，运行全面偏移调查；如果 CLS = 0，多次加载页面确认。
  • 在 INP.js 之后：如果 INP > 200ms，运行 webperf-interaction:Interactions.js；如果 INP > 500ms，运行完整 INP 调试工作流；如果特定交互类型慢，聚焦分析该类型；收集 INP 数据后调用 getINPDetails()。

错误恢复

如果脚本返回 status: "error"，检查页面是否加载完成：如果加载早期，等待并重新运行；如果是 SPA，用户可能需要先导航到目标路由。如果 LCP.js / LCP-Subparts.js 返回错误，告知用户 LCP 数据尚不可用，确保页面完全加载后重试。如果 INP.js getINP() 返回错误，提示用户点击、输入或滚动，然后再次调用 getINP()。

跨技能触发

该技能在 context: fork 下运行，跨技能触发是向父代理报告的建议，而非直接调用。当触发时，告知用户下一步运行哪个技能和脚本。标记为（待定）的脚本尚不可用，跳过并注明限制。

多指标关联

当多个 CWV 指标较差时，优先调查：如果 LCP > 2.5s 且 CLS > 0.1，可能共享根本原因；如果 LCP > 2.5s 且 INP > 200ms，主线程拥塞；如果 CLS > 0.1 且 INP > 200ms，布局抖动或交互触发的偏移。

参考

  • references/snippets.md — 每个脚本的描述和阈值
  • references/schema.md — 解释脚本输出的返回值模式

适用场景

适用于前端性能优化、网页性能审计、核心网页指标调试等场景，特别适合需要深入分析 LCP、CLS、INP 的开发者。

限制

部分脚本标记为（待定），尚未可用。跨技能触发需要父代理协调。脚本依赖 Chrome DevTools 环境。