FE5: Loading less, loading later
Lazy loading below the fold
🎯You'll be able to
Lazy-load content and components that sit below the fold, without hurting the first view.
🏠The everyday picture
A long train doesn't need all its lights on in every coach at a station; lights come on as people board each coach. A long page can load its lower sections as people scroll towards them.
📘What it really is
- Above the fold: what's visible without scrolling. Load it first, with priority.
- Below the fold: load it as the person approaches.
- Images and iframes: the
loading="lazy"attribute lets the browser delay them until they're near the screen. - Sections and components: an
IntersectionObserver(or a framework helper) can render or fetch a section when it's about to appear. - Don't lazy-load the LCP element or anything in the first screen; it delays the main content (FE4).
- Give lazy-loaded items reserved space so they don't cause layout shift.
- Lazy loading saves data for people who never scroll down, which matters on metered mobile plans.
- Load slightly before the item is visible (a margin such as 200–400 px) so it's ready when the person gets there.
📝A worked example
Kirana's home page has a hero banner, then twelve category rows with 20 product images each:
| Approach | Images downloaded on first view | Data used if the visitor doesn't scroll |
|---|---|---|
| Everything at once | 241 | 3.1 MB |
| Lazy-load all below the first two rows | 41 | 0.6 MB |
The hero banner and the first two rows stay eager and prioritised; the rest load as the customer scrolls, with fixed-size placeholders.
🌍Where it's used
- Long product listings and feeds.
- Embedded videos and maps lower on a page.
- Comment sections and "related items" at the bottom of articles.
📝Case scenario
After a developer adds loading="lazy" to every image on the site "for speed", LCP on product pages gets worse. The main product photo
is now lazy-loaded. Removing the attribute from the first-screen images, and adding priority to the product photo, fixes LCP while
keeping the data savings below the fold.
🖱️Try it
Count the images your Kirana home page downloads without scrolling. Lazy-load everything below the first screen with reserved space, keep the first screen eager, and record images and data before and after.
⚠️Common mistakes
- Lazy-loading what is visible at once. Sign: the first screen arrives later. Fix: lazy-load only what starts off screen.
- No placeholder size. Sign: content jumps when lazy items load. Fix: give each placeholder its final size.
🛠️For your project
In Project 3, keep the hero and first row of deals loading early, and lazy-load the rest.
✅Quick check
Which images shouldn't be lazy-loaded?
Show the answer
The LCP image and anything visible in the first screen.
Why load lazy content slightly before it becomes visible?
Show the answer
So it's ready by the time the person scrolls to it.