Lazy loading

Lazy loading in plain English

Lazy loading means delaying the loading of images, videos or other content until a visitor is about to scroll to them. Modern browsers support it natively with loading="lazy". Google's lazy-loading guidance explains how to make sure lazy-loaded content can still be seen by Googlebot.

How to check lazy loading on your site

Run a page through PageSpeed Insights. It warns if the largest image is lazy-loaded. Inspect a gallery image to see whether it uses loading="lazy". Use Search Console's URL Inspection live test to confirm Google can see images and text further down the page.

A worked example

A wedding photographer's gallery page has 80 large photos. Adding native lazy loading to everything except the first image cuts the initial load dramatically. She makes sure the hero image loads immediately, so the page still appears quickly.

Where it usually goes wrong

• Lazy-loading the main banner or hero image.
• Using scripts that only load content when a user scrolls or clicks.
• Lazy-loading text that should be visible to search engines.
• Forgetting to set image dimensions, which causes layout shift.

Why a small site should care

Used well, lazy loading speeds up pages full of images, such as galleries, product listings and portfolios, because the browser doesn't download everything at once. Used badly, it can delay your main image and hurt LCP, or hide content from search engines if it relies on scrolling or clicks to load.

Many website platforms now switch lazy loading on by default, which is helpful for long pages but can catch out the first image. It's worth checking rather than assuming the default is right for your layout.

Connected technical terms

• LCP: Largest Contentful Paint: how quickly the main content of a page loads.
• Image SEO: Filenames, alt text, compression and placement for images.
• Core Web Vitals: Google user-experience metrics: LCP, INP and CLS.