skills.rest
Rayzerrek
RayzerrekCOMMUNITY
Explore all skills by this author →
GitHub

web-perf

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

Updated Jan 30, 2026
Search Tags:#accessibility#chrome devtools#lighthouse#web performance#network analysis#core web vitals#performance tracing
One-click install
npx skills add https://github.com/Rayzerrek/dotfiles --skill web-perf-rayzerrek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/Rayzerrek/dotfiles/tree/main/.agents/skills/web-perf
Command: npx skills add https://github.com/Rayzerrek/dotfiles --skill web-perf-rayzerrek

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps diagnose why a website feels slow, scores poorly in Lighthouse, or suffers from unstable layout and interaction delays, so you can move from vague speed complaints to concrete, evidence-based fixes.

Core Features & Use Cases

  • Core Web Vitals analysis: Measures LCP, INP, CLS, plus supporting metrics like FCP, TBT, and Speed Index.
  • Trace and network inspection: Finds render-blocking resources, dependency chains, caching weaknesses, and oversized assets.
  • Accessibility snapshotting: Surfaces missing names, focus problems, and common contrast or ARIA issues that affect real users.
  • Use case: Audit a product landing page, identify the exact elements delaying first paint and largest contentful paint, then prioritize the highest-impact remediation steps.

Quick Start

Ask the web performance skill to audit a target page, trace its load behavior, and return the top bottlenecks with 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 diagnose the causes of poor Core Web Vitals and slow page loads?▼

To diagnose poor Core Web Vitals, you analyze web page performance using trace-based evidence and network analysis. This process identifies the exact elements delaying metrics like LCP, INP, and CLS, pinpointing render-blocking resources and unstable rendering.

What is the best way to find render-blocking resources during a web performance audit?▼

Finding render-blocking resources requires trace and network inspection to analyze dependency chains and caching weaknesses. This inspection reveals oversized assets and request bottlenecks, providing concrete evidence to prioritize fixes for slow loading pages.

Can I use Chrome DevTools to trace LCP delays and identify oversized network requests?▼

Yes, Chrome DevTools is required for performance tracing and request inspection. It enables you to capture network requests, inspect load behavior, and identify the dependency chains causing LCP delays and slow first paint on landing pages.

Does web performance tracing also check for accessibility issues like missing ARIA attributes?▼

Performance tracing can include accessibility snapshotting to surface common issues. This checks for missing names, focus problems, and ARIA or contrast issues that affect real users, ensuring your web app meets accessibility standards alongside speed.

How do I interpret a Lighthouse report to fix high Total Blocking Time?▼

Interpreting a Lighthouse report involves analyzing supporting metrics like Total Blocking Time and Speed Index. You trace the load behavior to find the specific long tasks causing interaction delays, then apply retrieval-first guidance for current metric thresholds.

Related Skills

Explore More Software Engineering Skills→
CygnusfearCygnusfear
5

chrome-devtools

Control Chrome DevTools Protocol to automate browser interactions and capture console, network, and screenshots.

Community
Advanced
JohnMarkCaponesJohnMarkCapones
3

web-performance-optimization

Analyze website loading speed, Core Web Vitals, and bundle size.

Community
Advanced
gensart-projsgensart-projs

performance-profiling

Measure Lighthouse scores and core web vitals to identify performance bottlenecks.

Community
Intermediate
jaimedhenriquesjaimedhenriques

chrome-devtools

Control live Chrome sessions to navigate pages, inspect state, and analyze network traffic.

Community
Advanced