skills.rest
STier-Ai
STier-AiOFFICIAL
Explore all skills by this author →
GitHub

web-perf

Measure web page performance metrics using Chrome DevTools MCP.

5|Updated Mar 9, 2026
Search Tags:#performance optimization#web performance#Chrome DevTools#Core Web Vitals#web audit
One-click install
npx skills add https://github.com/STier-Ai/stier --skill web-perf-stier-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/STier-Ai/stier/tree/main/.claude/skills/web-perf
Command: npx skills add https://github.com/STier-Ai/stier --skill web-perf-stier-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill analyzes web page performance using Chrome DevTools MCP, providing insights into Core Web Vitals and other critical performance metrics.

Core Features & Use Cases

  • Performance Analysis: Measure Core Web Vitals (FCP, LCP, TBT, CLS, Speed Index) and other performance metrics.
  • Network Optimization: Identify render-blocking resources, network dependency chains, and caching issues.
  • Accessibility Check: Evaluate layout shifts, caching issues, and accessibility gaps.
  • Use Case: Use this Skill to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed.

Quick Start

Use the web-perf skill to audit the performance of the page 'https://example.com'.

Frequently Asked Questions about web-perf

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

FAQPage Schema
How do I measure Core Web Vitals and analyze web page performance using Chrome DevTools?▼

To measure Core Web Vitals and analyze web performance, this Skill uses a configured Chrome DevTools MCP environment to profile metrics like FCP, LCP, TBT, CLS, and Speed Index. It evaluates network dependencies and CPU usage to provide actionable optimization insights.

What is the best way to audit render-blocking resources and network dependency chains on my website?▼

Auditing render-blocking resources and network dependency chains is handled by analyzing web performance via Chrome DevTools. The Skill identifies resource bottlenecks, evaluates caching issues, and highlights dependencies that delay page rendering.

Can I use Chrome DevTools Memory and CPU Profiler to debug website load times?▼

Yes, you can debug website load times using the Chrome DevTools Memory and CPU Profiler. This Skill leverages that environment to profile page load behavior, identify performance bottlenecks, and measure Core Web Vitals metrics for optimization.

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

Yes, you need a configured Chrome DevTools MCP environment to run this web performance audit. The Skill relies on this specific setup to access Memory and CPU Profiler data, measure Core Web Vitals, and generate performance insights.

How does evaluating layout shifts help with web performance optimization?▼

Evaluating layout shifts helps web performance optimization by measuring Cumulative Layout Shift (CLS), a key Core Web Vitals metric. This Skill identifies accessibility gaps and layout instability issues that negatively impact user experience and page speed.

Related Skills

Explore More Software Engineering Skills→
BorisserzBorisserz
1

browser-testing-with-devtools

Inspect DOM, console, network, and performance data via Chrome DevTools MCP.

Community
Intermediate
tech-leads-clubtech-leads-club
5.0k

perf-web-optimization

Audit Core Web Vitals and implement image, caching, and code-splitting fixes.

Official
Advanced
doanchienthangdevdoanchienthangdev
4

profiling-performance

Run Lighthouse audits and analyze Core Web Vitals for browser performance.

Community
Intermediate
daveiodaveio

web-perf

Measure Core Web Vitals and detect render-blocking resources with Chrome DevTools MCP.

Community
Intermediate