skills.rest
pukpuklouis
pukpuklouisCOMMUNITY
Explore all skills by this author →
GitHub

web-perf

Analyze Core Web Vitals and render-blocking issues via Chrome DevTools MCP.

Updated Aug 27, 2026
Search Tags:#audit#profiling#analyze#Core Web Vitals#web-performance#Chrome DevTools MCP
One-click install
npx skills add https://github.com/pukpuklouis/website-blackliving-ecomm --skill web-perf-pukpuklouis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/pukpuklouis/website-blackliving-ecomm/tree/main/.opencode/skills/web-perf
Command: npx skills add https://github.com/pukpuklouis/website-blackliving-ecomm --skill web-perf-pukpuklouis

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams identify and quantify web performance issues early by leveraging the Chrome DevTools MCP stack to surface Core Web Vitals gaps and bottlenecks.

Core Features & Use Cases

  • Core Web Vitals analysis: Measure FCP, LCP, TBT, CLS, and Speed Index to prioritize optimizations.
  • Render-blocking & network insights: Detect CSS/JS blocking resources and identify critical network dependencies.
  • Audit & optimization workflows: Use in performance audits, profiling sessions, debugging tasks, and site speed optimizations.

Quick Start

Use the web-perf skill to begin a performance audit on a target URL by launching a MCP trace and then analyzing the Core Web Vitals and render/blocking/resource issues.

Frequently Asked Questions about web-perf

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

FAQPage Schema
How do I analyze Core Web Vitals to identify page load bottlenecks?▼

You can analyze Core Web Vitals by running a performance trace on a target URL to measure FCP, LCP, TBT, CLS, and Speed Index, which identifies network and render-blocking bottlenecks slowing page load speed.

What's the best way to detect render-blocking resources during a web performance audit?▼

A web performance audit detects render-blocking resources by tracing critical network dependencies and identifying CSS or JS files that block rendering, allowing you to prioritize site speed optimizations.

Do I need Chrome DevTools MCP to run Lighthouse scores and performance traces?▼

Yes, you need local MCP tooling via chrome-devtools-mcp to run performance traces and analyses, as the skill leverages this stack to surface Core Web Vitals gaps and debug page load speed.

How does profiling page load speed help debug slow network dependencies?▼

Profiling page load speed captures network dependencies and resource timing metrics, which helps debug slow requests and quantify bottlenecks that negatively impact your overall Lighthouse performance scores.

Can I use this approach to optimize Speed Index and LCP across multiple pages?▼

You can optimize Speed Index and LCP across pages by measuring these Core Web Vitals metrics during an audit, then prioritizing render-blocking and network optimizations based on the trace results.

What are the limitations of using local MCP tooling for site speed optimization?▼

The limitation of using local MCP tooling for site speed optimization is that it requires a local chrome-devtools-mcp environment setup to run performance traces, making it dependent on local configuration rather than remote testing.

Related Skills

Explore More Software Engineering Skills→
NagyViktNagyVikt
2

web-perf

Analyze web performance metrics and identify optimization opportunities via Chrome DevTools MCP.

Community
Advanced
MuhamadAnangMuhamadAnang

performance

Analyzes Lighthouse audits and implements optimizations for faster web loading and runtime efficiency.

Community
Advanced
elithrarelithrar
190

web-perf

Analyze and optimize web performance using Chrome DevTools MCP metrics.

Community
Advanced
aroidoaroido

Web Vitals Monitoring Skill

Measure Core Web Vitals and enforce performance budgets in CI/CD pipelines.

Official
Advanced