performance

Improve LCP by preloading the hero image with fetchpriority="high", using modern formats like AVIF or WebP, and reducing server response time below 800ms TTFB. Target an LCP under 2.5 seconds measured with Lighthouse or CrUX data.

Reduce bundle size with route-based and component-based code splitting using dynamic imports, and tree shaking by importing only needed functions like lodash/debounce instead of the full library. Keep compressed JavaScript under 300 KB.

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

Lazy loading hurts LCP when applied to above-fold hero images. Set loading="eager" and fetchpriority="high" on the LCP image, and reserve loading="lazy" for below-fold images only.

Local Lighthouse runs use lab conditions that differ from real-user field data. Third-party scripts, uncontrolled latency, and slow networks cause gaps; measure with CrUX field data and the web-vitals library for real-user metrics.