optimize

Improve Core Web Vitals by optimizing hero images and preloading resources for LCP, breaking up long JavaScript tasks for FID/INP, and setting explicit dimensions on images to prevent CLS. Measure with Lighthouse or Chrome UX Report before and after each change.

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

Janky animations usually come from animating layout properties like width, height, top, or left, which trigger reflows. Animate transform and opacity instead, since they are GPU-accelerated, and target 16ms per frame for 60fps.

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.

Do not lazy load above-the-fold images, especially the LCP element, since delaying them hurts perceived load speed. Reserve lazy loading for below-fold images and use responsive srcset with modern formats like WebP or AVIF.