skills.rest
ylxai
ylxaiCOMMUNITY
Explore all skills by this author →
GitHub

web-perf

Analyze web page performance metrics using Chrome DevTools Metrics Collector Protocol.

2|Updated Apr 9, 2026
Search Tags:#performance optimization#web performance#Lighthouse#DevTools#Core Web Vitals
One-click install
npx skills add https://github.com/ylxai/hafiportrait-saas --skill web-perf-ylxai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/ylxai/hafiportrait-saas/tree/main/.kiro/skills/web-perf
Command: npx skills add https://github.com/ylxai/hafiportrait-saas --skill web-perf-ylxai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires chrome-devtools-mcp@latest, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill identifies and suggests optimizations for web performance, improving metrics like LCP, FCP, and CLS, and helping with caching and accessibility issues.

Core Features & Use Cases

  • Performance Audit: Analyzes page load performance with Chrome DevTools, checking for Core Web Vitals, network dependencies, and more.
  • Optimization Recommendations: Suggests actionable steps to enhance web performance and accessibility.
  • Use Case: If your site loads slowly or you're getting poor performance scores, this Skill can help identify issues and suggest solutions.

Quick Start

Use the web-perf skill to audit the performance of your web page.

Frequently Asked Questions about web-perf

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

FAQPage Schema
How do I analyze web performance metrics like LCP and CLS for my site?▼

Run a web performance audit using Chrome DevTools to analyze Core Web Vitals like LCP, FCP, and CLS. It identifies render-blocking resources and network dependencies to provide actionable optimization recommendations.

What is the best way to find render-blocking resources causing slow page load?▼

Analyze page load performance using Chrome DevTools to detect render-blocking resources and network dependencies. This audit provides actionable optimization recommendations to enhance overall web performance.

Do I need a configured Chrome DevTools MCP server to check Core Web Vitals?▼

Yes, checking Core Web Vitals requires a configured local chrome-devtools MCP server and Chrome DevTools access. This environment setup enables the Metrics Collector Protocol to gather performance data and identify accessibility issues.

Can I get optimization recommendations for web performance and accessibility issues?▼

Yes, auditing web performance with Chrome DevTools provides optimization recommendations for both page load metrics and accessibility issues. It suggests actionable steps to enhance Core Web Vitals and resolve network dependencies.

Why does my site get poor performance scores in Lighthouse?▼

Poor Lighthouse performance scores often stem from render-blocking resources and network dependencies. Analyzing page load performance with Chrome DevTools identifies these issues and suggests optimizations to improve Core Web Vitals.

What are the limitations of using Chrome DevTools for performance optimization?▼

Using Chrome DevTools for performance optimization requires a configured local MCP server and browser access. It identifies metrics and suggests improvements rather than automatically applying the code fixes to your web pages.

Related Skills

Explore More Software Engineering Skills→
sluongngsluongng
6

chrome-devtools

Attach to a live Chrome session via the Chrome DevTools MCP server.

Community
Intermediate
nicholasgriffintnnicholasgriffintn
2

web-perf

Audit Core Web Vitals and blocking resources for web pages.

Community
Advanced
clearclownclearclown
3

memory

Synchronize session state and save or restore checkpoints.

Community
Intermediate
manuelbrandner85manuelbrandner85

web-perf

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

Community
Advanced