Lazy Loading
Quick Definition
Lazy loading is a technique that defers the loading of non-critical resources (like images and videos) until they are about to enter the user's viewport. It improves initial page load speed and reduces bandwidth consumption.
Why It Matters
Lazy loading can reduce initial page load time by 30-50% on image-heavy pages (web.dev, 2024). Instead of loading all 50 images on a page at once, it loads only the 3-4 visible in the viewport, then loads the rest as the user scrolls. This is especially impactful in India where many users browse on bandwidth-limited mobile connections.
Real-World Example
Open any Pinterest board on your phone and scroll slowly. Notice how images load just before they enter your screen, not all at once. This is lazy loading in action. It makes the initial page feel fast while still delivering all the content as you explore it.
Signal Connection
Momentum -- Lazy loading creates a consistently fast experience across your entire site, especially on content-heavy pages. This sustained speed performance builds positive engagement momentum that compounds as users browse more pages.
Pro Tip
In HTML, simply add loading='lazy' to your img tags: <img src='photo.jpg' loading='lazy'>. This native browser lazy loading works without any JavaScript library and is supported by all modern browsers. Do NOT lazy-load above-the-fold images -- those should load immediately.
Common Mistake
Lazy-loading the hero image or LCP element. The largest visible content should load immediately for a good LCP score. Only lazy-load images that are below the fold (not visible when the page first loads). Lazy-loading above-the-fold images actually hurts your Core Web Vitals.
Test Your Knowledge
Which images should NOT be lazy-loaded?
Show Answer
Answer: C. The hero image and any images visible in the initial viewport
Above-the-fold images (visible when the page first loads) should NOT be lazy-loaded because they are part of the initial user experience and often the LCP element. Lazy-loading them delays their appearance and hurts Core Web Vitals scores.