performance

Improve LCP by preloading the hero image with fetchpriority="high", using modern formats like AVIF or WebP, reducing TTFB below 800ms with CDN edge caching, and sending HTTP 103 Early Hints for critical resources. Target an LCP under 2.5 seconds.

Keep compressed JavaScript under 300 KB using route-based and component-based code splitting with dynamic imports, tree shaking (import specific functions like lodash/debounce instead of the whole library), and deferring non-essential scripts with the defer or async attributes.

Use AVIF for photos where supported (92%+ browsers) with WebP as fallback and JPEG as the final fallback via the picture element. Use SVG for icons and logos, and PNG only when transparency is required in graphics.

font-display: swap prevents invisible text (FOIT) by showing fallback fonts immediately while custom fonts load, improving perceived performance. Combine it with preloading critical woff2 fonts, unicode-range subsetting, and variable fonts to reduce total font weight under 100 KB.

Slow rendering despite good TTFB usually comes from render-blocking CSS/JavaScript, layout thrashing from interleaved DOM reads and writes, unvirtualized long lists, or heavy third-party scripts. Batch DOM operations, defer scripts, and use facade patterns for embeds.

Third-party scripts remain outside your control even with async loading, lazy loading via IntersectionObserver, or facade patterns. Keep total third-party weight under 200 KB, and accept that their latency and main-thread cost can only be mitigated, not eliminated.