skills.rest
undg
undgCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-perf

Analyze Core Web Vitals and performance bottlenecks using Chrome DevTools MCP.

Updated Aug 23, 2021
Search Tags:#lighthouse#chrome-devtools#web-performance#core-web-vitals#network-analysis#render-blocking#performance-audit
One-click install
npx skills add https://github.com/undg/.dot --skill web-perf-undg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/undg/.dot/tree/main/opencode/.config/opencode/skill/web-perf
Command: npx skills add https://github.com/undg/.dot --skill web-perf-undg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Analyzes web performance using Chrome DevTools MCP to measure Core Web Vitals and surface performance bottlenecks.

Core Features & Use Cases

  • Measure Core Web Vitals (FCP, LCP, TBT, CLS, Speed Index) and provide actionable breakdowns
  • Identify render-blocking resources, network dependency chains, and layout shifts
  • Detect caching issues and accessibility gaps to improve overall site speed and UX

Quick Start

Navigate to a target URL, start a performance trace, and analyze Core Web Vitals to improve page speed.

Frequently Asked Questions about web-perf

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

FAQPage Schema
How do I measure Core Web Vitals to find web performance bottlenecks?▼

Identify web performance bottlenecks by analyzing Core Web Vitals such as FCP, LCP, TBT, CLS, and Speed Index. The audit detects render-blocking resources, network dependency chains, and layout shifts to provide actionable breakdowns for optimizing page load times.

Can I automate a web performance audit for my landing pages?▼

Automate web performance audits by navigating to target URLs and starting performance traces via Chrome DevTools. This automates measuring Core Web Vitals and surfaces caching issues and accessibility gaps to improve overall site speed and user experience.

Do I need a Chrome DevTools MCP server to analyze page load times?▼

A locally configured Chrome DevTools MCP server is required to analyze page load times. It provides the commands needed to navigate pages, start traces, and fetch insights for measuring Core Web Vitals and detecting performance bottlenecks.

What's the best way to detect render-blocking resources and network dependency chains?▼

Detect render-blocking resources and network dependency chains by running a performance trace to analyze Core Web Vitals. This audit surfaces these specific network bottlenecks alongside layout shifts to provide actionable speed optimizations.

Does this web performance audit also check for accessibility gaps?▼

The web performance audit does check for accessibility gaps alongside caching issues. Analyzing these factors together with Core Web Vitals helps improve overall site speed and user experience across landing pages, product sites, or web apps.

Related Skills

Explore More Software Engineering Skills→
claughinghouseclaughinghouse

web-perf

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

Community
Advanced
runkidsrunkids
11

core-web-vitals

Optimize LCP, INP, and CLS with prioritized remediation plans.

Community
Advanced
arroschavesarroschaves
1

web-perf

Audit web page performance and Core Web Vitals using Chrome DevTools MCP.

Community
Advanced
FabioFioritaFabioFiorita

web-perf

Analyze web page performance with Chrome DevTools MCP to measure Core Web Vitals.

Community
Advanced