Lazy loading images and videos: how it speeds up pages

A typical interior design company’s portfolio page might hold a banner, forty project photos, an embedded YouTube walkthrough and a Google Map of the showroom at the bottom. Without any special handling, a visitor’s phone starts downloading every one of those the moment the page opens, even though most people never scroll past the first dozen photos. Lazy loading images, videos and embeds changes that. The browser fetches each item only when it is about to come into view. This article explains how that works, the simple native option, how to handle heavy iframes, and what visitors gain.

What lazy loading actually does

Normally, when the browser reads your HTML, it queues up every image and iframe it finds. Lazy loading tells it to hold off on selected resources until the visitor scrolls near them. The page’s initial download shrinks, the network is less congested for the content that matters first, and the processor has less to decode during startup.

Anything the visitor never scrolls to is never downloaded at all. On pages where many people read only the top section, that saving is substantial.

Native lazy loading with one attribute

Modern browsers support lazy loading directly through the loading attribute. Adding loading="lazy" to an img or iframe element is all it takes. No JavaScript library is required, and browsers that do not recognise the attribute simply load the item normally, so nothing breaks.

How the browser decides when to load

The browser does not wait until the image is exactly on screen. It starts fetching when the element is within a certain distance of the viewport, and Chromium-based browsers adjust that distance based on the connection speed. The aim is for images to be ready by the time the visitor scrolls to them.

Always include width and height

A lazy image has no content until it loads. If the browser does not know its size, it reserves no space, and the page jumps when the image arrives. Width and height attributes, or a CSS aspect ratio, keep the layout stable.

Which images to mark as lazy

• Gallery and portfolio images below the first screen
• Product grids beyond the first row or two
• Images inside blog posts after the introduction
• Logos of clients or partners further down the page
• Footer graphics, badges and payment icons

Images visible as soon as the page opens, particularly the main banner, should load normally. Lazy loading them slows the most important content.

Lazy loading iframes: YouTube and Google Maps

An iframe is effectively a whole web page inside your page. A standard YouTube embed loads the player’s scripts, styles and thumbnail; a Google Maps embed loads map tiles and its own JavaScript. These are often far heavier than any photo.

The same loading="lazy" attribute works on iframes in current major browsers. For a map at the bottom of a contact page or a video halfway down a service page, this single change prevents the embed from loading for visitors who never reach it.

Facades: even lighter than lazy iframes

Lazy loading only delays an embed until it is near the screen. Once it scrolls into view, the full weight still arrives, even if the visitor never presses play. A facade goes further.

How a video facade works

Instead of an iframe, the page shows a static thumbnail image with a play button drawn on top. Only when the visitor clicks does a small script swap in the real YouTube player. Open-source components exist for this, and many WordPress performance plugins offer a "replace YouTube embeds with a preview image" setting. Lighthouse even suggests facades in its "Lazy load third-party resources with facades" audit.

A map facade

For a showroom location, a simple screenshot or static map image with a "View on Google Maps" button that opens the full map, or loads the embed on click, gives visitors the same information at a fraction of the cost. Make sure your address is written in text too, so it is readable and searchable.

The trade-off

With a facade, the first click takes slightly longer while the player loads, and some autoplay-on-click behaviour may need an extra tap on certain devices. For most business pages, that small delay is well worth the saving for everyone else.

Lazy loading background videos and heavier media

Self-hosted video elements have their own controls. Setting preload="none" stops the browser downloading video data before playback, and a poster attribute shows a lightweight image in the meantime. For decorative background videos further down a page, developers commonly use a small script with the Intersection Observer API to add the video source only when the section appears.

Ask whether a background video is needed at all on mobile. A still image often communicates the same mood without consuming a visitor’s data.

What visitors and your server gain

• Less mobile data used: helpful for visitors on limited prepaid plans or weak connections.
• Faster first view: fewer competing downloads let the top of the page appear sooner.
• Less work for the phone: fewer images to decode and fewer iframe scripts to run during load.
• Lower bandwidth bills: your hosting or CDN serves fewer bytes for images nobody scrolled to.
• Better responsiveness: fewer third-party player scripts competing for the main thread.

Rolling it out on your site

1. List your longest, most image-heavy pages: galleries, category pages, blog posts, the contact page with a map.
2. Check whether your CMS already adds loading="lazy". WordPress adds it to many images and iframes by default.
3. Add the attribute to below-the-fold images and iframes that lack it, making sure width and height are present.
4. Replace YouTube and map embeds with facades where they are not the main content.
5. Scroll through each page on a phone with throttled network in Chrome DevTools to confirm images appear smoothly.
6. Compare the number of requests and total transferred size before and after in the Network tab.

Portfolio-heavy and gallery-heavy sites benefit most from this. If you are planning one, you can browse our portfolio or talk to us about building a fast, image-rich website.

Frequently asked questions

Do I need a JavaScript plugin for lazy loading?

Usually not. Native loading="lazy" covers images and iframes in current browsers. Scripts are mainly needed for special cases such as background images set in CSS or videos that should start only when visible.

Does lazy loading work for CSS background images?

The loading attribute does not apply to CSS backgrounds. Developers typically add the background class with a small Intersection Observer script when the section nears the viewport.

Will lazy loading stop Google from seeing my images?

Native lazy loading is supported by Google’s crawler, which renders pages with a modern browser. Problems arise mainly with custom scripts that only load images after user actions like scrolling or clicking.

Is lazy loading useful on short pages?

The benefit is small when almost everything is visible on the first screen. It matters most on long pages with many images or embeds further down.