Videos are an awesome tool for telling your brand story and increasing engagement — but they’re also a heavy load on performance. Today we’re going to show you how to make your site faster by using Deferred Video Loading — and we’ve got some updates that reflect 2025’s best practices.

What is Deferred Video Loading?

Deferred Video Loading is a technique that delays loading video files until they’re needed. Instead of loading every embedded video during the initial page load, we load a thumbnail preview and defer the heavy resources until the user clicks play. This dramatically improves page speed, user experience, and Core Web Vitals — all while still providing rich content.

2025 Best Practices for Video Optimization

1. Use Native Lazy Loading for <iframe>

Modern browsers like Chrome, Firefox, and Safari now support the loading="lazy" attribute for iframes. That means you can lazy-load YouTube embeds natively, with no JavaScript required:

<iframe
  loading="lazy"
  width="560"
  height="315"
  src="<https://www.youtube.com/embed/your-video-id>"
  frameborder="0"
  allowfullscreen>
</iframe>

2. Use Intersection Observer for Fine Control

If you want more control — like swapping in the video only when it scrolls into view — use the Intersection Observer API. Here’s a simple example in vanilla JavaScript:

document.addEventListener("DOMContentLoaded", function () {
  const videos = document.querySelectorAll(".lazy-video");

  const observer = new IntersectionObserver((entries, obs) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const iframe = document.createElement("iframe");
        iframe.src = entry.target.dataset.src;
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("allowfullscreen", "");
        entry.target.innerHTML = "";
        entry.target.appendChild(iframe);
        obs.unobserve(entry.target);
      }
    });
  });

  videos.forEach(video => observer.observe(video));
});

And in your HTML:

<div class="lazy-video" data-src="<https://www.youtube.com/embed/your-video-id>">
  <img src="your-thumbnail.jpg" alt="Video Thumbnail" />
  <button>Play</button>
</div>

3. Don’t Lazy Load Above-the-Fold Videos

This is a big one: if your video is at the top of the page, don’t defer it. Above-the-fold content should be prioritized for immediate loading. Lazy loading it can cause layout shifts and lower your Largest Contentful Paint (LCP) score, which is a major performance signal for SEO. A good rule: Defer below-the-fold videos, but load top-of-page videos immediately if they’re essential.

Shopify-Specific Deferred Video Loading

If you’re using Shopify, the original method still works great and is included below, but we recommend using the native or Intersection Observer methods when possible for simplicity and performance.

TL;DR – Which Method Should You Use?

• Native Lazy Loading (loading="lazy") – Best for quick wins.
• Intersection Observer – Best for full control and custom behavior.
• Custom wrapper approach – Still works, but more code-heavy.

Want help implementing any of these? Check out our optimization services and let our Shopify experts handle it for you. Got questions or want to share your results? Drop a comment below!