# Performance Guide

## 1. Image Optimization
- **Formats:** Serve WebP and AVIF via picture tags. Fallback to optimized JPEG/PNG.
- **Sizing:** Generate exact srcset dimensions for Desktop (1440w), Tablet (1024w), Mobile (768w).
- **Lazy Loading:** Use native `loading="lazy"` for all images below the fold.

## 2. CSS & Fonts
- **Critical CSS:** Inline critical CSS for the above-the-fold content (Hero).
- **Font Loading:** Use `font-display: swap` for Google Fonts/Custom Fonts. Preload the primary heading font (Cormorant Garamond).

## 3. JavaScript
- **Defer:** Add `defer` attribute to all non-critical JS.
- **Code Splitting:** If using a bundler (Vite/Webpack), split vendor libraries (GSAP) from main app logic.

## 4. Hosting & Caching
- **CDN:** Serve all static assets via Cloudflare or similar CDN.
- **WP Caching:** Implement WP Rocket or Redis Object Cache to ensure TTFB (Time to First Byte) is under 200ms.

## 5. Core Web Vitals Targets
- **LCP (Largest Contentful Paint):** < 2.5s (Ensure hero image is preloaded).
- **FID/INP (Interaction to Next Paint):** < 100ms (Keep JS main thread execution minimal).
- **CLS (Cumulative Layout Shift):** < 0.1 (Always define width/height attributes on images and reserve space for async content).