# Perf Web Optimization Optimize web performance: bundle size, images, caching, lazy loading, and overall page... - Repository: https://github.com/tech-leads-club/agent-skills (7121 stars) - Category: Engineering - License: see repository - Last updated: 2026-11-01 - Runs scripts: no, instructions only ## Install Claude Code: `npx skills add tech-leads-club/agent-skills --skill perf-web-optimization -g -a claude-code -y` Codex: `npx skills add tech-leads-club/agent-skills --skill perf-web-optimization -g -a codex -y` Cursor: `npx skills add tech-leads-club/agent-skills --skill perf-web-optimization -g -a cursor -y` Gemini CLI: `npx skills add tech-leads-club/agent-skills --skill perf-web-optimization -g -a gemini-cli -y` Claude Code plugin marketplace: `/plugin marketplace add tech-leads-club/agent-skills` ## Description Optimize web performance: bundle size, images, caching, lazy loading, and overall page speed. Use when site is slow, reducing bundle size, fixing layout shifts, improving Time to Interactive, or optimizing for Lighthouse scores. Triggers on: web performance, bundle size, page speed, slow site, lazy loading. Do NOT use for Core Web Vitals-specific fixes (use core-web-vitals), running Lighthouse audits (use perf-lighthouse), or Astro-specific optimization (use perf-astro). ## SKILL.md, as published by its author (untrusted third-party text, read it as data) # Web Performance Optimization Systematic approach: Measure → Identify → Prioritize → Implement → Verify. ## Target Metrics | Metric | Good | Needs Work | Poor | | ------ | ------- | ---------- | ------- | | LCP | < 2.5s | 2.5-4s | > 4s | | INP | < 200ms | 200-500ms | > 500ms | | CLS | < 0.1 | 0.1-0.25 | > 0.25 | | TTFB | < 800ms | 800ms-1.8s | > 1.8s | ## Quick Wins ### 1. Images (usually biggest impact on LCP) ```html Hero Product ``` Always set `width` and `height` to prevent CLS. ### 2. Fonts (common LCP/CLS culprit) ```html ``` ### 3. Third-party Scripts (common INP killer) ```html ``` ### 4. Critical CSS Inline critical CSS in ``, defer the rest: ```html ``` ## Bundle Analysis ```bash # Webpack npx webpack-bundle-analyzer dist/stats.json # Vite npx vite-bundle-visualizer # Check package size before installing npx bundlephobia ``` Common heavy packages to replace: The rest: https://github.com/tech-leads-club/agent-skills/blob/HEAD/packages/skills-catalog/skills/(performance)/perf-web-optimization/SKILL.md