web-performance-optimization

Improve Core Web Vitals by optimizing LCP with compressed hero images and preloading, reducing FID through code splitting and deferring non-critical JavaScript, and fixing CLS by specifying image dimensions and reserving space for dynamic content.

Reduce bundle size by analyzing composition with webpack-bundle-analyzer, replacing heavy dependencies like moment.js with date-fns, importing lodash functions selectively, enabling tree shaking, and implementing route-based code splitting.

Use AVIF for the best compression, WebP as a widely supported modern format, and optimized JPEG as a fallback. Serve them with the picture element and srcset for responsive delivery across devices.

Lazy loading below-the-fold images improves performance, but never lazy load above-the-fold hero images since it delays LCP. Use loading="eager" and fetchpriority="high" for critical images instead.

Mobile devices have slower CPUs and networks, so JavaScript execution and large assets hurt more. Test with Chrome DevTools throttling or Lighthouse with cpuSlowdownMultiplier, and reduce main thread work and bundle sizes.

High CLS is caused by images without dimensions, dynamically injected content, and late-loading fonts. Fix it by setting width and height attributes, using the aspect-ratio CSS property, and reserving space with skeleton loaders.