skills.rest
nicholasgriffintn
nicholasgriffintnCOMMUNITY
Explore all skills by this author →
Website𝕏@ngriffin_ukGitHub

web-perf

Audit Core Web Vitals and blocking resources for web pages.

2|1|Updated Dec 19, 2022
Search Tags:#audit#MCP#Chrome DevTools#analyze#Core Web Vitals#web-performance
One-click install
npx skills add https://github.com/nicholasgriffintn/machine-setup --skill web-perf-nicholasgriffintn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/nicholasgriffintn/machine-setup/tree/main/ai-tooling/skills/web-perf
Command: npx skills add https://github.com/nicholasgriffintn/machine-setup --skill web-perf-nicholasgriffintn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers quickly diagnose and optimize web performance by automatically auditing Core Web Vitals, render-blocking resources, and caching issues.

Core Features & Use Cases

  • Core Web Vitals analysis, resource waterfall, and guidance for performance tuning.
  • Use Case: profiling page loads for marketing sites, SPAs, and dashboards; improving Lighthouse scores; debugging performance regressions.
  • Use Case: validating performance improvements after code changes.

Quick Start

Install and configure the MCP integration as described in the SKILL.md, then run the workflow to begin an audit of a target URL.

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 for a production web page?▼

This Skill audits Core Web Vitals by running traces through a Chrome DevTools MCP server to measure metrics and highlight render-blocking resources. It works across static sites, SPAs, and production deployments.

Can I profile slow page loads and diagnose Lighthouse score issues automatically?▼

Yes, you can profile slow page loads by running an MCP-compatible workflow that analyzes Chrome DevTools insights. It diagnoses Lighthouse score issues by highlighting caching problems and resource waterfalls.

Do I need a Chrome DevTools MCP server to analyze web performance?▼

Yes, auditing web performance requires a Chrome DevTools MCP server and an MCP-compatible workflow to run traces, analyze insights, and generate performance recommendations for the target pages.

What's the best way to validate web performance improvements after code changes?▼

The best way to validate web performance improvements is to re-run the DevTools audit workflow against the updated deployment. This compares new Core Web Vitals measurements against previous baselines to confirm fixes.

Does this web performance audit work for single page applications and static sites?▼

Yes, the web performance audit is applicable to single page applications, static sites, and production dashboards. It profiles page loads and identifies blocking resources regardless of the site architecture.

Related Skills

Explore More Software Engineering Skills→
claughinghouseclaughinghouse

web-perf

Analyze Core Web Vitals and network issues via Chrome DevTools MCP.

Community
Advanced
nicholasgriffintnnicholasgriffintn
2

web-perf

Audit Core Web Vitals and blocking resources for web pages.

Community
Advanced
reomgitreomgit

canary

Monitor post-deployment app health and trigger alerts for errors and regressions.

Community
Advanced
itdevwork-gititdevwork-git

seo-drift

Detect SEO regressions by diffing baseline page elements against current renders.

Community
Advanced