Intelligent Core Web Vitals analysis with automated workflows and decision trees. Measures LCP, CLS, INP with guided debugging that automatically determines follow-up analysis based on results. Includes workflows for LCP deep dive (5 phases), CLS investigation (loading vs interaction), INP debugging (latency breakdown + attribution), and cross-skill integration with loading, interaction, and media skills. Use when the user asks about Core Web Vitals, LCP optimization, layout shifts, or interaction responsiveness. Compatible with Chrome DevTools MCP.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
JavaScript snippets for measuring web performance in Chrome DevTools.
mcp__chrome-devtools__evaluate_script and read the object it returns. The scripts have no console output, so the returned object is the result: script, status and the metric data (value, rating, details, items, issues), as described in references/schema.md.status is "tracking", the script keeps observing the page. After the interactions, call the function named in getDataFn with another mcp__chrome-devtools__evaluate_script call, for example getINP(), and read the object it returns.status is "error" or "unsupported", read error: the page may not have loaded yet, or the browser lacks the API.Without Chrome DevTools MCP, run the same snippet with the webperf-snippets CLI, which loads the page in headless Chromium and prints the same result objects: npx webperf-snippets <url> --snippet <Name> --json, where <Name> is the script name without .js. It needs Playwright and Chromium (npm install --save-dev webperf-snippets playwright, then npx playwright install chromium), and tracking snippets take --interact-script <file> to drive the interactions.
scripts/CLS.js — Cumulative layout shift (CLS)scripts/INP.js — Interaction to next paint (INP)scripts/LCP-Image-Entropy.js — LCP image entropyscripts/LCP-Subparts.js — LCP subpartsscripts/LCP-Trail.js — LCP trailscripts/LCP-Video-Candidate.js — LCP video candidatescripts/LCP.js — Largest contentful paint (LCP)When the user asks for a comprehensive Core Web Vitals analysis or "audit CWV":
When LCP is slow or the user asks "debug LCP" or "why is LCP slow":
When layout shifts are detected or the user asks "debug CLS" or "layout shift issues":
When interactions feel slow or the user asks "debug INP" or "slow interactions":
getINP() after interactions, getINPDetails() for the 15 slowest interactionsWhen LCP is a video element (detected by LCP-Video-Candidate.js):
When LCP is an image (most common case):
Use this decision tree to automatically run follow-up snippets based on results:
getINPDetails() for the 15 slowest interactions, slowest first (useful for identifying patterns across multiple slow interactions)status: "error" → Check if the page has finished loading:
status: "error" → Tell the user: "LCP data is not available yet. Please ensure the page has fully loaded, then run the analysis again."getINP() returns status: "error" → The getDataFn: "getINP" field signals the agent can retry after user interaction. Prompt the user to click, type, or scroll, then call getINP() again.Context fork note: This skill runs with
context: fork. Cross-skill triggers below are recommendations to report back to the parent agent, not direct calls this subagent can execute. When a cross-skill trigger fires, tell the user which skill and script to run next. Scripts marked (pending) are not yet available — skip them and note the limitation.
These triggers recommend using snippets from other skills:
If LCP > 2.5s and TTFB phase is dominant → Use webperf-loading skill:
If LCP image is lazy-loaded → Use webperf-loading skill:
If LCP has no fetchpriority → Use webperf-loading skill:
If CLS caused by fonts → Use webperf-loading skill:
If CLS caused by images → Use webperf-media skill:
When multiple CWV metrics are poor, prioritize investigation:
If LCP > 2.5s AND CLS > 0.1 → Likely shared root cause:
If LCP > 2.5s AND INP > 200ms → Main thread congestion:
If CLS > 0.1 AND INP > 200ms → Layout thrashing or interaction-triggered shifts:
references/snippets.md — Descriptions and thresholds for each scriptreferences/schema.md — Return value schema for interpreting script outputまだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Web performance measurement and debugging toolkit. Use when the user asks about web performance, wants to audit a page, or says "analyze performance", "debug lcp", "check ttfb", "measure core web vitals", "audit images", or similar.
日本語の概要は準備中です。原文の説明を表示しています。
Intelligent interaction performance analysis with automated workflows for INP debugging, scroll jank investigation, and main thread blocking. Includes decision trees that automatically run script attribution when long frames detected, break down input latency phases, and correlate layout shifts with interactions. Features workflows for complete interaction audit, third-party script impact analysis, and animation performance debugging. Cross-skill integration with Core Web Vitals (INP/CLS correlation) and Loading (script execution analysis). Use when the user asks about slow interactions, janky scrolling, unresponsive pages, or INP optimization. Compatible with Chrome DevTools MCP.
日本語の概要は準備中です。原文の説明を表示しています。
Intelligent loading performance analysis with automated workflows for TTFB investigation (DNS/connection/server breakdown), render-blocking detection, script performance deep dive (first vs third-party attribution), font optimization, and resource hints validation. Includes decision trees that automatically analyze TTFB sub-parts when slow, detect script loading anti-patterns (async/defer/preload conflicts), identify render-blocking resources, and validate resource hints usage. Features workflows for complete loading audit (6 phases), backend performance investigation, and priority optimization. Cross-skill integration with Core Web Vitals (LCP resource loading), Interaction (script execution blocking), and Media (lazy loading strategy). Use when the user asks about TTFB, FCP, render-blocking, slow loading, font performance, script optimization, or resource hints. Compatible with Chrome DevTools MCP.
日本語の概要は準備中です。原文の説明を表示しています。
Intelligent media optimization with automated workflows for images, videos, and SVGs. Includes decision trees that detect LCP images (triggers format/lazy-loading/priority analysis), identify layout shift risks (missing dimensions), and flag lazy loading issues (above-fold lazy or below-fold eager). Features workflows for complete media audit, LCP image investigation, video performance (poster optimization), and SVG embedded bitmap detection. Cross-skill integration with Core Web Vitals (LCP/CLS impact) and Loading (priority hints, resource preloading). Provides performance budgets and format recommendations based on content type. Use when the user asks about image optimization, LCP is an image/video, layout shifts from media, or media loading strategy. Compatible with Chrome DevTools MCP.
日本語の概要は準備中です。原文の説明を表示しています。
Intelligent network quality analysis with adaptive loading strategies. Detects connection type (2g/3g/4g), bandwidth, RTT, and save-data mode, then automatically triggers appropriate optimization workflows. Includes decision trees that recommend image compression for slow connections, critical CSS inlining for high RTT, and save-data optimizations (disable autoplay, reduce quality). Features connection-aware performance budgets (500KB for 2g, 1.5MB for 3g, 3MB for 4g+) and adaptive loading implementation guides. Cross-skill integration with Loading (TTFB impact), Media (responsive images), and Core Web Vitals (connection impact on LCP/INP). Use when the user asks about slow connections, mobile optimization, save-data support, or adaptive loading strategies. Compatible with Chrome DevTools MCP.
日本語の概要は準備中です。原文の説明を表示しています。