chrome-performance

name: chrome-performance description: Use Chrome DevTools MCP for frontend performance work such as slow page loads, LCP, CLS, INP, Lighthouse regressions, scripting hotspots, or layout thrash. Trigger when the user asks for page speed analysis, Core Web Vitals debugging, trace-based investigation, or before-and-after performance verification.

Use this skill when performance findings need evidence from Chrome instead of code inspection alone.

Default Flow

1. Start from the exact URL and device profile that reproduces the problem.
2. Record a baseline with lighthouse_audit or performance_start_trace and performance_stop_trace.
3. Drill into the highest-signal issue first, then inspect network, DOM, or scripts only as needed.
4. After code changes, rerun the same scenario and compare the results.

Tool Selection

• lighthouse_audit for quick page-level diagnostics and report output.
• performance_start_trace and performance_stop_trace for deeper timing analysis.
• performance_analyze_insight to drill into a specific DevTools insight.
• emulate to keep device, network, CPU, and viewport conditions consistent.

Working Rules

• Keep the scenario deterministic: one URL, one interaction path, one device profile.
• Save traces and reports to files when they are large.
• Treat LCP, CLS, and INP as user-path problems; connect each finding to the specific element, request, or script that caused it.
• Avoid mixing unrelated experiments in one trace.

Expected Output

Return the problem, the evidence, the likely cause, and the concrete code area to change before proposing fixes.