HighSpeedMeasured

Phones download more video than they show

On a phone’s first visit the page downloads more video than the phone shows: a video hidden on phones, videos far down the page, or a file far wider than its box. Those megabytes compete with the first screen for the connection.

Checked on: every page the audit scans except the cart · Zolvio’s check: “Phones download more video than they show”

Why it costs you sales

Many themes show a video on computers and hide it on phones, or start every video on a page as soon as it loads. A video hidden on a phone can still download there, and so can videos far down the page the shopper hasn’t scrolled to, or a video file far wider than the phone shows it.

On a phone connection those megabytes load alongside the first screen’s images and scripts, so what the shopper came to see arrives later, and on mobile data they pay for video they never watch.

How Zolvio detects it

Zolvio measures up to 3 pages whose code has a video that starts loading on its own (autoplay, or preload="auto"), the homepage first; the cart isn’t measured. Each page loads on its own in Chrome at phone size, as on an Android phone, with the browser’s cache off, as on a first visit. Zolvio counts the bytes of video the page downloads until 6 seconds after it loads, before any scroll, then widens the page to 1,440 pixels to see which videos show on a computer. Safari on iPhones isn’t measured.

A video counts when the theme hides it on phones but not on computers and the phone downloaded 500 KB or more of it; when it sits 2 or more phone screens down and such videos together downloaded 3 MB or more; or when it shows, but its file is more than 4 times wider than the phone shows it and 2 MB or more of it downloaded. A hidden video’s file doesn’t count when a video the phone lays out plays the same file, nor a far-down video’s when a video in the first screens plays it, and two videos playing one file count once.

Videos far down a page aren’t judged when the audit’s browser couldn’t lay the page out as shoppers see it: when the page requests files from public code libraries (such as jsDelivr, unpkg, cdnjs, or jQuery’s and Bootstrap’s sites), which the audit’s browser doesn’t load, or when an A/B-testing app kept the page hidden. The finding lists each video (up to six), why it counts and how many MB the phone downloaded for it, and reports how much video the phone downloaded in all before any scroll, and from how many videos (each file counted once, shown or not).

This is a direct measurement, so it’s reported on every plan, including Free and audits with AI turned off. With AI review on, the AI agent also checks it against the audit’s evidence before it reaches your issue list.

How to fix it

  1. In the theme editor, open the section with the video (often the homepage’s first section) and use its mobile video or mobile image setting, so phones don’t load the computer video.
  2. For videos further down the page, turn off autoplay or set them to load only when played (preload="none"), with a poster image.
  3. Upload a phone-sized file for videos phones do show (720p or smaller is plenty for a phone-width slot).
  4. Check the page in Chrome’s device mode, with the Network panel filtered to Media: nothing should download for videos the phone doesn’t show.

In Zolvio: on paid plans with AI turned on, the guided fix writes these steps for your own store and theme: where to click in Shopify admin or the theme editor, or which file to open, the line to find and the code to add. Each file opens in Shopify’s code editor. Zolvio never edits your theme: you make the change, then Verify fix checks your published theme for code changes (or you mark it fixed), and later audits confirm the problem is gone.

Common questions

Why does “Phones download more video than they show” cost a Shopify store sales?

Many themes show a video on computers and hide it on phones, or start every video on a page as soon as it loads. A video hidden on a phone can still download there, and so can videos far down the page the shopper hasn’t scrolled to, or a video file far wider than the phone shows it. On a phone connection those megabytes load alongside the first screen’s images and scripts, so what the shopper came to see arrives later, and on mobile data they pay for video they never watch.

How does Zolvio detect “Phones download more video than they show”?

Zolvio measures up to 3 pages whose code has a video that starts loading on its own (autoplay, or preload="auto"), the homepage first; the cart isn’t measured. Each page loads on its own in Chrome at phone size, as on an Android phone, with the browser’s cache off, as on a first visit. Zolvio counts the bytes of video the page downloads until 6 seconds after it loads, before any scroll, then widens the page to 1,440 pixels to see which videos show on a computer. Safari on iPhones isn’t measured. A video counts when the theme hides it on phones but not on computers and the phone downloaded 500 KB or more of it; when it sits 2 or more phone screens down and such videos together downloaded 3 MB or more; or when it shows, but its file is more than 4 times wider than the phone shows it and 2 MB or more of it downloaded. A hidden video’s file doesn’t count when a video the phone lays out plays the same file, nor a far-down video’s when a video in the first screens plays it, and two videos playing one file count once. Videos far down a page aren’t judged when the audit’s browser couldn’t lay the page out as shoppers see it: when the page requests files from public code libraries (such as jsDelivr, unpkg, cdnjs, or jQuery’s and Bootstrap’s sites), which the audit’s browser doesn’t load, or when an A/B-testing app kept the page hidden. The finding lists each video (up to six), why it counts and how many MB the phone downloaded for it, and reports how much video the phone downloaded in all before any scroll, and from how many videos (each file counted once, shown or not).

How do I fix “Phones download more video than they show” on Shopify?

In the theme editor, open the section with the video (often the homepage’s first section) and use its mobile video or mobile image setting, so phones don’t load the computer video. For videos further down the page, turn off autoplay or set them to load only when played (preload="none"), with a poster image. Upload a phone-sized file for videos phones do show (720p or smaller is plenty for a phone-width slot). Check the page in Chrome’s device mode, with the Network panel filtered to Media: nothing should download for videos the phone doesn’t show.

Related

Documentation

  • How audits work — What an audit scans and how findings become issues.
  • Guided fixes — Step-by-step fixes written for your theme, with links into the code editor.
  • Workflows — Go from an issue to its heatmap and recordings before you change anything.