Store slow on phones: videos you can’t see are still downloading

01Why hidden videos still download

On this Shopify Community thread (Jan 2024), a merchant’s video banners were slow to appear on every page; the reply suggested a poster image. A poster covers the wait, but it doesn’t make the download any smaller. Three things make a page heavier than it looks:

1. 01

   Autoplay outranks preload

   MDN: “The autoplay attribute has precedence over preload. If autoplay is specified, the browser would obviously need to start downloading the video for playback” (MDN, video). Background videos are almost always autoplaying, muted and looped, so preload="none" on its own doesn’t hold them back.

2. 02

   Hiding a video doesn’t stop it

   Themes often draw one video for desktop and another for phones, and hide the one that doesn’t fit with CSS. On the stores we measured, the hidden copy downloaded as well. A menu panel that’s closed but still laid out on the page (some themes hide panels without display: none) downloads its video on every page view.

3. 03

   The setting says Image, the code says video

   A section with a “Media type” choice should stop drawing the video when you pick Image. If its code only checks whether a video file is attached, the image shows and the video downloads behind it. That’s why switching a section to an image can make no difference to speed.

What Shopify does about it today

Shopify’s video_tag filter now adds loading="lazy" itself when you don’t pass a loading value, “for videos in sections further down the page” (Shopify, video_tag). MDN says a lazy video “will not start downloading and autoplaying until the element is near or within the viewport”. That helps, with two limits:

• Browser support is narrow. As of October 2026, Can I use lists loading="lazy" on video in Chrome and Edge from version 148, and not at all in Safari, on a Mac or an iPhone, or in Firefox (Can I use). On an iPhone, those videos download as they did before.
• It only covers videos further down the page. A hidden desktop copy of the hero, or a video in the header’s menu, is at the top.

02Weigh the page, then hold back each video

For store owners: weigh a page on a phone

1. 1

   Open the page with Chrome’s developer tools

   In Chrome on a computer, open your homepage, then View > Developer > Developer Tools and the Network tab.

2. 2

   Load it as a phone

   Click the device icon to show the page at phone size, tick Disable cache, set the throttling menu to Fast 4G, and reload. The bar at the bottom shows how much was transferred.

3. 3

   Look for video

   Filter the list by Media. Without scrolling or opening anything, you should see no .mp4 you can’t see on screen. Repeat on a busy product page.

4. 4

   Switch a section to Image and weigh it again

   If the page gets no lighter, the section is still loading the video behind the image. Send this page to your developer.

For developers: no source until it’s seen

Draw the video with its source held back, and attach it when the video comes into view. A copy hidden with display: none never comes into view, so it never loads. This is the shape of what we shipped, generalised:

{%- liquid
  assign mp4 = video.sources | where: 'format', 'mp4' | sort: 'height' | last
-%}
<video
  data-lazy-video
  muted loop playsinline
  preload="none"
  {% if video.preview_image %}
    poster="{{ video.preview_image | image_url: width: 1200 }}"
    width="{{ video.preview_image.width }}"
    height="{{ video.preview_image.height }}"
  {% endif %}
>
  <source data-src="{{ mp4.url }}" type="video/mp4">
</video>

const observer = new IntersectionObserver((entries) => {
  entries.forEach(({ target: video, isIntersecting }) => {
    if (isIntersecting) {
      const source = video.querySelector('source[data-src]');
      if (source) {
        source.src = source.dataset.src;
        source.removeAttribute('data-src');
        video.load();
      }
      video.play().catch(() => {});
    } else if (!video.paused) {
      video.pause();
    }
  });
}, { rootMargin: '200px 0px' });

document.querySelectorAll('video[data-lazy-video]').forEach((video) => observer.observe(video));

• For a small thumbnail, take the smallest encoding instead: sort: 'height' | first.
• A video inside a menu or a pop-up: don’t observe it. Attach its source in the code that opens the panel. A closed panel that still has a size on the page can count as in view.
• Honour the editor’s choice. Draw the video only when it’s chosen, for example {% if section.settings.video != blank and section.settings.media_type != 'image' %}, using your section’s own setting names.
• Above the fold, show the video’s first frame as an image with fetchpriority="high" and let the video take over once it plays. Shopify’s performance team describes the same pattern, using each video’s preview_image (Shopify Performance, Feb 2026).
• If desktop and phone use different files, one video with a media query on each source fetches only the one that fits, in place of two videos and CSS. The same Shopify post does this, with media="(max-width: 749px)" on the phone source and media="(min-width: 750px)" on the desktop one.
• With JavaScript off, the poster stays, which is a fair fallback for a background video.

03Weigh it again, then scroll

1. 1

   Weigh the page again

   Same steps as above. On load, the only videos in the Media list should be ones on screen.

2. 2

   Scroll, and open the menu

   Each video should start as it comes into view, and its .mp4 should appear in the list only then.

3. 3

   Test in Safari

   The fix shouldn’t depend on anything Safari ignores. On an iPhone, the page should look the same as before, with the videos playing as you reach them.