web-performance-optimization

Start by measuring LCP, FID, and CLS with Lighthouse, then fix the biggest issues first. Common fixes include optimizing hero images with modern formats, code splitting large JavaScript bundles, and setting explicit width and height on images to prevent layout shifts.

Analyze your bundle with webpack-bundle-analyzer, replace heavy dependencies like moment with date-fns, import only needed lodash functions, and use next/dynamic for lazy loading components. Enabling tree shaking and removing dead code can cut bundle size by over 50 percent.

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

Mobile devices have slower CPUs and networks, so JavaScript execution and large assets hurt more. Test with Chrome DevTools throttling or Lighthouse CPU slowdown, reduce main thread work, and optimize for 3G and 4G network conditions.

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