web-perf

Measure Core Web Vitals and timing metrics to diagnose web performance bottlenecks.

Updated Apr 18, 2026
One-click install
npx skills add https://github.com/rattamnoon/our-third-story --skill web-perf-rattamnoon
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/rattamnoon/our-third-story/tree/main/.agents/skills/web-perf
Command: npx skills add https://github.com/rattamnoon/our-third-story --skill web-perf-rattamnoon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web performance analysis and optimization for websites and web apps, measuring Core Web Vitals and related timing metrics to identify bottlenecks and performance regressions.

Core Features & Use Cases

  • Core Web Vitals analysis for LCP, INP, CLS, FCP, TBT, Speed Index
  • Identify render-blocking resources and network dependency chains
  • Cache and accessibility gap detection
  • Guidance and actionable recommendations aligned with current documentation

Quick Start

Audit a target page to identify Core Web Vitals bottlenecks and render-blocking resources, then apply optimizations.

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 to diagnose website performance bottlenecks?

You can audit Core Web Vitals by measuring LCP, INP, CLS, and FCP timing metrics to diagnose web performance bottlenecks. This identifies render-blocking resources, network dependency chains, and caching gaps to provide actionable optimization recommendations.

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

Identifying render-blocking resources during a web performance audit requires analyzing network dependency chains and timing metrics. By profiling these dependencies, you can pinpoint scripts and stylesheets delaying initial page render and apply targeted optimizations.

Why does my web app have a high Total Blocking Time and layout shifts?

A high Total Blocking Time and layout shifts occur when main thread tasks delay interactivity and visual elements move during loading. Profiling these web performance metrics helps detect network dependencies and rendering gaps causing the regressions.

Can I use Chrome DevTools metrics to find caching gaps and accessibility issues?

Yes, utilizing Chrome DevTools and MCP tooling allows you to retrieve up-to-date thresholds and measure timing metrics. This combination detects caching gaps and accessibility issues while prioritizing current documentation over pre-trained knowledge for accurate audits.

Do I need specific dependencies to measure Speed Index and optimize Core Web Vitals end-to-end?

No specific dependencies are required to measure Speed Index and optimize Core Web Vitals end-to-end. The analysis utilizes MCP tooling to retrieve current thresholds and diagnose bottlenecks like render-blocking resources and network dependencies directly.