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 so browsers fetch critical resources before the full response arrives.

Reduce bundle size with route-based and component-based code splitting using dynamic imports, tree shaking by importing specific functions instead of entire libraries, and keeping compressed JavaScript under 300 KB per the performance budget.

Use AVIF for photos with the best compression at 92%+ browser support, WebP as a widely supported fallback at 97%+, PNG for graphics needing transparency, and SVG for icons and logos. Serve them with the picture element and responsive srcset.

Yes, font-display: swap shows fallback system fonts immediately while the custom font loads, preventing FOIT. Combine it with preloading critical woff2 fonts, unicode-range subsetting, and variable fonts to reduce total font weight under 100 KB.

Slow rendering despite fast TTFB usually comes from render-blocking CSS, parser-blocking scripts, layout thrashing, or heavy third-party scripts. Defer non-critical CSS and JavaScript, batch DOM reads and writes, and load third-party widgets with facades or IntersectionObserver.

Lazy loading below-fold images saves bandwidth, but applying it to the LCP image delays discovery and hurts the LCP score. Above-fold images should use loading="eager" with fetchpriority="high" and explicit width and height attributes.