Lazy loading: faster pages or missing content?

Key takeaways

Lazy loading tells a browser to fetch images and embeds only when the visitor is about to see them. It makes long pages arrive faster and saves visitors' mobile data. Applied carelessly, it does the opposite: the main image on the first screen is delayed, pictures pop in late as people scroll, and content can be missed. Lazy load what is below the first screen, and nothing above it.

• Lazy loading defers images and embeds until they are near the screen.
• Never lazy load the main image on the first screen.
• Reserve space for every lazy-loaded item so the page does not jump.
• Modern browsers support it natively, with no extra script.

What is lazy loading?

Lazy loading is a technique that delays the loading of images, videos and embedded content until the visitor scrolls close to them, instead of loading everything when the page opens.

A page with twenty photographs does not need all twenty before the visitor can read the headline. Loading the first one or two, and the rest on approach, lets the first screen arrive sooner. Browsers now do this themselves when an image is marked for it, so no separate script is needed.

• How website speed affects customer experience and conversions
• Optimise website images for speed and search

What does lazy loading speed up?

Lazy loading speeds up the first screen, because the browser is not competing to download images the visitor may never reach. It also cuts data use, which matters to customers on limited mobile plans, and reduces load on your server.

The gain is largest on long pages: galleries, product listings, case study pages and articles with many images. On a short page with three images, it makes little difference.

• Product page speed: fast pages without losing the detail

How does lazy loading go wrong?

Lazy loading goes wrong in four ways, each of which makes a site feel slower.

• The first-screen image is lazy loaded, so the main content arrives late.
• No space is reserved, so the page jumps as each image appears.
• Images load too late and visitors scroll past blank boxes.
• A script-based method fails, and images never appear at all.
• Content loaded only after a tap or scroll is missed by search engines.

• Why your website jumps around while it loads
• Core Web Vitals for business websites

How should it be set up?

Treat the first screen and the rest of the page differently.

• 1. Load first-screen images immediately and mark the main one as high priority.
• 2. Lazy load images and embeds below the first screen.
• 3. Set width and height on every image so space is reserved.
• 4. Use the browser's built-in lazy loading in preference to a script.
• 5. For videos and maps, show a preview and load the real thing on tap.
• 6. Check the page in a private window on a phone, scrolling at normal speed.

• Video backgrounds and autoplay: what they cost in speed

Does lazy loading hurt SEO?

Not when it is done properly. Google can see lazy-loaded images that load as they enter the visible area. Problems arise when content appears only after a click, a swipe or scrolling within a container, because the crawler does not interact with pages the way a person does.

The other search risk is self-inflicted: lazy loading the main image worsens Largest Contentful Paint, one of the Core Web Vitals. Many themes and plugins lazy load every image by default, including that one.

• Does Google index content hidden on mobile?

What does this look like in practice?

A pattern we see after a speed plugin is installed: lazy loading is switched on for every image, and the lab score improves. On a phone, the hero image now appears a beat after the text, and the page looks unfinished for the first second of every visit.

Excluding the first-screen images from lazy loading, and prioritising the main one, keeps the saving lower down and restores the opening. Global Bridge Labs (GBL) checks which image is the largest on each template before changing any setting.

• See client work
• Website Design & Development for UK businesses

Lazy loading checklist

• Identify the main first-screen image on each template.
• Confirm it is not lazy loaded.
• Confirm images below the first screen are.
• Check every image has width and height set.
• Scroll a long page on a phone and watch for blanks or jumps.
• Replace script-based lazy loading with the built-in kind.

• The website speed scorecard: score your site in an hour
• Do speed optimisation plugins work? What they fix and miss

Next step

Lazy loading is a good servant and a careless default. We will check how it is applied on your templates and correct the first screen.