skills.rest
avoidthekitchen
avoidthekitchenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-perf

Analyze Core Web Vitals and network traces to identify performance bottlenecks.

1|Updated Apr 13, 2026
Search Tags:#lighthouse#chrome-devtools#web-performance#core-web-vitals#trace-analysis#performance-audit
One-click install
npx skills add https://github.com/avoidthekitchen/avilingo-v2 --skill web-perf-avoidthekitchen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/avoidthekitchen/avilingo-v2/tree/main/beakspeak/.agents/skills/web-perf
Command: npx skills add https://github.com/avoidthekitchen/avilingo-v2 --skill web-perf-avoidthekitchen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagnoses page load and runtime performance problems by measuring Core Web Vitals and related metrics, locating render-blocking resources and network dependency chains, and identifying layout shifts, caching gaps, and accessibility issues so teams can prioritize impactful fixes.

Core Features & Use Cases

  • Core Web Vitals & Metrics: Measure LCP, INP, CLS and supplementary metrics like FCP, TBT and Speed Index with breakdowns for resource, render, and server contributions.
  • Trace and Network Analysis: Find render-blocking styles and scripts, long request chains, missing preloads, large payloads, and caching header issues.
  • Layout Shift & Accessibility Inspection: Pinpoint CLS culprits and capture an accessibility snapshot to surface missing ARIA, contrast issues, and focus problems.
  • Codebase Guidance: When given repo access, detect framework and bundler, identify tree-shaking and bundling issues, and recommend build and config changes.
  • Use Case Example: Audit a landing page with a slow LCP to quantify the impact of hero image loading, third-party scripts, and render-blocking CSS and deliver prioritized fixes.

Quick Start

Run a Chrome DevTools trace of the target URL, extract Core Web Vitals and network dependency information, and produce prioritized optimization recommendations.

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 find the cause of a slow LCP?▼

To audit Core Web Vitals and diagnose a slow LCP, you can run a Chrome DevTools trace on the target URL. This Skill analyzes page load behavior to quantify the impact of hero images, third-party scripts, and render-blocking CSS, delivering prioritized fixes.

Can I detect render-blocking resources and long network chains with Chrome DevTools?▼

Yes, you can detect render-blocking resources and long network chains using Chrome DevTools trace output. The Skill extracts network dependency information to locate missing preloads, large payloads, and caching header issues that delay page rendering.

What is the best way to measure INP and CLS regressions for a single-page application?▼

Measuring INP and CLS regressions for a single-page application requires runtime behavior analysis. The Skill evaluates trace insights to pinpoint interaction delays and layout shift culprits, helping you resolve runtime performance bottlenecks efficiently.

Do I need a Chrome DevTools MCP endpoint to run a performance audit?▼

Yes, you need access to a Chrome DevTools MCP endpoint or uploaded trace output to run a performance audit. The Skill requires this connection to list network requests, start traces, and extract insight sets for accurate metric breakdowns.

How does trace analysis identify layout shifts and accessibility issues?▼

Trace analysis identifies layout shifts and accessibility issues by capturing runtime snapshots. The Skill pinpoints specific CLS culprits and extracts an accessibility snapshot to surface missing ARIA roles, contrast problems, and focus management issues.

When should I not use this approach for web performance optimization?▼

You should not use this approach if you lack Chrome DevTools MCP access or cannot provide trace output. The Skill cannot analyze page load behavior or extract Core Web Vitals metrics without the ability to list network requests and start traces.

Related Skills

Explore More Software Engineering Skills→
achmfachmf

web-perf

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

Community
Advanced
jieni777jieni777
1

bundle-checker

Analyze project dependencies and build configuration to identify bundle size issues.

Community
Intermediate
duynhneduynhne

webpack-expert

Optimize Webpack configurations for faster builds and smaller bundles.

Community
Advanced
gwpjpgwpjp
3

visual-qa-lighthouse

Audit production web apps with Lighthouse CLI and generate JSON performance reports.

Community
Advanced