Key takeaways
- Lazy loading delays off-screen images and iframes until the user scrolls near them, saving data and speeding up the first load.
- Use the native
loading="lazy"attribute — no JavaScript library needed. - Never lazy-load the LCP/hero image; it should load immediately with
fetchpriority="high".
A long blog post might contain 20 images, but a visitor sees two or three on the first screen. Without lazy loading, the browser downloads all 20 immediately, competing with the content that matters. Lazy loading fixes that — but used wrongly, it makes your most important image slower.
Native lazy loading#
<img src="chart.webp" alt="Organic traffic growth after technical fixes" width="800" height="450" loading="lazy">
<iframe src="https://www.youtube-nocookie.com/embed/ID" title="Video title" loading="lazy"></iframe>Supported by all modern browsers. The browser decides when to load based on distance from the viewport and connection speed.
What to lazy-load — and what not to#
| Lazy-load | Load eagerly |
|---|---|
| Images further down articles | The hero / featured image at the top |
| Comment avatars, related-post thumbnails | The logo |
| YouTube and map embeds below the fold | Any image likely to be the LCP element |
| Footer images and badges | Images in the first screen of mobile layouts |
Prioritising the LCP image#
<img src="hero.webp" srcset="…" sizes="…" width="1200" height="675"
alt="…" fetchpriority="high" decoding="async">If the hero is a CSS background image, the browser discovers it late. Prefer an <img>, or preload it: <link rel="preload" as="image" href="hero.webp" fetchpriority="high">.
Need a hand with this?
Get a quick, honest review of your website’s SEO.
Avoid layout shift#
Always set width and height (or CSS aspect-ratio) so the browser reserves space before lazy images load. Otherwise, content jumps as images appear — bad for CLS.
Lazy loading other things#
- Videos: use a facade — see embedding YouTube and Maps without slowing your site.
- Background images and sections:
IntersectionObservercan add a class when a section approaches the viewport. - JavaScript modules: dynamic
import()loads code only when a feature is used. - Rendering:
content-visibility: autoskips rendering of off-screen sections.
SEO considerations#
- Native lazy loading is fully compatible with Google — images have real
srcattributes Google can see. - Old JavaScript lazy-loaders that use
data-srcwithout anoscriptfallback can hide images from crawlers. - Don’t lazy-load content that requires user interaction (clicks) to appear if you want it indexed.
Lazy loading FAQ#
Does WordPress lazy-load images by default?#
Yes, since WordPress 5.5, with smarter rules since 6.3 that skip the first images and add fetchpriority="high" to the likely LCP image.
Do I still need a lazy-loading plugin?#
Usually not for images. Plugins can still help with video facades and background images.
How do I check whether my hero image is lazy-loaded?#
Inspect the image and look for loading="lazy", or check PageSpeed Insights’ “Largest Contentful Paint image was lazily loaded” warning.