web-performance-optimization

Start by measuring LCP, FID, and CLS with Lighthouse, then fix the largest 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 the bundle with webpack-bundle-analyzer, replace heavy dependencies like moment.js with lighter alternatives such as date-fns, and use dynamic imports for code splitting. Removing unused code and deferring third-party scripts also reduces the main bundle significantly.

Use AVIF for the best compression, WebP as a widely supported fallback, and optimized JPEG as a final fallback. Serve them with the picture element and srcset so browsers pick the best supported format and size.

High CLS usually comes from images or embeds without explicit dimensions, or dynamically injected content. Fix it by setting width and height attributes, using the CSS aspect-ratio property, and reserving space with skeleton loaders.

Yes, lazy loading above-the-fold images delays LCP. Use loading="eager" and fetchpriority="high" for hero images, and reserve lazy loading for below-the-fold content only.