performance-auditor

Name: performance-auditor
Availability: InStock
Author: gwpjp

Measure navigation timings, core web vitals, and network usage in Chrome.

3|Updated Jan 31, 2026

Search Tags:#performance #frontend #auditing #measurement #web-vitals #network-analysis

Ready to run

npx skills add https://github.com/gwpjp/Web3-Claude --skill performance-auditor-gwpjp

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: performance-auditor
Source: https://github.com/gwpjp/Web3-Claude/tree/main/.claude/skills/performance-auditor
Command: npx skills add https://github.com/gwpjp/Web3-Claude --skill performance-auditor-gwpjp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps frontend teams quantify page load times, rendering performance, and network efficiency to identify bottlenecks and regressions.

Core Features & Use Cases

Page Load Timing: measure navigation timings, time to interactive, and first contentful paint using the Performance API.
Core Web Vitals Monitoring: monitor LCP, CLS, and FID across routes with lightweight observers.
Network & Resource Analysis: analyze requests, payload sizes, and resource timings to optimize performance.
Use Case: after adding a feature or refactor, run automated audits to compare performance across pages and configurations.

Quick Start

Ensure the app is loaded in a Chrome tab (dev server running) and run the performance-auditor workflow to collect timing, CWV, and network profiles.

Frequently Asked Questions about performance-auditor

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

FAQPage Schema

How do I measure frontend performance and Core Web Vitals on SPA routes?▼

To measure frontend performance on SPA routes, this Skill collects navigation timings, Core Web Vitals like LCP, CLS, and FID, and network resource profiles using browser timing APIs and lightweight observers.

What is the best way to audit frontend performance regressions after a feature release?▼

Auditing frontend performance regressions involves running an automated workflow to compare page load times and rendering delays across pages after adding a feature or refactoring code.

How does network analysis help identify slow page loads in web applications?▼

Network analysis identifies slow page loads by analyzing request payload sizes and resource timings to pinpoint heavy network usage and optimize overall web application performance.

Do I need a running dev server to collect navigation timings and rendering metrics?▼

Yes, you need the web application loaded in a Chrome tab with the dev server running to execute the workflow and collect navigation timings, Core Web Vitals, and network profiles.

What browser timing APIs are used to measure time to interactive and first contentful paint?▼

The Performance API is used to measure time to interactive and first contentful paint, alongside lightweight observers that monitor Core Web Vitals across application routes.

When should I not use a performance auditing workflow for frontend bottlenecks?▼

Performance auditing workflows are designed for feature development and regression checks on loaded web pages, not for backend profiling or measuring server-side rendering delays outside the browser.