web-quality-performance

Improve LCP by preloading the hero image with fetchpriority="high", using responsive AVIF or WebP formats, and reducing server TTFB below 800ms with CDN edge caching. Sending HTTP 103 Early Hints lets browsers start fetching critical resources before the full response arrives.

Reduce JavaScript bundle size with route-based and component-based code splitting using dynamic imports, and tree shaking via per-method imports like lodash/debounce instead of whole-library imports. Keep compressed JavaScript under 300 KB and defer non-essential scripts.

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 set explicit width and height attributes to prevent layout shift.

Lazy loading hurts LCP when applied to the above-fold hero image, since it delays the largest paint. Apply loading="eager" and fetchpriority="high" to the LCP image, and reserve loading="lazy" for below-fold images only.

Slow pages with fast TTFB usually suffer from render-blocking CSS, parser-blocking scripts, or heavy third-party resources. Defer non-critical CSS and scripts, use facade patterns for embeds, and keep third-party payloads under 200 KB.