optimize

Improve Core Web Vitals by optimizing LCP through hero image compression and critical CSS inlining, reducing INP by breaking up long JavaScript tasks, and fixing CLS by setting explicit image dimensions and aspect-ratio. Measure with Lighthouse before and after each change.

Reduce bundle size with route-based code splitting, dynamic imports for heavy components, tree shaking to remove unused code, and removing unused dependencies. Use webpack-bundle-analyzer to identify the largest contributors first.

Janky animations usually come from animating layout properties like width, height, top, or left, which trigger expensive reflows. Animate transform and opacity instead, since these are GPU-accelerated and skip layout and paint stages.

Layout thrashing happens when JavaScript alternates between reading layout properties and writing styles, forcing repeated reflows. Fix it by batching all reads first, then performing all writes together in a separate pass.

Use lazy loading for below-the-fold images so they load only when approaching the viewport, reducing initial page weight. Never lazy load above-the-fold or hero images, since that delays LCP and hurts perceived performance.