web-performance-optimization

Improve Core Web Vitals by first measuring LCP, FID, and CLS with Lighthouse, then fixing the largest issues. Compress and preload hero images for LCP, code-split JavaScript for FID, and set explicit image dimensions to eliminate CLS layout shifts.

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 code splitting with dynamic imports.

AVIF offers the best compression and should be served first, with WebP as a broader-support fallback and JPEG as the final fallback. Use the picture element with multiple source tags so browsers pick the best supported format.

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

Lazy load images and components that appear below the fold or behind user interaction, using the native loading="lazy" attribute or dynamic imports. Keep above-the-fold hero images eager with fetchpriority="high" to protect LCP.