Skip to content
RankThat

Lazy loading

Lazy loading delays downloading images, videos or iframes until they're about to scroll into view, so the first screen of a page loads faster and uses less data.

A long blog post might have twenty images. Without lazy loading, the browser downloads all twenty as soon as the page opens, even though the visitor can only see one. Lazy loading tells the browser to wait and fetch each image only when the visitor scrolls close to it. The page shows up sooner and mobile visitors use less data.

All modern browsers support it natively with one attribute:

<img src="/images/pour-over-step-4.webp" width="800" height="600"
     loading="lazy" alt="Pouring water in slow circles over coffee grounds">

It works on <iframe> too, which is handy for YouTube embeds and maps. WordPress has added loading="lazy" to images automatically since version 5.5, and since 6.3 it tries to skip the first large image so it isn’t lazy-loaded.

Why it matters

Bean & Barrel Coffee’s brewing guides are long and photo-heavy. Lazy loading the step-by-step photos lets the introduction and first image appear quickly, while the rest load as people read. That’s good for visitors and for page speed scores.

The big mistake: lazy-loading the main image

The image at the top of the page is usually the Largest Contentful Paint element. If it’s lazy-loaded, the browser deliberately waits before fetching it, which makes LCP worse. Images above the fold should load normally, and the main one can be given fetchpriority="high". Many themes and plugins still apply lazy loading to every image, including heroes, logos and product photos at the top of the page.

Other pitfalls

  • Missing dimensions. Lazy images without width and height pop in and push content around, hurting Cumulative Layout Shift.
  • JavaScript-only lazy loading that puts the real image URL in a data-src attribute. If the script fails or Googlebot doesn’t trigger it, the images may not be seen or indexed. Native loading="lazy" avoids this, since Google renders pages with a tall viewport and handles native lazy loading well.
  • Lazy-loading content, not just media. Text or links that only load after scrolling may be missed by search engines.

How to check

PageSpeed Insights warns when the LCP image is lazy-loaded. View the page source and search for loading="lazy" on the first image. RankThat’s Site Audit reports slow LCP, and on WordPress the Bridge plugin can set the right priority on it as a reviewable fix. Every lazy-loaded image still needs useful alt text.

Do this month’s SEO in an afternoon.

Start free trialCheck a site free