How to Implement Lazy Loading for Images and Videos

How to Implement Lazy Loading for Images and Videos: A No-Stress Guide for a Faster Website

Hey Guys! Let's talk about something you've definitely experienced but maybe never had a name for. You're browsing a website on your phone, trying to read an article, and the page keeps jumping around as pictures suddenly pop in. It's frustrating, right? Or you click a link and have to stare at a blank screen for a few seconds before anything happens.

Chances are, that website isn't using lazy loading.

But don't worry, it's not as complicated as it sounds. In fact, I'm going to walk you through exactly what it is and how you can easily add it to your own site. Think of me as your friendly guide to a faster, smoother, and happier website. Let's get your pages loading like a dream!

So, What Is Lazy Loading?

Imagine you're at one of those amazing all-you-can-eat buffets. You wouldn't grab a plate and pile every single dish onto it at once, right? Your plate would be a mess, it'd be heavy, and half the food would get cold before you even got to it.

Instead, you start with the stuff you want right now—maybe some salad and a roll. Then, when you're ready, you go back for the mac and cheese, and later, you hit the dessert station.

Lazy loading is that same smart strategy for your website.

It's a technique where your website only loads the images and videos at the moment a user is about to see them. That giant, beautiful hero image at the top of your page? It loads immediately. But that funny cat meme you placed way down at the bottom of your blog post? It won't load its data until your reader scrolls down near it.

The result? The initial page becomes lightning-fast because it has less to carry. It's a win for everyone.

Why You'll Love Using Lazy Loading: It's a Game-Changer

Okay, so it sounds cool in theory, but why should you actually spend time on this? Here are the real, tangible benefits you'll see:

Your Site Feels Instantly Faster: This is the big one. By cutting down on the initial load, your page becomes interactive almost immediately. Visitors don't wait, and that makes them happy.
You'll Keep People on Your Site Longer (Better UX): A fast, smooth site where content appears as you scroll is a joy to use. Happy visitors stick around, read more, and are more likely to come back. A jumpy, slow site makes people hit the "back" button.
You're a Bandwidth Hero: You're being kind to your users, especially those on mobile data plans. Why should their phone download a dozen high-res images they might never see? Lazy loading loads only what's necessary, saving them data and money.
Google Will Love You (SEO Boost): This is huge. Google explicitly uses page speed as a ranking factor. A faster site ranks higher. Plus, Google's "Core Web Vitals"—a set of metrics measuring user experience—are directly improved by lazy loading. Better scores = better search engine rankings. It's that simple.
Your Server Breathes Easier: By serving fewer resources on the initial hit, you put less strain on your web host. For sites with lots of traffic, this can even save you money on hosting and prevent crashes.

Let's Get Our Hands Dirty: How to Actually Do It

Alright, theory time is over. Let's look at the practical ways to add lazy loading. I'll show you three methods, from the "so-easy-it's-silly" to the "I-have-full-control" approach.

Method 1: The "Set It and Forget It" Native HTML Way

This is, by far, the easiest method and my top recommendation for most people. It uses a built-in HTML attribute called loading="lazy". Browser support is now fantastic, so you can use it with confidence.

For Images:

Let's say your normal image tag looks like this:

<img src="path/to/your-massive-image.jpg" alt="A description of the image">

To make it lazy load, just add one little attribute:

<img src="path/to/your-massive-image.jpg" alt="A description of the image" loading="lazy">

Boom. Done. The browser will now handle the rest.

For Videos (a bit different):

Videos are slightly different because we use the <video> tag with a <source> child. We need to "lazy load" the video source itself by not setting the src attribute immediately.

Instead, we put the video URL in a data-src attribute (a custom attribute we create). Then, we'll use a tiny bit of JavaScript to swap it in when needed.

Your new lazy video HTML will look like this:

<video controls width="640" poster="path/to/poster-image.jpg" class="lazy-video">
  <source data-src="path/to/your-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Notice we use data-src instead of src. The poster attribute is an image that shows as a placeholder before the video loads—highly recommended!

We'll need a tiny bit of JavaScript to make this work, which I'll show you in a moment.

Method 2: The "I Need a Fallback" JavaScript Method

Maybe you need to support older browsers, or you want more control over how the lazy loading behaves (like adding a cool fade-in effect). For that, we use a simple JavaScript solution.

Here's a friendly, basic script to get you started. We'll use the same data-src trick for both images and videos.

Step 1: Update Your HTML

Mark the images and videos you want to lazy load with a lazy class and use data-src.

For an image:

<img class="lazy" data-src="path/to/your-image.jpg" alt="A lazy loaded image">

For a video (just like before):

<video controls width="640" poster="path/to/poster.jpg" class="lazy">
  <source data-src="path/to/your-video.mp4" type="video/mp4">
</video>

Step 2: Add the JavaScript Magic

Place this script at the end of your body, or inside a DOMContentLoaded event listener.

document.addEventListener("DOMContentLoaded", function() {
  var lazyResources = [].slice.call(document.querySelectorAll("img.lazy, video.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyResourceObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let resource = entry.target;
          if (resource.tagName === 'IMG') {
            resource.src = resource.dataset.src;
          } else if (resource.tagName === 'VIDEO') {
            let source = resource.querySelector('source');
            if (source) {
              source.src = source.dataset.src;
              resource.load(); // This tells the video to reload with the new source
            }
          }
          resource.classList.remove("lazy");
          lazyResourceObserver.unobserve(resource);
        }
      });
    });

    lazyResources.forEach(function(lazyResource) {
      lazyResourceObserver.observe(lazyResource);
    });
  } else {
    // Fallback for older browsers: Just load all resources
    lazyResources.forEach(function(lazyResource) {
      if (lazyResource.tagName === 'IMG') {
        lazyResource.src = lazyResource.dataset.src;
      } else if (lazyResource.tagName === 'VIDEO') {
        let source = lazyResource.querySelector('source');
        if (source) source.src = source.dataset.src;
      }
    });
  }
});

What this script does:

It finds all elements with the class lazy.
It uses a modern browser feature called IntersectionObserver to watch these elements.
When an element scrolls into the viewport, the script swaps the data-src for the real src.
For videos, it calls .load() to make the video recognize its new source.
If the browser is old and doesn't support IntersectionObserver, it just loads everything immediately as a fallback.

Method 3: The "Plugin for the Win" Solution

If you're using a popular platform like WordPress, you might not have to write any code at all! Many performance plugins have lazy loading built-in.

WordPress: If you're using WordPress 5.5 or newer, native lazy loading for images is enabled by default! For more advanced features or for videos, plugins like WP Rocket, Perfmatters, or WP Optimize offer excellent lazy loading options that you can toggle on with a single click.
Other Platforms (Shopify, Squarespace, etc.): Check the app/store for your platform. Search for "lazy loading" or "performance" apps. Often, a simple plugin can solve the problem without you ever touching code.

Pro Tips & Best Practices: Don't Skip This Part!

Don't Lazy Load "Above the Fold": The images and videos that users see immediately upon landing on your page should load normally. If you lazy load them, they might appear with a delay, which hurts the user experience. Use loading="eager" or simply avoid the lazy class on critical hero images.
Always Use the alt Attribute: This is crucial for SEO and accessibility. It describes the image for search engines and for people using screen readers.
Set Width and Height Attributes: This prevents "Cumulative Layout Shift" (CLS)—that annoying page jump when an image loads. By telling the browser the image's dimensions upfront, it can reserve the correct space for it.
```
<img src="image.jpg" alt="..." loading="lazy" width="800" height="600">
```
Use a Poster for Lazy Videos: The poster attribute on your <video> tag is essential. It provides a preview image, so the user knows what to expect and the page layout remains stable.

Wrapping It Up: Your Site, Faster

See? Implementing lazy loading isn't some dark art reserved for senior developers. It's an accessible, powerful technique that can transform your site's performance.

To recap this Article:

Start Simple: Try the native loading="lazy" attribute on your images. It's the quickest win.
Level Up: If you need to lazy load videos or want more control, use the friendly JavaScript method I provided.
Go Plugin: If you're on a CMS, explore the plugin ecosystem to get this done in minutes.

By taking the time to implement lazy loading, you're not just optimizing code—you're respecting your visitors' time and data, pleasing Google, and building a better, faster web for everyone. Now go make your website zippy!

How to Implement Lazy Loading for Images and Videos