performance

Identify web performance bottlenecks and apply optimization techniques using Lighthouse metrics.

Updated May 12, 2026
One-click install
npx skills add https://github.com/YeomanYe/skills --skill performance-yeomanye
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: performance
Source: https://github.com/YeomanYe/skills/tree/main/performance
Command: npx skills add https://github.com/YeomanYe/skills --skill performance-yeomanye

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Optimize web performance for faster loading and better user experience by identifying bottlenecks and applying core optimization techniques to modern web projects.

Core Features & Use Cases

  • Performance budgeting: set and enforce budgets for total payload, JS, CSS, images, fonts, and third-party resources.
  • Rendering path optimization: improve server response times, enable compression, and adopt modern transport protocols.
  • Asset & code optimization: implement image optimization, code splitting, caching strategies, and resource loading optimizations.
  • Use Case: Imagine a site with slow LCP; this skill guides you to reduce first contentful paint and time to interactive by applying targeted optimizations and measuring with Lighthouse.

Quick Start

Apply the performance optimization workflow to your web project to reduce load times and improve Core Web Vitals.

Frequently Asked Questions about performance

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

FAQPage Schema
How do I improve web performance and Core Web Vitals for my website?

Improve web performance by identifying bottlenecks and applying optimization techniques like asset compression and caching. This process targets faster loading times and measurable Core Web Vitals improvements across desktop and mobile.

What is a performance budget and how does it optimize web loading times?

A performance budget sets strict limits on total payload size for JavaScript, CSS, images, and fonts. Enforcing these budgets prevents resource bloat and maintains faster web loading times.

How do I reduce slow LCP and optimize the critical rendering path?

Reduce slow LCP by optimizing the critical rendering path through improved server response times, code splitting, and modern transport protocols. This targeted optimization reduces first contentful paint and time to interactive.

Can I optimize image loading and implement caching strategies for any web project?

Yes, you can apply image optimization, code splitting, and caching strategies to any modern web project. These resource loading optimizations reduce payload and accelerate content delivery across desktop and mobile.

What is the best way to measure web performance improvements using Lighthouse?

Measure web performance improvements by running Lighthouse audits and tracking Web Vitals metrics. This provides quantifiable data on loading times, interactivity, and visual stability before and after applying optimizations.

Why does my web performance fail on mobile even with desktop optimizations applied?

Mobile web performance often fails due to unoptimized third-party resources and excessive JavaScript payloads. Applying strict performance budgets and targeted asset optimization ensures faster loading times across mobile networks.