Lazy Loading Explained: Images, Videos and Iframes in WordPress (and When Not to Use It)

On this page

1. What lazy loading actually does
2. What WordPress already does for you
3. What to lazy-load
4. When NOT to lazy-load
5. Common lazy-loading mistakes
6. How to check your site
7. Does lazy loading affect SEO?

Lazy loading is one of the simplest speed techniques there is: don't load things until the visitor is about to see them. Done well, it makes long pages feel much lighter, especially on phones and mobile data. Done badly, it makes the most important part of your page appear later. Here's how it works in WordPress, what to lazy-load, and the one mistake that undoes the benefit.

What lazy loading actually does

Without lazy loading, the browser tries to download every image, map and video embed on a page as soon as it opens, even the ones at the very bottom that most visitors never scroll to. With lazy loading, those items wait. The browser loads what's on screen first and fetches the rest a little before the visitor scrolls to it.

The result:

• Less data downloaded up front, which matters on slower connections
• The browser can focus on what the visitor sees first
• Visitors who leave early never download the rest of the page

Modern browsers support this natively. A single attribute, loading="lazy", on an image or iframe tells the browser to wait. No extra JavaScript is needed.

What WordPress already does for you

WordPress has added native lazy loading automatically for several years: images in your content get the loading="lazy" attribute, and so do iframes such as YouTube and Google Maps embeds. Newer versions also try to skip lazy loading on the first large image and mark it as high priority, so the browser fetches it early.

That guesswork isn't perfect, though. Page builders, sliders, header images set by the theme and CSS background images can all confuse it. And performance plugins, themes and builders often add their own lazy-loading settings on top, so the actual behaviour on your site depends on your whole setup. It's worth checking rather than assuming.

What to lazy-load

Item	Lazy-load?	Notes
Images further down the page	Yes	Galleries, team photos, portfolio grids, blog images below the first screen
YouTube and Vimeo embeds	Yes	Even better: show a preview image and load the player only when tapped
Google Maps embeds	Yes	Maps are heavy; a static preview that loads on tap is lighter still
Social feeds, review widgets, embedded forms	Yes	Usually further down the page, and often among the heaviest items on it
Self-hosted videos	Load on demand	Use a poster image and avoid auto-playing background videos
Hero image, logo, first slide	No	These should load immediately

For videos in particular, the "click to play" approach saves far more than lazy loading alone, because the video player's scripts never load for visitors who don't press play. See video on your business website for when video is worth it at all.

When NOT to lazy-load

This is the part most sites get wrong. Anything visible on the first screen, before the visitor scrolls, should load straight away. That's called "above the fold" content.

The most important case is your LCP image. Largest Contentful Paint measures how quickly the biggest element on the first screen appears, and on most business websites that's the hero image, a banner or the first product photo. If that image is lazy-loaded, the browser deliberately waits before fetching it, and your LCP gets worse. See Core Web Vitals explained for why LCP matters.

Don't lazy-load:

• The hero or banner image at the top of the page
• The first slide of a slider (later slides can wait)
• The featured image at the top of a blog post
• The main product photo on a product page
• Your logo and anything in the header

Remember that the fold is different on phones. An image below the first screen on a laptop may be the first thing a mobile visitor sees, and most of your visitors are probably on mobile. Check both.

Common lazy-loading mistakes

• Lazy loading everything. A plugin set to lazy-load all images, with no exclusions, catches the hero image too. Most performance plugins let you exclude specific images by file name or CSS class.
• Hero images as CSS backgrounds. Browsers discover background images late, and some builders offer to lazy-load them as well. For the main hero, a normal image element that loads early is usually faster.
• Doubling up. WordPress, your theme, your page builder and a caching plugin may all try to lazy-load. Script-based lazy loading layered on top of the native version adds code and can delay images further. Pick one method.
• Missing image dimensions. If images don't have width and height set, content jumps as they appear, hurting your layout stability (CLS).
• Hiding real content. Lazy loading is for images and embeds. Text and links that only appear after a scroll or a click may be missed by visitors and search engines.

How to check your site

1. Run your homepage and a key inner page through PageSpeed Insights on mobile. It identifies your LCP element and will usually warn you if that image was lazy-loaded. See speed test tools explained for reading the report.
2. On a computer, right-click your hero image, choose "Inspect" and look at the image tag. If you see loading="lazy", it needs excluding.
3. Scroll a long page on your phone using mobile data. Images should appear as you reach them, not leave blank gaps for seconds.

Does lazy loading affect SEO?

Used properly, no. Google's own guidance treats native browser lazy loading as fine. Problems come from older script-based methods that only load images when a scroll event fires, because Google's crawler doesn't scroll like a person does. If you rely on a plugin's lazy loading, check an important page with the URL Inspection tool in Search Console and confirm the images appear in the rendered page. And keep images properly optimised in the first place; lazy loading is no substitute for compressing and resizing images.

Not sure whether lazy loading is helping or hurting your site? A WordPress speed optimisation audit checks your LCP element, lazy-loading settings and everything else that slows your pages down.