skills.rest
FormalSnake
FormalSnakeCOMMUNITY
Explore all skills by this author →
Website𝕏@FormalSnakeGitHub

web-perf

Audit web page performance by measuring Core Web Vitals and tracing rendering and network bottlenecks.

17|1|Updated Feb 2, 2024
Search Tags:#accessibility#chrome devtools#lighthouse#web performance#network analysis#core web vitals#render blocking
One-click install
npx skills add https://github.com/FormalSnake/dotfiles --skill web-perf-formalsnake
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/FormalSnake/dotfiles/tree/main/users/kyandesutter/claude/skills/web-perf
Command: npx skills add https://github.com/FormalSnake/dotfiles --skill web-perf-formalsnake

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you diagnose why a website feels slow by measuring Core Web Vitals, tracing rendering and network bottlenecks, and surfacing accessibility gaps that can impact perceived performance.

Core Features & Use Cases

  • Core Web Vitals analysis: Evaluates LCP, INP, and CLS (plus FCP, TBT, and Speed Index) to determine whether the page is healthy or needs improvement.
  • Render-blocking and dependency tracing: Identifies CSS/JS that delays first paint and uncovers network dependency chains that stall critical resources.
  • Focused remediation planning: Prioritizes fixes with measurable impact, supports “stop and verify” workflows, and includes an accessibility snapshot to catch gaps.
  • Use case: You’re preparing a performance regression report after a release and need a prioritized list of changes with estimated impact for LCP and layout stability.

Quick Start

Run the web-perf skill to analyze a target URL’s Core Web Vitals and network/render bottlenecks using the Chrome DevTools performance trace and supporting insights.

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 like LCP and CLS for a specific URL?▼

To audit Core Web Vitals for a URL, run a Chrome DevTools performance trace to measure LCP, INP, CLS, FCP, TBT, and Speed Index, identifying rendering delays and layout shifts to determine if the page is healthy.

Why does my web page feel slow and how do I trace render-blocking resources?▼

Web pages feel slow due to render-blocking CSS/JS and network dependency chains. Inspect network requests and analyze a performance trace to identify bottlenecks delaying first paint and stalling critical resources.

Do I need Chrome DevTools to profile web performance and network inefficiencies?▼

Yes, you need the Chrome DevTools MCP tool available. Profiling web performance requires its navigation, performance trace capture, insight analysis, network request inspection, and accessibility snapshotting capabilities to measure Core Web Vitals.

What is the best way to generate a prioritized performance regression report after a release?▼

The best way is to audit the target URL for Core Web Vitals and network bottlenecks, producing a prioritized remediation list of fixes with estimated measurable impact for LCP and layout stability to include in your regression report.

Does web performance profiling also check accessibility gaps that impact perceived performance?▼

Yes, web performance profiling includes an accessibility snapshot to catch accessibility gaps that impact perceived performance, alongside measuring Core Web Vitals and tracing render-blocking dependencies.

How do I identify network dependency chains that stall critical resources during page load?▼

Inspect network requests using Chrome DevTools to uncover network dependency chains and inefficiencies. This network analysis identifies chains that stall critical resources and delay resource loading during page load.

Related Skills

Explore More Software Engineering Skills→
charl-krugercharl-kruger
5

web-perf

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

Community
Advanced
RodrigoTomeESRodrigoTomeES
12

core-web-vitals

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

Community
Advanced
warpdotdevwarpdotdev
820

web-performance-audit

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

Official
Advanced
manuelbrandner85manuelbrandner85

web-perf

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

Community
Advanced