skills.rest
gwpjp
gwpjpCOMMUNITY
Explore all skills by this author →
GitHub

performance-auditor

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
One-click install
npx skills add https://github.com/gwpjp/Web3-Claude --skill performance-auditor-gwpjp
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
taracodlabstaracodlabs
779

open_google_chrome

Launch Google Chrome and verify it is ready for automation.

Official
Basic
JeremiahEllingtonJeremiahEllington

benchmark

Measures real-user page performance and detects regressions against a baseline.

Community
Advanced
FlorianBruniauxFlorianBruniaux
77

core-web-vitals

Identify and optimize LCP, INP, and CLS metrics in Next.js and React projects.

Community
Advanced
eric-sabeeric-sabe
1

chrome-devtools

Automate browser interactions and inspect live web pages via Chrome DevTools.

Community
Intermediate