skills.rest
kartikkabadi
kartikkabadiCOMMUNITY
Explore all skills by this author →
𝕏@1kartikkabadi1GitHub

web-perf

Analyze web page performance and identify Core Web Vitals bottlenecks from Chrome DevTools traces.

Updated Jul 17, 2026
Search Tags:#chrome devtools#lighthouse#web performance#core web vitals#page speed#trace analysis
One-click install
npx skills add https://github.com/kartikkabadi/skills --skill web-perf-kartikkabadi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/kartikkabadi/skills/tree/main/web-perf
Command: npx skills add https://github.com/kartikkabadi/skills --skill web-perf-kartikkabadi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you diagnose why a page feels slow by measuring real performance signals, tracing loading behavior, and identifying the exact resources or interactions hurting user experience.

Core Features & Use Cases

  • Core Web Vitals analysis: Measures LCP, INP, CLS, plus supporting metrics like FCP, TBT, and Speed Index.
  • Trace-driven debugging: Uses Chrome DevTools traces to pinpoint render-blocking resources, dependency chains, layout shifts, and document latency.
  • Network and accessibility checks: Reviews requests, caching, and basic accessibility issues so optimization advice is grounded in what the page actually does.
  • Use case: Audit a marketing homepage with poor Lighthouse scores and get a prioritized list of concrete fixes, such as deferring blocking scripts, preloading critical assets, or reducing layout shift.

Quick Start

Ask the agent to audit a specific page’s performance with Chrome DevTools and return the key metrics, bottlenecks, and prioritized fixes.

Frequently Asked Questions about web-perf

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

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

To find web performance bottlenecks, you analyze Chrome DevTools traces to measure Core Web Vitals like LCP, INP, and CLS. This process identifies render-blocking resources and layout shifts, producing a prioritized list of concrete fixes to speed up page loading.

How do I debug a poor Lighthouse score using Chrome DevTools?▼

Debug a poor Lighthouse score by running trace analysis on your web page to inspect loading behavior and request chains. This reveals specific issues like document latency or blocking scripts, allowing you to generate actionable optimization guidance for faster pages.

What causes poor LCP and how can I improve page speed?▼

Poor LCP and page speed issues are caused by render-blocking resources and heavy dependency chains. By reviewing network requests and Chrome DevTools traces, you can pinpoint exact bottlenecks and apply fixes like preloading critical assets or deferring scripts.

Can I audit site speed and accessibility issues together?▼

Yes, you can audit site speed and accessibility issues together by reviewing network requests and accessibility snapshots. This grounds the performance optimization advice in what the page actually does, ensuring both speed and basic accessibility checks are covered.

Does web performance trace analysis work on live pages and codebases?▼

Web performance trace analysis works across both live pages and codebases. By applying Chrome DevTools MCP traces and network inspection, it measures real performance signals and identifies bottlenecks regardless of whether the target is deployed or local.

What is the best way to reduce layout shift and improve CLS?▼

The best way to reduce layout shift and improve CLS is to run a trace-driven debugging session using Chrome DevTools. This identifies the exact elements causing shifts, enabling targeted fixes that stabilize the visual layout and enhance user experience.

Related Skills

Explore More Software Engineering Skills→
sanand0sanand0
11

devtools

Control Chrome via DevTools Protocol for browser testing and debugging.

Community
Advanced
RodrigoTomeESRodrigoTomeES
12

core-web-vitals

Diagnose and reduce LCP, INP, and CLS regressions in web applications.

Community
Advanced
SoborboSoborbo
4

speed-monitoring

Monitor production website performance with Core Web Vitals budgets and alerts.

Community
Advanced
TumeloRamaphosaTumeloRamaphosa

benchmark

Measure web page performance and compare results against saved baselines.

Community
Advanced