web-perf

Analyze Core Web Vitals and trace insights from Chrome DevTools performance recordings.

1|Updated Apr 6, 2025
One-click install
npx skills add https://github.com/david-driscoll/stargate-command-cluster --skill web-perf-david-driscoll
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/david-driscoll/stargate-command-cluster/tree/main/.agents/skills/web-perf
Command: npx skills add https://github.com/david-driscoll/stargate-command-cluster --skill web-perf-david-driscoll

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you diagnose why a page loads slowly or feels unstable by measuring Core Web Vitals and pinpointing the specific resources and behaviors behind poor scores.

Core Features & Use Cases

  • Core Web Vitals scoring: Analyzes LCP, INP, and CLS (plus supporting metrics like FCP, TBT, and Speed Index) to determine performance health against common thresholds.
  • Root-cause detection: Identifies render-blocking resources, network dependency chains, render delays, and layout shift culprits tied to specific requests or elements.
  • Accessibility snapshot: Captures an accessibility tree snapshot to surface high-level gaps such as missing accessible names and focus issues.
  • Use case: Run it when you want to investigate regressions after a deploy, optimize an important landing page, or validate whether changes improved Lighthouse-style performance outcomes.

Quick Start

Provide the URL of the page you want to audit, then request a full web performance analysis that includes Core Web Vitals, network/root-cause findings, and an accessibility snapshot.

Frequently Asked Questions about web-perf

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit Core Web Vitals and find the root cause of slow page speed?

You can audit Core Web Vitals by measuring LCP, INP, and CLS metrics alongside network traces to pinpoint render-blocking resources and layout shift culprits. This requires capturing Chrome DevTools performance tracing to identify specific elements causing poor Lighthouse scores.

What is causing my Largest Contentful Paint regression after a deploy?

LCP regressions are typically caused by render-blocking resources, slow network dependency chains, or delayed rendering of the primary page element. Analyzing the LCPBreakdown trace helps identify the specific network requests delaying your page's largest visual element.

How do I investigate Cumulative Layout Shift culprits on a production web page?

Investigate CLS culprits by capturing a performance trace during page rendering to identify the specific DOM elements shifting during load. Layout shift analysis isolates unstable elements, allowing you to target page optimization efforts toward fixing those specific render behaviors.

Can I capture an accessibility snapshot alongside a web performance trace?

Yes, you can capture an accessibility snapshot alongside web performance tracing. It generates an accessibility tree to surface high-level gaps like missing accessible names and focus issues, allowing you to validate both page speed and accessibility health during the same audit.

Does this page optimization audit work without Chrome DevTools performance tracing?

No, this page optimization audit requires Chrome DevTools performance tracing and insight extraction. It relies on DevTools data to enumerate network requests, analyze LCPBreakdown, and identify render-blocking resources to measure Core Web Vitals accurately.