web-perf

Audit frontend performance by measuring Core Web Vitals and render-blocking resources via Chrome DevTools MCP.

19|6|Updated Sep 13, 2025

Search Tags:#frontend #audit #lighthouse #chrome-devtools #web-performance #core-web-vitals #performance-trace

Ready to run

npx skills add https://github.com/neverinfamous/memory-journal-mcp --skill web-perf-neverinfamous

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/neverinfamous/memory-journal-mcp/tree/main/skills/web-perf
Command: npx skills add https://github.com/neverinfamous/memory-journal-mcp --skill web-perf-neverinfamous

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Optimizes frontend performance monitoring by providing structured guidance for measuring and improving Core Web Vitals, Lighthouse metrics, and render performance using a Chrome DevTools MCP server.

Core Features & Use Cases

Provides a disciplined workflow to audit page load performance, identify render-blocking resources, analyze resource timing, and surface accessibility gaps.
Guides developers on using Lighthouse-based metrics (FCP, LCP, CLS, INP, TBT, Speed Index) and network dependency analysis to drive actionable optimizations.
Use Case: When optimizing a large SPA's first meaningful paint, run automated audits to pinpoint bottlenecks and produce prioritized improvement tasks.

Quick Start

Run a performance audit on your frontend page using Chrome DevTools MCP to measure Core Web Vitals and identify render-blocking resources.

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 web app?▼

To audit Core Web Vitals for a web app, use this Skill with an attached Chrome DevTools MCP server to measure metrics like FCP, LCP, INP, TBT, CLS, and Speed Index. It analyzes page loads and identifies render-blocking resources to provide actionable optimization guidance.

What is the best way to find render-blocking resources during a performance trace?▼

Finding render-blocking resources during a performance trace is done by running automated Lighthouse audits via Chrome DevTools MCP. This Skill guides you through network dependency analysis to pinpoint bottlenecks and produce prioritized improvement tasks for your frontend.

Can I use Lighthouse metrics to optimize a large SPA's first meaningful paint?▼

Yes, you can use Lighthouse metrics to optimize a large SPA's first meaningful paint. This Skill runs automated audits to measure render performance and network dependencies, surfacing bottlenecks that delay rendering and generating actionable optimization tasks.

Does this performance audit require a Chrome DevTools MCP server?▼

Yes, this performance audit requires an attached Chrome DevTools MCP server to run. The Skill relies on this connection to measure Core Web Vitals, analyze resource timing, and surface accessibility gaps across typical user journeys.

How do I analyze network dependencies and accessibility gaps on web pages?▼

To analyze network dependencies and accessibility gaps on web pages, run this Skill's structured workflow using Chrome DevTools MCP. It evaluates resource timing and Lighthouse metrics to drive actionable optimizations across your frontend user journeys.

When should I not use automated Lighthouse metrics for frontend performance monitoring?▼

You should not rely solely on automated Lighthouse metrics when you lack a Chrome DevTools MCP server connection or need to analyze backend server response times. This Skill focuses strictly on frontend render performance, network optimization, and accessibility gap analysis.