skills.rest
oscartejera
oscartejeraCOMMUNITY
Explore all skills by this author →
GitHub

web-perf

Analyze web page performance with Chrome DevTools MCP to measure Core Web Vitals.

Updated Aug 23, 2026
Search Tags:#debugging#accessibility#optimization#lighthouse#web performance#core web vitals
One-click install
npx skills add https://github.com/oscartejera/josephine-app --skill web-perf-oscartejera
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/oscartejera/josephine-app/tree/main/.agents/skills/web-perf
Command: npx skills add https://github.com/oscartejera/josephine-app --skill web-perf-oscartejera

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill diagnoses and resolves issues that slow down web pages, ensuring a faster and smoother user experience.

Core Features & Use Cases

  • Core Web Vitals Analysis: Measures and identifies bottlenecks for LCP, CLS, TBT, and more.
  • Network Optimization: Detects render-blocking resources, network chains, and caching problems.
  • Accessibility Audits: Flags high-level accessibility gaps like contrast issues and missing ARIA attributes.
  • Use Case: Audit a given URL to identify why its Lighthouse score is low and provide actionable steps to improve page load times and user engagement.

Quick Start

Audit the web performance of the URL '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 audit Core Web Vitals to find what is slowing down my web page?▼

You can identify render-blocking resources and network dependency chains by profiling the URL with Chrome DevTools. This Skill measures Core Web Vitals like LCP and CLS to pinpoint exactly which assets delay page load performance.

Why does my Lighthouse performance score drop, and how do I debug layout shifts?▼

Lighthouse scores drop due to render-blocking resources, caching issues, and layout shifts. This Skill profiles the web page to detect these specific Core Web Vitals bottlenecks and provides actionable steps to improve page load times.

Can I check website accessibility gaps like contrast and missing ARIA attributes during a performance audit?▼

Yes, you can check website accessibility gaps during a performance audit. This Skill flags high-level accessibility issues like missing ARIA attributes and contrast problems alongside identifying Core Web Vitals bottlenecks and network optimization issues.

What is the best way to profile page load speed and identify network caching issues?▼

The best way to profile page load speed is using Chrome DevTools to analyze network dependency chains. This Skill detects caching problems and render-blocking resources to provide actionable steps for optimizing web performance and site speed.

Do I need Chrome DevTools installed to measure Core Web Vitals and debug page load performance?▼

Yes, Chrome DevTools is required to measure Core Web Vitals and debug page load performance. This Skill leverages Chrome DevTools MCP to profile URLs, identify network dependency chains, and detect caching issues affecting your Lighthouse scores.

Related Skills

Explore More Software Engineering Skills→
eric-sabeeric-sabe
1

chrome-devtools

Automate browser interactions and inspect live web pages via Chrome DevTools.

Community
Intermediate
yonetim258852yonetim258852

performance-and-web-vitals

Audit web apps with Lighthouse to detect and fix Core Web Vitals issues.

Community
Intermediate
AGMO-IncAGMO-Inc
4

accessibility

Detect WCAG accessibility issues in React/HTML/CSS via static review.

Official
Intermediate
Oscar-Ivan-SalasOscar-Ivan-Salas

performance-profiling

Profile web application performance with Lighthouse and DevTools workflows.

Community
Advanced