Lazy Loading Images and Videos the Right Way (Without Hurting Your Speed Score)

Lazy loading means delaying the download of images, videos and embeds until the visitor scrolls near them. On long pages with many images, it can cut initial load time and data usage significantly. But it's often done wrong, especially by lazy loading the main image at the top, which makes the page feel slower.

How it works

Modern browsers support native lazy loading with a single attribute:

<img src="team.webp" alt="Our team" width="800" height="533" loading="lazy">
<iframe src="https://www.google.com/maps/embed?..." loading="lazy"></iframe>

The browser fetches the image only when it's close to entering the screen. No JavaScript library is needed for standard cases.

What to lazy load

• Images below the first screen (gallery, team photos, blog images lower down)
• Embedded Google Maps
• YouTube and other video embeds
• Social media embeds
• Logos and icons in the footer

What NOT to lazy load

• The hero image or main banner at the top of the page
• The logo in the header
• Any image visible without scrolling on common screen sizes

Lazy loading these delays your Largest Contentful Paint (LCP), one of Google's Core Web Vitals. For the main hero image, do the opposite: load it early.

<img src="hero.webp" alt="..." width="1200" height="600" fetchpriority="high">

Always set width and height

Without dimensions, the page jumps as images load: text moves down and buttons shift. This hurts Cumulative Layout Shift (CLS) and frustrates users. Setting width and height (or a CSS aspect-ratio) lets the browser reserve space.

Videos: use a facade

A single YouTube embed can load a lot of data and scripts before anyone presses play. Instead, show a thumbnail image with a play button (a "facade") and load the real player only on click. This is one of the biggest speed wins for pages with videos.

For background videos in heroes, consider whether you need them at all on mobile. A still image is often better for speed and data costs.

Background images in CSS

Native lazy loading doesn't apply to CSS background images. Options: - Use an <img> element with object-fit: cover instead - Apply the background class only when the section is near the viewport using IntersectionObserver

Sliders and carousels

Only the first slide should load immediately. Lazy load the remaining slides. Better still, question whether you need a slider. Many sites perform better with one strong static hero. See micro-interactions and animations.

WordPress

WordPress adds loading="lazy" to images automatically and tries to skip the first image. Caching plugins (like LiteSpeed Cache) offer additional lazy loading options for iframes and backgrounds. Check that your hero image isn't being lazy-loaded by a plugin setting.

How to check

1. Run PageSpeed Insights
2. Look for "Largest Contentful Paint image was lazily loaded". If it appears, remove lazy loading from that image
3. Look for "Defer offscreen images". If it appears, add lazy loading to those images
4. Check CLS for layout shifts from images without dimensions

Combine with image optimisation

Lazy loading reduces when images load; optimisation reduces how much they weigh. Use both: resize, compress, convert to WebP, and use srcset for different screen sizes. See image optimisation guide.

Speed optimisation is part of every Joboo Web maintenance plan. Ask us to check your site.