🎨 Frontend Development — Performance Optimization Guide Demo

• Open Chrome DevTools → Lighthouse → Run Performance audit
• Note your LCP, CLS, INP scores
• Identify the LCP element and any layout shift sources
• Check [PageSpeed Insights](https://pagespeed.web.dev/) for CrUX data (real user metrics from Chrome)
• Set up RUM using `examples/measurement/rum-setup-guide.md`

Performance problem detected
│
├── Slow initial load (high LCP)?
│   ├── Large images? → guides/lcp-optimization.md (image section)
│   ├── Slow server? → guides/lcp-optimization.md (TTFB section)
│   ├── Large JS bundle? → scripts/bundle-analyzer.js + code-splitting examples
│   ├── Render-blocking CSS? → guides/lcp-optimization.md (CSS section)
│   └── Slow font loading? → guides/lcp-optimization.md (font section)
│
├── Content jumping around (high CLS)?
│   ├── Images without dimensions? → guides/cls-optimization.md (images)
│   ├── Ads or embeds? → guides/cls-optimization.md (ads section)
│   ├── Font swap causing shift? → guides/cls-optimization.md (fonts)
│   └── Dynamic content injection? → guides/cls-optimization.md (dynamic)
│
├── Slow to respond to clicks (high INP)?
│   ├── Long JavaScript tasks? → guides/inp-optimization.md (long tasks)
│   ├── Heavy event handlers? → guides/inp-optimization.md (processing)
│   ├── Large DOM? → guides/inp-optimization.md (rendering)
│   └── Third-party scripts? → guides/inp-optimization.md (third-party)
│
├── Large bundle size?
│   ├── Run analysis → node scripts/bundle-analyzer.js stats.json
│   ├── Heavy dependencies? → Check recommendations for lighter alternatives
│   ├── No code splitting? → examples/code-splitting/lazy-loading-patterns.jsx
│   └── Unused code? → Enable tree-shaking in your bundler
│
└── Poor caching?
    ├── No Cache-Control headers? → examples/caching/cache-headers-reference.md
    └── No offline support? → examples/caching/service-worker.js