web-performance-optimization

Improve Core Web Vitals by targeting each metric: optimize hero images and preload critical resources for LCP, reduce JavaScript bundle size and defer non-critical scripts for FID, and set explicit width/height on images to prevent CLS. Measure with Lighthouse before and after each change.

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

Use AVIF for the best compression, WebP as a widely supported fallback, and optimized JPEG as a final fallback via the picture element. Combine with responsive srcset images, explicit dimensions, and lazy loading for below-the-fold content.

Mobile slowness typically comes from slower CPUs and networks that amplify JavaScript execution and download costs. Test with Chrome DevTools throttling or Lighthouse with CPU slowdown, reduce main-thread work, and optimize for 3G/4G network conditions.

Do not lazy load above-the-fold critical resources such as hero images or essential scripts, as this delays LCP and harms perceived performance. Use eager loading with fetchpriority="high" for critical assets and reserve lazy loading for non-critical content.