Agent skill · marketing growth · davila7
web-performance-optimization
Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance
Why this skill is useful
Provides specific strategies and code examples for optimizing web performance metrics that the AI wouldn't reliably generate on its own.
What it needs
About 9k tokens when loaded. Last updated 2026-08-06. 30,138 stars on the source repository.
What this skill does
Web Performance Optimization Overview Help developers optimize website and web application performance to improve user experience, SEO rankings, and conversion rates. This skill provides systematic approaches to measure, analyze, and improve loading speed, runtime performance, and Core Web Vitals metrics. When to Use This Skill Use when website or app is loading slowly Use when optimizing for Core Web Vitals (LCP, FID, CLS) Use when reducing JavaScript bundle size Use when improving Time to Interactive (TTI) Use when optimizing images and assets Use when implementing caching strategies Use when debugging performance bottlenecks Use when preparing for performance audits How It Works Step 1: Measure Current Performance I'll help you establish baseline metrics: Run Lighthouse audits Measure Core Web Vitals (LCP, FID, CLS) Check bundle sizes Analyze network waterfall Identify performance bottlenecks Step 2: Identify Issues Analyze performance problems: Large JavaScript bundles Unoptimized images Render-blocking resources Slow server response times Missing caching headers Layout shifts Long tasks blocking main thread Step 3: Prioritize Optimizations Focus on high-impact improvements: Critical rendering path optimization Code splitting and lazy loading Image optimization Caching strategies Third-party script optimization Step 4: Implement Optimizations Apply performance improvements: Optimize assets (images, fonts, CSS, JS) Implement code splitting Add caching headers Lazy load non-critical resources Optimize critical rendering path Step 5: Verify Improvements Measure impact of changes: Re-run Lighthouse audits Compare before/after metrics Monitor real user metrics (RUM) Test on different devices and networks Examples Example 1: Optimizing Core Web Vitals Example 2: Reducing JavaScript Bundle Size Example 3: Image Optimization Strategy Best Practices ✅ Do This Measure First - Always establish baseline metrics before optimizing Use Lighthouse - Run audits regularly to trac …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills davila7/web-performance-optimization