skills.rest
iadr-dev
iadr-devCOMMUNITY
Explore all skills by this author →
GitHub

web-perf

Analyze Core Web Vitals and diagnose page load bottlenecks via Chrome DevTools.

2|Updated Apr 26, 2026
Search Tags:#accessibility#lighthouse#web performance#core web vitals#lcp#cls#chromedevtools
One-click install
npx skills add https://github.com/iadr-dev/colab --skill web-perf-iadr-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/iadr-dev/colab/tree/main/skills/coding/cloudflare-skills/skills/web-perf
Command: npx skills add https://github.com/iadr-dev/colab --skill web-perf-iadr-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you identify why a page is slow or inconsistent by measuring Core Web Vitals and diagnosing the concrete resources and rendering causes behind LCP, INP, CLS, and related metrics.

Core Features & Use Cases

  • Core Web Vitals auditing: Captures and interprets LCP, INP, CLS plus supporting metrics like FCP, TBT, and Speed Index to produce a clear performance health summary.
  • Root-cause analysis via DevTools insights: Detects render-blocking resources, layout shift culprits, and network dependency chains that delay critical work.
  • Accessibility snapshot: Takes an accessibility snapshot to surface likely usability gaps alongside performance issues.
  • Use case: For example, when a landing page feels sluggish, the workflow quantifies the bottleneck (e.g., LCP render delay, late-loading scripts, or CLS caused by font/image/layout changes) and turns that into prioritized, actionable recommendations.

Quick Start

Tell the AI to audit https://example.com for Core Web Vitals using Chrome DevTools via the chrome-devtools MCP and return top prioritized issues with specific fixes.

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 and identify bottlenecks for a specific URL?▼

Auditing Core Web Vitals involves measuring LCP, INP, and CLS metrics alongside supporting data like TBT to identify concrete render-blocking resources and network dependency chains. The workflow uses Chrome DevTools trace extraction to produce prioritized findings with quantified impact estimates.

Can I diagnose layout shift culprits and render-blocking resources using Chrome DevTools?▼

Diagnosing layout shift culprits and render-blocking resources with Chrome DevTools requires trace and insight extraction to pinpoint specific elements causing CLS. This process surfaces late-loading scripts and font or image layout changes, turning them into actionable recommendations.

Does web performance auditing require the Chrome DevTools MCP tool to run?▼

Web performance auditing requires the Chrome DevTools MCP tool availability to capture traces and extract insights for Core Web Vitals measurement. Without this dependency, the workflow cannot quantify bottlenecks or produce prioritized findings with specific fixes.

What is the best way to quantify Lighthouse scoring issues and accessibility gaps?▼

The best way to quantify Lighthouse scoring issues and accessibility gaps is by capturing an accessibility snapshot alongside Core Web Vitals metrics. This approach surfaces usability gaps and renders performance bottlenecks into prioritized, actionable recommendations.

Why does my page load speed suffer from network dependency chains delaying critical work?▼

Page load speed suffers from network dependency chains when critical rendering work is delayed by sequential resource fetching. Auditing with Chrome DevTools traces identifies these specific bottlenecks and produces prioritized fixes with quantified impact estimates.

Related Skills

Explore More Software Engineering Skills→
manuelbrandner85manuelbrandner85

web-perf

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

Community
Advanced
cloudflarecloudflare
2.6k

web-perf

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

Official
Advanced
charl-krugercharl-kruger
5

web-perf

Measure Core Web Vitals and profile resource timing with Chrome DevTools MCP.

Community
Advanced
act70255act70255

performance-profiling

Profile web application performance using Lighthouse CLI and Core Web Vitals.

Community
Advanced