What is lazy loading and why is it important?

Lazy loading defers loading of non-critical resources until they are needed. Types: Native image lazy loading: <img loading="lazy"> — browser only loads images when they are near the viewport. Supported in all modern browsers. Easy win for pages with many images. JavaScript code splitting: split bundle into chunks loaded on demand. import("./HeavyComponent") loads the chunk only when needed. React lazy: const Chart = React.lazy(() => import("./Chart")) — combine with Suspense. Intersection Observer API: manually trigger loading when an element enters the viewport (for custom lazy-loading behavior). Lazy-load third-party widgets: load chat, social buttons after the page is interactive. Important exceptions: Never lazy-load the LCP image — it must load immediately. Never lazy-load above-the-fold content. Critical CSS should never be lazy-loaded. Lazy loading reduces initial page weight and allows browsers to prioritize critical resources, significantly improving LCP and TTI (Time to Interactive).