optimize

Improve Core Web Vitals by optimizing LCP with hero image compression and critical CSS inlining, reducing INP by breaking up long JavaScript tasks, and fixing CLS by setting explicit dimensions on images and reserving space for dynamic content.

Reduce bundle size with route-based and component-based code splitting, tree shaking unused code, removing unused dependencies, and lazy loading heavy components via dynamic imports like lazy(() => import('./HeavyChart')).

Modern formats like WebP and AVIF offer the best compression for web images. Combine them with responsive srcset attributes, proper sizing, lazy loading for below-fold images, and 80-85% quality compression.

Laggy animations usually animate layout properties like width, height, top, or left, which trigger expensive reflows. Animate transform and opacity instead, since these are GPU-accelerated and avoid layout recalculation.

Avoid applying will-change broadly because each use creates a new compositor layer that consumes memory. Reserve it for known expensive animations only, and remove it after the animation completes.

No, lazy loading above-fold content delays the Largest Contentful Paint and hurts perceived performance. Only lazy load below-fold images, and preload or prioritize critical hero images instead.