The Art of Doing Nothing (Until Needed)
Lazy loading is the single most effective technique for improving Core Web Vitals, specifically LCP (Largest Contentful Paint). By deferring off-screen assets, you prioritize the viewport for the user, making your site feel instant.
Native Lazy Loading
Modern browsers now support the loading='lazy' attribute on standard <img> tags. This is the zero-JavaScript way to improve performance. However, for background images or complex components, native support falls short.
Intersection Observer API
Before Intersection Observer, we relied on messy scroll event listeners that fired on every pixel change, causing jank. The Intersection Observer API allows you to register a callback that fires *only* when an element enters the viewport. This is CPU-efficient and perfect for implementation infinite scrolling or lazy-rendered widgets.
React Suspense & Code Splitting
In the React ecosystem, lazy loading isn't just for images; it's for code. Using React.lazy() and Suspense, you can split your massive JavaScript bundle into smaller chunks. The user only downloads the code for the 'Settings' page when they actually click 'Settings'.
Common Pitfalls
Don't lazy load everything. Your 'Hero' image (the big banner at the top) should *never* be lazy loaded, or you will hurt your LCP score. Always eager-load the above-the-fold content.