# perf-web-optimization
> Optimize web performance: Core Web Vitals (LCP, CLS, INP), bundle size, images, caching. Use when site is slow, optimizing for Lighthouse scores, reducing bundle size, fixing layout shifts, or improving Time to Interactive. Triggers on: web performance, Core Web Vitals, LCP, CLS, INP, FID, bundle size, page speed, slow site.
- Author: William R. Fernandes
- Repository: RolfLobo/agent-skills
- Version: 20260207202036
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-09
- Source: https://github.com/RolfLobo/agent-skills
- Web: https://mule.run/skillshub/@@RolfLobo/agent-skills~perf-web-optimization:20260207202036
---
---
name: perf-web-optimization
description: "Optimize web performance: Core Web Vitals (LCP, CLS, INP), bundle size, images, caching. Use when site is slow, optimizing for Lighthouse scores, reducing bundle size, fixing layout shifts, or improving Time to Interactive. Triggers on: web performance, Core Web Vitals, LCP, CLS, INP, FID, bundle size, page speed, slow site."
---
# 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
```
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:
- `moment` (67KB) → `date-fns` (12KB) or `dayjs` (2KB)
- `lodash` (72KB) → cherry-pick imports or native methods
## Code Splitting Patterns
```javascript
// React lazy
const Chart = lazy(() => import('./Chart'));
// Next.js dynamic
const Admin = dynamic(() => import('./Admin'), { ssr: false });
// Vite/Rollup manual chunks
build: {
rollupOptions: {
output: {
manualChunks: { vendor: ['react', 'react-dom'] }
}
}
}
```
## Caching Headers
```
# Static assets (immutable hash in filename)
Cache-Control: public, max-age=31536000, immutable
# HTML (revalidate)
Cache-Control: no-cache
# API responses
Cache-Control: private, max-age=0, must-revalidate
```
## Measurement
```bash
# Quick audit
npx lighthouse https://site.com --preset=perf --form-factor=mobile
```
For running audits, reading reports, and setting budgets, see **perf-lighthouse**.
## Checklist
### Images
- [ ] Modern formats (WebP/AVIF)
- [ ] Responsive `srcset`
- [ ] `width`/`height` attributes
- [ ] `loading="lazy"` below fold
- [ ] `fetchpriority="high"` on LCP image
### JavaScript
- [ ] Bundle < 200KB gzipped
- [ ] Code splitting by route
- [ ] Third-party scripts deferred
- [ ] No unused dependencies
### CSS
- [ ] Critical CSS inlined
- [ ] Non-critical CSS deferred
- [ ] No unused CSS
### Fonts
- [ ] `font-display: swap`
- [ ] Preconnect to font origin
- [ ] Subset if possible
## Detailed Examples
For in-depth optimization patterns, see:
- [references/core-web-vitals.md](references/core-web-vitals.md) - Fixing LCP, CLS, INP issues
- [references/bundle-optimization.md](references/bundle-optimization.md) - Reducing JS bundle size
- [references/image-optimization.md](references/image-optimization.md) - Image formats, responsive images, sharp scripts