SEO

Lazy Loading

Q: What is lazy loading?

Lazy loading loads images and iframes only when they scroll into the visible area — not immediately on page load. The result: a faster above-the-fold render, lower LCP and less bandwidth consumption.

Q: How do you implement lazy loading?

Natively via an HTML attribute: <img loading="lazy">. All modern browsers support it. For older browsers there are JavaScript fallbacks such as lazysizes. The Rankmio SEO audit checks the lazy loading implementation automatically.

Q: Should the hero image be lazy loaded?

No — the above-the-fold image should be loaded eagerly. Lazy loading on hero images delays LCP and harms rankings. Best practice: hero image eager, all images below the viewport lazy.

Q: Are YouTube videos lazy by default?

No — standard YouTube embeds load immediately. If you have many videos, use the facade pattern (a preview image instead of the player, with the player loading only on click). This considerably reduces LCP and third-party script load.

Also known as: Lazy load, deferred loading, native lazy loading

Lazy loading is a technique in which resources — above all images, iframes and videos — are only loaded once they are just short of the user's visible viewport area. Instead of fetching every image on the first page load, the browser only fetches those visible above the fold; the rest follow as the user scrolls. Since Chrome 76 (2019), lazy loading has been supported natively in the browser via the loading="lazy" attribute. It is one of the fastest and most effective page speed optimisations for image-rich websites.

Enabling native lazy loading

For images: <img src="..." loading="lazy" alt="...">. For iframes: <iframe src="..." loading="lazy">. Important: do NOT lazy load above-the-fold images — they should be visible immediately. Use loading="eager" or no attribute at all for hero images. Native lazy loading is supported in all modern browsers, and with Safari from version 15.4 also in the Apple ecosystem.

Lazy loading and Core Web Vitals

LCP — above-the-fold images must not be lazy loaded, otherwise the LCP score deteriorates. A classic anti-pattern: loading="lazy" set on the hero image, with LCP rising from 1.8 to 4.2 s.
CLS — images need explicit width and height attributes, otherwise layout shift occurs when they load in later.
INP — largely uncritical, since lazy loading does not affect interactivity.

Lazy loading and SEO crawling

An important question: does Googlebot recognise lazy-loaded images? Yes, since 2019. If lazy loading is implemented natively (loading="lazy") or with the Intersection Observer, Googlebot parses the images correctly. Only outdated JavaScript lazy loading solutions that load images solely on a user scroll event are problematic — these are often missed by Googlebot, because the bot does not ”scroll". Modern native lazy loading is therefore the clean standard.

Example from practice

Example: A magazine domain had 80 articles per page with 12 images each, all eager-loaded. Initial page load: 8.2 MB of data, LCP 4.8 s. Implementation: hero image eager, all other images loading="lazy", plus explicit width/height attributes to avoid CLS. Effect: initial page load down to 1.4 MB, LCP down to 1.9 s, CLS down to 0.03. During a long reading session images load in later and total traffic remains the same — but perceived performance is dramatically better. A classic quick win.

Frequently asked questions

What is lazy loading?

Lazy loading loads images and iframes only when they scroll into the visible area — not immediately on page load. The result: a faster above-the-fold render, lower LCP and less bandwidth consumption.

How do you implement lazy loading?

Natively via an HTML attribute: <img loading="lazy">. All modern browsers support it. For older browsers there are JavaScript fallbacks such as lazysizes. The Rankmio SEO audit checks the lazy loading implementation automatically.

Should the hero image be lazy loaded?

No — the above-the-fold image should be loaded eagerly. Lazy loading on hero images delays LCP and harms rankings. Best practice: hero image eager, all images below the viewport lazy.

Are YouTube videos lazy by default?

No — standard YouTube embeds load immediately. If you have many videos, use the facade pattern (a preview image instead of the player, with the player loading only on click). This considerably reduces LCP and third-party script load.

Used in Rankmio for

Page speed audit in the SEO check

Go to the feature →

Last updated: 2026-06-17 · Browse all glossary entries