web-perf

Diagnose web page performance by measuring Core Web Vitals and auditing rendering, networking, and accessibility signals.

Updated Aug 4, 2023
One-click install
npx skills add https://github.com/EmreOzdemiroglu/dotfiles --skill web-perf-emreozdemiroglu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/EmreOzdemiroglu/dotfiles/tree/main/nvim/custom_rules/web-perf
Command: npx skills add https://github.com/EmreOzdemiroglu/dotfiles --skill web-perf-emreozdemiroglu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web performance audits identify why your pages load slowly, shift layout, or miss Core Web Vitals so you can prioritize fixes with measurable impact.

Core Features & Use Cases

  • Core Web Vitals analysis: Measure and interpret FCP, LCP, TBT, CLS, and Speed Index to pinpoint where performance is lost during loading and rendering.
  • Network and dependency tracing: Detect render-blocking resources, late-discovered request chains, missing preloads, and caching weaknesses that delay critical content.
  • Accessibility snapshot: Surface high-level accessibility gaps using an A11y tree snapshot to complement performance improvements.

Quick Start

Ask the AI to run a web-perf audit for your URL and return prioritized issues and concrete recommendations based on Core Web Vitals, network analysis, and an accessibility snapshot.

Frequently Asked Questions about web-perf

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

FAQPage Schema
How do I diagnose slow web page performance and fix Core Web Vitals?

Diagnose slow web page performance by measuring Core Web Vitals like FCP, LCP, TBT, CLS, and Speed Index to pinpoint loading and rendering bottlenecks. The audit traces render-blocking resources and late network requests to prioritize fixes with measurable impact on your page speed.

How do I find render-blocking resources causing delayed loading?

Find render-blocking resources by tracing network requests and dependency chains to detect missing preloads, caching weaknesses, and late-discovered assets. This network analysis identifies critical content paths delaying your page load so you can optimize request prioritization and resource delivery.

Can I use Chrome DevTools to audit network requests and accessibility gaps?

Yes, you can use Chrome DevTools to audit network requests and generate an accessibility snapshot. This process enumerates network details to uncover dependency bottlenecks and surfaces A11y tree gaps, complementing your performance improvements with high-level accessibility checks.

What's the best way to measure layout shift and loading stability for a URL?

Measure layout shift and loading stability by running a performance profiling audit on your URL to evaluate Core Web Vitals. This traces Cumulative Layout Shift (CLS) alongside rendering and networking signals to identify why pages load slowly or shift unexpectedly during navigation.

Do I need a specific environment to run a web performance audit?

You need the Chrome DevTools MCP tool available to execute page navigation, performance tracing, insight analysis, and accessibility snapshot generation. This environment enables the automated measurement of Core Web Vitals and the enumeration of network requests required for your audit.

Why does my page have a poor LCP score even after optimizing images?

A poor Largest Contentful Paint (LCP) score can result from render-blocking resources, late-discovered request chains, or caching weaknesses delaying critical content delivery. A performance audit measures these networking and rendering signals to identify bottlenecks beyond image optimization affecting your page load.