optimize

Improve Core Web Vitals by optimizing hero images and preloading key resources for LCP under 2.5s, breaking up long JavaScript tasks for INP under 200ms, and setting explicit image dimensions with aspect-ratio to keep CLS under 0.1. Measure with Lighthouse before and after each change.

Reduce bundle size with route-based and component-based code splitting, tree shaking to remove unused code, and dynamic imports for heavy components like lazy(() => import('./HeavyChart')). Use webpack-bundle-analyzer to identify the largest dependencies first.

Janky animations usually come from animating layout properties like width, height, top, or left, which trigger expensive reflows. Animate only transform and opacity for GPU acceleration, target 16ms per frame, and use requestAnimationFrame for JavaScript-driven animations.

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

Never lazy load above-the-fold content such as hero images, since it delays the Largest Contentful Paint and hurts perceived speed. Reserve lazy loading for below-fold images and always use responsive srcset with modern formats like WebP or AVIF.