skills.rest
yash-garg
yash-gargCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-perf

Analyze web performance bottlenecks and identify optimization opportunities using Chrome DevTools.

Updated Jun 26, 2026
Search Tags:#chrome devtools#lighthouse#web performance#network analysis#core web vitals#frontend optimization
One-click install
npx skills add https://github.com/yash-garg/pi-config --skill web-perf-yash-garg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/yash-garg/pi-config/tree/main/skills/web-perf
Command: npx skills add https://github.com/yash-garg/pi-config --skill web-perf-yash-garg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers identify slow page loads, poor Core Web Vitals, rendering bottlenecks, network delays, and accessibility gaps that reduce website quality and user experience.

Core Features & Use Cases

  • Performance Auditing: Measures Core Web Vitals including LCP, INP, and CLS alongside supporting metrics such as FCP, TBT, and Speed Index.
  • Optimization Analysis: Detects render-blocking resources, network dependency chains, caching issues, layout shifts, and inefficient frontend configurations.
  • Use Case: A developer can use this Skill to audit a production website, diagnose Lighthouse score problems, and receive prioritized recommendations backed by DevTools measurements.

Quick Start

Ask the web-perf skill to audit the performance of a website and identify the highest-impact optimization opportunities.

Frequently Asked Questions about web-perf

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

FAQPage Schema
How do I diagnose Core Web Vitals issues like poor LCP and high INP?▼

To diagnose Core Web Vitals issues, this Skill audits LCP, INP, and CLS metrics using Chrome DevTools traces. It identifies rendering bottlenecks and network delays, then provides prioritized recommendations to improve your website's overall performance.

How do I find render-blocking resources causing slow page loads?▼

Finding render-blocking resources involves analyzing network dependency chains and frontend configurations with Chrome DevTools. This Skill detects scripts and stylesheets delaying page loads, measuring their impact on FCP and TBT to recommend specific optimization opportunities.

What is the best way to improve Lighthouse performance scores for a web application?▼

The best way to improve Lighthouse performance scores is to audit Speed Index, TBT, and Core Web Vitals measurements. This Skill analyzes production websites to detect layout shifts, caching issues, and inefficient configurations, backing recommendations with DevTools data.

Can I use Chrome DevTools to investigate layout shifts and network dependency chains?▼

Yes, you can use Chrome DevTools capabilities to investigate layout shifts and network dependency chains. This Skill requires DevTools integration to measure performance traces, inspect network behavior, and validate technical recommendations for frontend optimization.

Do I need Chrome DevTools MCP capabilities to measure performance traces?▼

Yes, you need Chrome DevTools MCP capabilities to measure performance traces and inspect network behavior. This Skill relies on DevTools integration to analyze accessibility issues, validate technical recommendations, and execute comprehensive web performance audits.

Related Skills

Explore More Software Engineering Skills→
GoBeromsuGoBeromsu
2

browser-testing-with-devtools

Inspect DOM, console, network, and performance in real browsers via Chrome DevTools MCP.

Community
Intermediate
JohnMarkCaponesJohnMarkCapones
3

web-performance-optimization

Analyze website loading speed, Core Web Vitals, and bundle size.

Community
Advanced
gaiastudio-aigaiastudio-ai
2

gaia-test-a11y

Run automated accessibility tests on deployed web applications with axe-core, pa11y, and Lighthouse.

Official
Advanced
dudedesi12dudedesi12

monitoring-sentinel

Integrate Sentry error tracking and structured logging in Next.js applications.

Community
Advanced