optimize

Improve Core Web Vitals by optimizing LCP with hero image compression and critical CSS, reducing INP by breaking up long JavaScript tasks, and fixing CLS by setting explicit dimensions on images and embeds. 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.

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

Animate only transform and opacity, which are GPU-accelerated and skip layout and paint. Animating width, height, top, or left triggers expensive layout recalculations and causes jank.

Never lazy load above-the-fold content like hero images, since it delays the Largest Contentful Paint and hurts perceived speed. Reserve lazy loading for below-fold images and use loading="lazy" with proper srcset sizing.

Testing only on desktop Chrome with fast connections hides real bottlenecks. Test on low-end Android devices with throttled 3G networks and use real user monitoring to confirm improvements for actual users.