Lazy loading
What is lazy loading?
Lazy loading is a technique in which images, embedded videos and maps below the first screen are downloaded only when the visitor scrolls close to them. The first load gets lighter, and someone who never reaches the bottom of the page never downloads files they would not have seen. One exception matters: the image on the first screen must load straight away, or the main content appears later.
Example
A category page in an online shop shows 48 products, each with a photo of about 80 KB: 48 × 80 = 3,840 KB. On a phone the first screen holds four products. With lazy loading the browser starts with those four photos, 320 KB, plus a few just below the screen, and fetches the rest as the visitor scrolls. Someone who looks at the first two rows and opens a product never downloads the remaining 3 MB or so.
The same goes for a map embedded on the contact page or a YouTube video further down: they load when the visitor gets to them.
Why it matters for a business
Lazy loading is one of the easiest speed gains, which is why most themes and cache plugins offer it as a setting and many owners switch it on themselves. That is also where the usual mistake happens. Applied to every image, it holds back the large photo on the first screen as well: the browser only asks for it once it has worked out that the photo is visible, and largest contentful paint (LCP), the moment the main content appears, gets worse. PageSpeed Insights flags this in its LCP analysis. The second mistake is an image with no width and height set: when it arrives, everything below it jumps, and that counts as layout shift (CLS).
Lazy loading is part of mobile optimisation: on a phone with a data cap, the saving is at its largest.
What to ask
- Is lazy loading switched off for first-screen images on every template — home, category, product?
- Does the site use the browser’s built-in lazy loading (the
loading="lazy"attribute) or a script? Google recommends the attribute, or a script that loads content as it enters the screen, because Googlebot does not scroll or click. - Do all images have their dimensions set, so the page does not jump?
- Are embedded maps and videos deferred as well?
Our website speed optimisation work checks this template by template, together with the format and size of the images themselves.