Why is Shopify mobile page speed slower than your laptop?

A shopper in a waiting room opens your camel suede loafers

You opened the camel suede loafers on your laptop this morning, in the back office, on the wifi. The photo of the loafers was there almost as soon as you clicked, the price sat under it, and the page felt fine.

Now picture a shopper sitting in a waiting room before an appointment, who opens the same loafers on their phone. The name and the price are there, and the space where the loafers photo goes is still waiting on the picture. Same page, same store, and a very different wait.

The phone is slower because it has less to work with. Its processor, the part that does the thinking, is weaker, it has less memory, and mobile data adds a delay to every file it fetches. Your store sends it the same page your laptop got, so it does the same work more slowly, and it can download a banner it never shows.

That gap between the back office and the waiting room is what people mean by Shopify mobile page speed. The laptop was never going to tell you how the waiting room felt, and the check at the end of this post is the one that will.

What the phone has to do before the loafers show up

OK, so what happens when the shopper taps? Shopify builds the loafers page on its own computers, and those computers cannot tell whether a phone or a laptop asked for it.

So the phone and the laptop get the same list of jobs. Download the loafers photo, download the banner, download the little programs your apps added, run those programs, and draw the page. The list is the same on both, and the machine working through it is not.

Shopify’s page on mobile speed says phones have weaker processors, less memory, and connections with more delay than a computer, and that what loads in a fraction of a second on a desktop can take several times longer on a mid-range phone.

Every file the loafers page asks for is one more trip over mobile data, and each trip from the waiting room takes longer than it does over the back-office wifi. Every program an app added has to run on the weaker processor before the phone moves on.

The same Shopify page gives an illustration of that second cost: a program that runs in 50 milliseconds on a desktop might take 200 milliseconds or more on a phone. That is Shopify’s example, not a measurement of your store, but it shows how an app you never notice on the laptop can hold up the shopper in the waiting room.

Next up, the banner. A theme can show a wide banner across the top on a computer and a narrower one, or nothing, on a phone. One way to do that is to put both in the page and hide whichever one does not fit the screen.

Here’s the catch. Shopify’s notes on responsive themes say hiding a banner does not stop the phone from downloading its pictures. If the loafers page holds a computer banner and a phone banner, the phone downloads both, even though the shopper in the waiting room only ever sees one.

Why the laptop in the back office is the wrong place to judge the loafers

Bad news first. A look at the loafers on your laptop tells you nothing about the shopper in the waiting room, and Shopify’s page on mobile speed says so: a test on a fast desktop, with nothing slowed down, tells you nothing about how the page does on a phone.

That does not mean you have to learn to make your laptop pretend to be a phone. Shopify already keeps the numbers you need in its Web Performance dashboard, which you open from your Shopify admin. Shopify’s guide to testing says it reports how pages loaded for real visitors, split by type of page and by device, with data from Chrome users who agreed to share it.

The useful part is the comparison. Shopify’s page on mobile speed says to put the mobile and desktop numbers side by side, and that a large gap between them means the phone has a problem of its own.

That gives you a decision before you touch anything. A small gap means the phone is a slower machine running a page that is fine. A large gap means something on the loafers page costs the phone far more than the laptop, and the two places to look are the banner it never shows and the app programs it runs slowly.

I know what you’re thinking. You opened the loafers on your own phone as well, and they looked fine.

A new phone on the back-office wifi is not the shopper’s phone. Shopify’s mobile page says phones in the Moto G and Samsung Galaxy A ranges make up a large share of real shopping visits, which is why it suggests testing on a mid-range Android. The dashboard is built from your shoppers’ phones, so when it disagrees with yours, trust the dashboard.

The big PageSpeed score is a pretend visit from a Google computer, which is a different number again.

Open the camel suede loafers on your phone, on mobile data

Here’s the check, in the order you would do it. You need your phone with the wifi turned off, your laptop, and your Shopify admin.

1. Turn off wifi on your phone so it uses mobile data, like the shopper in the waiting room, and open the live camel suede loafers product page from a normal link, not the theme editor. Note what shows up before the loafers photo does.

2. In your Shopify admin, open the Web Performance dashboard. For product pages, put phone and computer side by side and read the time until the main photo shows up, which the dashboard calls Largest Contentful Paint.

3. If the phone is the slow side, open the same loafers page on your laptop and look for anything the phone never shows, like a wide banner across the top. That banner is the first suspect.

4. If there is no hidden banner, or once it is sorted, go back to what arrived before the loafers on your phone. A chat bubble, a popup, or review stars that beat the photo are app programs the phone ran first.

So what do you do about the banner? Open the loafers page in the theme editor and click the banner’s section. If the theme lets you switch that banner off, or take it off the product page, the banner leaves the page altogether. Shopify’s notes on responsive themes say a banner controlled by a store setting like that is never sent to the shopper when it is off.

If the only choice is a switch that hides it on mobile, ask your theme developer whether the phone still downloads the banner it hides. If it does, the theme is still sending the computer banner to the phone, and the shopper in the waiting room waits on a picture they never see. Your developer can show you in Inspect, the panel that opens when you right-click a page in Chrome.

Now the apps. Any app nobody uses any more comes out first, and why a Shopify store gets slow shows where those switches live in your theme.

For the apps you keep, like the chat and the reviews, Whoosh’s Smart App Loading sequences their programs so they do not race the loafers photo, and they still load once the photo is on screen. It does that on the laptop too, but the phone pays more for every program it runs.

Smart App Loading is US$99 a month on the Shopify App Store, with a 7-day free trial, no code to write, and you cancel in Shopify.

Whoosh does not touch the banner. That check stays yours, and it comes first because it costs nothing.

If the gap is still large once the banner and the apps are sorted, the next suspect is the loafers photo itself. Shopify can send a phone a smaller copy of the photo, and the post on Shopify image optimization shows how to see whether your theme asks for one.

The dashboard is built from real visits, so give shoppers some days on the loafers page before you read it again. You can stop when phone and computer sit close together for product pages. The waiting room will always be a little slower than the back office, and a small gap means the phone no longer has a problem of its own.