As a Shopify merchant, you’ve probably come to terms with the fact that most of your customers will seldom experience the majesty of your beautifully designed site displayed across a massive computer monitor. Pity.
This is because 81% of traffic and 71% of orders come from mobile, which means it’s time to go full throttle on optimizing your Shopify store’s mobile experience.
Super savvy eCommerce merchant that you are, you likely know the importance of mobile optimization, particularly when it comes to page load speed – but just in case you need some more motivation: science says that 53% of mobile users will give up on your site if it doesn’t load in a measly 3 seconds.
Heartless.
There’s a reported 57% loss of potential sales opportunities attributed to poor mobile optimization. Amazon claims increasing their average page load time by one second would lose them $1.6B, annually.
Optimizing for mobile means taking extra steps to assure your site looks, feels, and behaves brilliantly on every device. Site design, load times, and device screen sizes should be carefully considered.
Common Questions About Shopify Store Mobile Optimization
Do Shopify themes automatically optimize everything for mobile?
Maybe. Using a theme from the Shopify marketplace is a good start, but you’ll also need to make sure you’ve chosen a mobile-responsive theme. “Mobile responsive” means that the theme automatically rearranges menus, page sections, and other elements to fit better on a mobile device. (If your theme isn’t responsive, you’ll need custom work to make things right.)
Having a responsive Shopify theme should be considered the bare minimum – but, quite frankly, your store deserves better. The way the theme decides to rearrange your page may not be in line with what you want – custom development work can help.
But before we can get into all the ways you can treat your store like the queen she is, we need to talk about mobile phone models.
How do different mobile phone models impact site optimization?
We’re sure it’ll come as no surprise that there are a plethora of mobile devices – all with differing screen sizes, resolutions, and HTML features. But did you know you’ll also have to consider your customers’ mobile carrier and browser? Yup, even those things impact loading.
If your site is already optimized for mobile, you won’t need to spend countless hours obsessing over iPhones and Androids – but you will still need to take reasonable steps to ensure your store will provide a comfortable and effective shopping experience for all users.
How to test the look and functionality of a Shopify store on a variety of phone models
Lucky for you, thanks to the many tools that replicate web experience across devices and browsers, you won’t need to track down a friend with an Oppo phone who uses Firefox and has Boost mobile to run tests. A tool like Browserstack takes care of all of that. You can also use the Chrome Developer Tool and head to Inspect mode and Device mode.
Do you need to test your site on every single device and browser combination? No, probably not. Time is money. Instead, use Google Analytics and other consumer behavior tools to narrow down the devices and browsers that YOUR customers use the most often, and focus on those.
Are tablets considered "mobile devices" for the purposes of website optimization?
Yup! Tablets are weird beasts, though. User behavior has some unique quirks, such as whether your users are viewing it in portrait mode – which is similar to mobile – or landscape, which is similar to desktop. Tablets are also frequently used while connected to Wifi, which translates to a page load experience that’s closer to desktop than purely mobile.
How much you should care about site appearance and performance on tablet depends on what your users are doing. Check your Shopify Analytics and see – if less than 5% of users are on tablet, we say don’t stress about it too much.
(^ That’s 0.23% of sessions on tablet, if you don’t want to do the math.)
The Mobile Optimization Mother Lode: Page Load Speed
Mobile optimization is all about sleeping soundly, knowing your customers are having the best frickin’ mobile web page experience of their lives – and site speed is easily a holy grail of optimization.
There have been myriad studies boasting that faster websites make more money. Obviously, this is a critical consideration, so…where the heck do you start?
ENTER: Google Pagespeed Insights (PSI)
There are lots of different page load tests out there, but since most searches happen on Google, we prefer to use Google Pagespeed Insights. In the future, if you want to get really into it, you might want to consider using a tool like GTmetrix so you can adjust for location and other factors. For now, let’s stick to PSI.
Enter your URL in the bar at the top, hit ‘Analyze’, and receive a full report on site performance for mobile and desktop. The top section is what we would consider the most pertinent set of results, because it measures a set of core vitals that tell you what actual users in the real world are experiencing, aka “field data”.
Mobile is the default view, but you can toggle to see Desktop scores as well. If everything’s in the green, congrats! The majority of your users are having a great experience with your site on mobile. (Curious for more? Check out this article from Google to learn more about these six core vitals and why they use the 75th percentile to judge success.)
If something is orange or red, click on Expand View to learn more.
You’ll notice a tab in the upper right for “This URL” and “Origin.” By default, PSI shows you results for whatever URL you entered – typically the homepage. If you think there’s a specific page on your site that may be suffering, you can test only that one – but know that the “Origin” tab reflects data from your site domain as a whole, meaning it’s generally a more holistic view of the entire site experience.
Further down the page, you’ll also receive your official PSI performance score. This section reflects how your page performed in a lab environment. Check down in the gray area at the bottom to see the exact parameters of the test, including the device and the mobile network speed.
You might be wondering: how does Google calculate your score? Why is mobile seemingly ALWAYS lower than desktop? Do your competitors have better scores? How can you achieve a perfect score? Does any of this really matter???
Deep breaths; all will be revealed.
To answer your last question: it matters, but not as much as some might think. Sites with higher PSI performance do generally enjoy better SEO ranking, user engagement, store traffic, conversion rate, and more, but there are some variables that make it worth taking your score with a grain of salt. (More on that in a minute.).
Now, onto the rest…
Why is mobile PSI score almost always lower than desktop?
Easy. Desktops have faster processors, which means they can render complex site code more quickly than a mobile device can. They’re also accessing the web via WiFi or ethernet connections, while PSI tests your Shopify mobile site through a 4G (often throttled) connection – meaning, a network slower than Wifi.
Mobile
Desktop
How does Google PSI calculate the mobile page load speed score?
Google defines page speed by how long it takes to display content above the fold and for a browser to fully render a page – and uses a whole host of specific metrics to calculate your final score.
How often does page speed fluctuate?
Often! If you run a page test now and then again 10 minutes from now, chances are you’ll get slightly different results. It varies depending on your personal internet connection, your browser, browser extensions, and so on. As long as they’re not varying wildly, you should feel comfortable proceeding.
Google’s PSI is a complicated kraken to understand, so if you’re curious, you can learn more about the equations used, Google’s lighthouse scoring calculator, and their scoring methodology.
How do I improve my Google Page Speed score?
You’ll be pleased to know that Google won’t just spit out a sub-par score and send you on your way! After all, what good is it to tell you what’s wrong if you don’t have the first clue how to fix it? Enter the following three sections:
- “Opportunities provide suggestions on how to improve the page’s performance metrics. Each suggestion in this section estimates how much faster the page will load if the improvement is implemented.”
- “Diagnostics provide additional information about how a page adheres to best practices for web development.”
- “Passed Audits indicates the audits that have been passed by the page.”
Does page load speed affect SEO ranking?
Indeed. Your PSI score impacts SEO ranking because Google wants to connect users with the most useful results out there – and loading that value quickly matters. However, there’s much more that goes into a healthy search engine ranking than just page speed.
We get that it might still be a little unsettling to see your mobile site marred by a less-than-perfect score. Far be it from us to minimize the plight of the perfectionist (not like any of us around here have that problem… 😬), but for those with a more stoic, control-what-you-can-control vibe…
How much should I care about my page load scores?
It depends on what your customers are doing, really. If 90% of your visitors are on a desktop, maybe it’s not worth your time and money to tinker with mobile scores. (Unless, of course, there’s evidence to suggest they’re being forced to use the desktop version because the mobile one sucks so much.)
If you sell only within the U.S., the lab data isn’t going to be all that applicable to you. How can it be, when it’s using a slow 4G/fast 3G connection and the vast majority of the US is on fast 4G or even 5G speeds? (Plus, 3G just…isn’t going to exist in the US by the end of 2022.)
TL;DR, Take your PSI results with a grain of salt. Remember there are uncontrollable variables at play here. What’s most critical is that you gather (and heed!) customer feedback on user experience – and, of course, that you periodically test your site on different mobile devices.
Still nervous? Perhaps it’ll help to know that, if you do score on the low end, you’re in good company. The average page speed score for mobile is 40, and average desktop score is 60. PSI results are available to anyone, so you can easily test your competitors’ stores to see how you stack up.
Phew! That was a lot, but we did say that page load speed is a big part of overall mobile optimization. Let’s see what else you might want to consider.
Welcome to Your Shopify Mobile Optimization Checklist
Pro tip numero uno: if you’ve yet to begin your Shopify site development journey, design a mobile-first website from the start. Think mobile first, everywhere.
“OK, but like…my shop is established and I…didn’t do that.”
No worries! Whether your shop is 0 days or 10 years old, there are a few things you can do to get it humming like mobile-optimized heaven.
Optimize Your Checkout
We’ve said it before, and we’ll say it again: if you want people to give you their money, you need to make it as easy as humanly possible for them to do so. This is true for the entire customer journey, but checkout is the end zone – fumble there, and watch your conversions nose dive and cart abandonment rise.
Checkout optimization includes considerations like:
- Are your checkout pages designed so that all the most critical information is in view without lots of scrolling?
- Can customers easily edit their items from the cart?
- Are your fillable fields mobile-friendly so shoppers don’t have to do the ol’ pinch-or-zoom to enter their information?
- Are you offering multiple ways to pay, including mobile-friendly options like Apple Pay and GPay?
- Do you offer obvious assurances about how you’re protecting your customers’ sensitive data?
- And much more!
Simplify Navigation
Your navigation is like a map, and customers are never in the mood for a frustrating corn maze. Keep the most vital pages at the forefront of your nav, and tuck less important pages away in a submenu on mobile. If you’re running a campaign, consider making related pages easy to find.
This type of optimization is a bit technical, so you may want to phone a friend for help. (Ahem.)
Optimize Fonts
Is your fancy custom font as easy to read on mobile as it is on desktop? Is your font size reasonable? Keep copy short and sweet (read: compelling), especially in high-value areas, like your homepage and product pages. Remember that you’re working on a small screen size, so you’ve gotta make it count.
Clickability
We like big butt(on)s and we cannot lie. No one wants to feel like they’re playing a game of Operation when tapping around on your mobile site. Your buttons and other interactive elements should accommodate a broad range of finger sizes and drop down menus should be kept to a minimum.
Optimize Images and Videos
Image optimization – particularly product image optimization – is an SEO hero, and that includes for mobile shopping. Think: lazy loading, image compression, proper formatting, rich alt text for site accessibility (and better Google rankings!), and more.
Be Careful with Pop-ups
Pop-ups can typically be easily circumnavigated on desktop – not necessarily so on a 6-inch screen. There is nothing more irritating than having a flashy discount offer slide between you and that thing you were intending to tap on, thus rerouting you to another page – or, worse, being presented with a poorly designed pop-up that offers no apparent escape.
Content
Some larger merchants may want to consider having an entirely separate design (and content) for their mobile site. We don’t love this approach because it’s basically doubling your workload and involves even more maintenance. A smartly optimized mobile responsive theme is the more modern way to go. If you must, though, think carefully about what content you will and won’t include on the mobile site.
Always give customers the option to switch to the “full desktop site” if they’re not enjoying the mobile experience. (Such as, oh…I don’t know, finding out that online check-in doesn’t work on the mobile site when you’re already on your way to the airport. ALLEGIANT.)
Optimize Use of Shopify Apps
When was the last time you checked for old (or over-complicated) app code that might be bloating and slowing down your site? Now’s a good time to do that. :)
Optimize Spacing
While this isn’t usually a major issue with a mobile-responsive theme, it’s worth testing!
What desktop site features don’t translate well to mobile?
There are some desktop features that just plain will not translate well to mobile. These include things like:
- Big images, banners, horizontal photos, & background images (aka a cropping nightmare)
- Mini-carts
- Scroll effects & hover effects
Conversely, there are some features that are mobile-specific. For example, if you have a phone number on your contact page, a mobile shopper should be able to tap the number to call it.
“This is so much information. I am very tired and don’t want to go hunting for holes in my Shopify store’s mobile experience.”
Rest your head, weary merchant. We got you.
