Lazy loading

Without lazy loading, a browser downloads every image on a page as soon as the page opens, including photos far down that many visitors never reach. Lazy loading tells the browser to fetch those later, when they come close to the screen. It is a simple and effective way to make long pages, galleries and blogs lighter, and it is built into modern browsers.

Lazy loading is about timing, not size. It does not make an image smaller; that is the job of image compression and formats such as WebP. The two work together: compress every image, then delay the ones that are not needed straight away.

How it works

For images and embedded frames, developers add a loading attribute set to lazy in the HTML. The browser then holds back those files and downloads each one when the visitor scrolls near it, using its own judgement about how far ahead to start so images are usually ready by the time they appear. Older approaches used JavaScript to do the same thing, and some sites still do.

Two details decide whether lazy loading helps or hurts. First, images at the top of the page should not be lazy-loaded. The main image in the first screen is often what Google measures as Largest Contentful Paint, one of the Core Web Vitals, and delaying it makes that score worse. Second, every image needs its width and height set, so the browser reserves the right space before the image arrives and the text does not jump when it loads.

The same idea applies beyond images. Embedded videos, maps and chat widgets can be replaced with a lightweight preview that loads the real thing only when someone clicks, which often saves far more than lazy-loading photos.

Example

A restaurant's menu page shows sixty dish photos. Without lazy loading, a phone downloads all sixty before the page settles, which on mobile data is slow and costly for the visitor. With lazy loading, only the photos in the first screen are fetched at first, and the rest load as the visitor scrolls.

A plugin had also applied lazy loading to the large hero photo at the top, so the first thing visitors saw was a blank space. Removing lazy loading from that one image, and giving it priority, makes the page look complete sooner. The embedded map at the bottom is replaced with a static map image that loads the interactive version when tapped. The page now asks for far less data on arrival, and the photos further down still appear before the visitor reaches them in normal scrolling.

Why it matters for your business

Lazy loading is close to free: it is a single attribute, and most modern CMS platforms add it automatically. It helps most on image-heavy pages, such as portfolios, menus, product listings and galleries, and on visitors' phones with limited data. It does little for a short page with two images. You can check it yourself with Google PageSpeed Insights, which flags images that should be deferred and warns when the main image was lazy-loaded by mistake. Running the test on the mobile setting gives the most realistic picture.

Common mistakes

• Lazy-loading the main image at the top of the page and delaying the first thing visitors see.
• Leaving out image width and height, so the layout jumps as each picture arrives.
• Using lazy loading as an excuse not to compress or resize oversized images.
• Lazy-loading content that search engines need through a script that only reacts to real scrolling.

Questions people ask

Does lazy loading affect SEO?

Done properly, it helps, because pages load faster and Core Web Vitals improve. Google supports the native loading attribute. Problems arise when the main image is lazy-loaded, delaying Largest Contentful Paint, or when content only loads through scripts that crawlers do not trigger.

Does WordPress lazy-load images automatically?

Yes, WordPress adds the native lazy-loading attribute to images by default and tries to leave out the first large image on the page. Themes and plugins can change this behaviour, so it is worth checking that the main image at the top is not being delayed.

Should every image be lazy-loaded?

No. Images visible as soon as the page opens, especially the main hero or product image, should load immediately. Lazy loading is for images and embeds further down the page that the visitor reaches only by scrolling.