optimize

Improve Core Web Vitals by targeting each metric: optimize hero images and inline critical CSS for LCP under 2.5s, break up long JavaScript tasks for INP under 200ms, and set explicit dimensions on images and embeds 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, dynamic imports for heavy components, tree shaking to remove unused code, and removing unused dependencies. Use a bundle analyzer to identify the largest contributors first.

Animations are janky when they animate layout properties like width, height, top, or left, forcing expensive reflows. Animate only transform and opacity, which are GPU-accelerated, and target 16ms per frame for smooth 60fps rendering.

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.

No, never lazy load above-the-fold content like hero images, since that delays Largest Contentful Paint. Apply lazy loading only to below-fold images, and use responsive srcset with modern formats like WebP or AVIF for all images.

Use will-change sparingly and only for known expensive animations, because each use creates a new compositor layer that consumes memory. Applying it broadly degrades performance instead of improving it.