In 2019, Google fully switched to for new sites and started to incrementally introduce the changes for older ones. The main reason is that browse the Web on mobile (compared to 31% in 2015), and their numbers continue to grow.
For Google, it's important that the website is as convenient to use on mobile as it is on the desktop, and all who run websites build a unified user experience for all platforms. At the same time, optimizing an online store for smartphones is more challenging than for desktops. It’s due to the specifics of mobile devices, which can’t boast the same performance as laptops and PCs. The rule of thumb for mobile sites is to simplify the logic (functionality) where possible to lighten the burden on the device.
In this article, we'll consider the differences between mobile and desktop optimization and learn some specific and universal techniques for improving your store's speed. For more in-depth insights and strategies, be sure to explore our .
Table of Content
The Challenges of Magento 2 Mobile Speed Optimization
Let's recall this correlation between mobile page speed and bounce rate. Basically, it states we must keep the loading speed on smartphones under 3 seconds.
When we look at both mobile and desktop platforms, we'll see they require the same steps to make them faster: less CPU-hungry code, faster databases, lighter files, and better servers. But if all principles and performance optimization techniques remain the same, what's different? Above all, these two platforms are not really the same. The 5 main differences lie in how users interact with your store, who they are, and what kind of experience they're looking for.
1. Physical screen size and screen orientation
Smartphone screens are small. Even the Pro/Max/Plus versions of the flagship models are tiny compared to a laptop or a PC. These size limitations have both advantages and disadvantages. For example, it's easier to optimize for a device that can't show a lot of content on the first screen.
A small screen allows developers to defer more content from loading instantly. This is a good way to optimize Magento stores for speed on smartphones. Portrait mode browsing allows using smaller product photos and banners: this is a great opportunity to save bandwidth resources.
2. Interface and input differences
Typing in your shipping information or searching for a specific product can feel slow and painful. Add to that a slow site speed, and the odds are the user will get frustrated and leave before making a purchase.
3. Attention spans and situational use
Mobile users go shopping in a different way than online shoppers using their desktops. First of all, a smartphone user could browse your store while walking, waiting for their order in a cafe, sitting on a sofa, commuting to work, etc. Most of these situations are time-sensitive. This puts additional pressure on Magento store owners to offer a fast and user-friendly shopping environment at all costs.
4. Mobile and desktop audiences
Most of the time, mobile and desktop users are two different groups of people. More than half of all mobile users browsWebhe Web on their mobile devices exclusively, which means that roughly 50% of your audience will research, browse, and buy stuff from the phone. Your responsibility is to give them the best user experience possible.
5. CPU and bandwidth
Smartphones are weaker than PCs. They require much simpler web page layouts, fewer scripts, a lighter DOM structure, and compressed files to work fast. Smartphones aren't designed to deal effectively with CPU-heavy scripts.
Mobile users also often have to rely on spotty or slow connections such as EDGE, H+, rural xDSL Wi-Fi to download content. It all takes a toll on how these users will perceive your store's performance.
Should You Convert the Magento Store to a Mobile App?
Building your Magento mobile store as an app is far from being a cost-effective mobile commerce solution. Partly because people tend to use just several apps a day and delete unused ones to free some space for photos and videos. And partly because mobile development involves more work to introduce the apps for iOS, Android, and Windows.
Unless you are Amazon or Alibaba, we highly recommend you just optimize your online store for both desktop and mobile users. Mobile browsers are capable enough to get you the same experience as a native app but with much higher adoption rates and at a lower price.
Alternatively, you may opt for developing a progressive storefront on top of your Magento website. With a progressive web app (PWA), your site will get all the benefits of a native app, such as the ability to be installed on a user's home screen, offline mode, and fast website performance.
All the more strong reason why you should consider Magento PWA as an alternative to a mobile app is an excellent app-like UX and reasonable development rates. If you decide to step toward , you might need a team with solid ReactJS skills and a profound understanding of Magento architecture. Develop your Magento PWA with Onilab to win mobile conversions and boost revenue growth.
Two Mobile-Focused Tips for Magento Speed Optimization
Most of Magento's performance optimization strategies work both for mobile and desktop versions of the store. After all, there is no fundamental difference between PC and smartphone performance.
Any M1 or M2 store that is well-optimized for speed will work great on both platforms. Of course, you'll see a bigger performance boost on your PC just because it's a more robust device. But what we can't get in absolute numbers, we can achieve in perceived performance.
1. Prioritize a Lighter Design for Mobile Users
Are you sure those 20 fancy carousel sliders on your homepage are worth it? But have you checked analytics? What about pop-ups on every page? Do you have thousands of DOM elements? How about that fancy scrollbar in Java that kills your mobile performance?
When answering the question of how to speed up mobile Magento 2 websites, we couldn't help but mention the design challenge. We know that online retail is an image-focused industry with stores that can have 100.000+ products on display. This media-dominated environment negatively impacts store performance, especially for mobile users. If you add a complex design to the mix, the combined effect on the site speed would be even heavier.
To maintain a decent level of loading speed, you need to focus on delivering a lighter, straightforward mobile design. It involves simplifying the layout structure, eliminating resource-heavy elements, and generally working on all the speed aspects everywhere in the store. With , you'll get a user-friendly and intuitive UX that sells.
2. Use Mobile-Friendly Animations and Styles
Magento desktop and mobile browsing have a few technical differences that you should definitely take advantage of.
CSS separation
One solution to accelerate Magento mobile theme loading time is to separate desktop and mobile CSS files. The idea is to optimize each group to run well on their intended device, whether a desktop or a smartphone.
Why is that a good idea? For example, if you have a custom-built based on the default Blank or Luma theme, check whether you use media mixins inside the Less files. Using mixins will ensure that the styles are distributed in a convenient way inside the styles-l and styles-m files.
Hardware-accelerated content
The older the phone, the slower it works with animation, too. One of the solutions to make animations on mobiles faster is to switch the use of the translate CSS function to translate3d(). The switch will make sure that instead of a software acceleration, your browser will directly use the hardware of the phone to process the animation. Smooth animation is one of the cornerstones of good speed and performance since users are extremely sensitive to lags.
Predefining Dimensions in CSS
It's also essential to avoid changing the layout during animation handling. To prevent this, predetermine the dimensions of elements like text blocks in CSS (and through animations, we'll just show them). By doing so, we ensure smoother transitions and avoid shifts affecting the UX.
Utilizing the 'Will-change' Property
This CSS property allows us to specify which parameters will be animated. If we have these changes declared in advance, browsers can optimize the animation process, thereby improving the rendering speed and overall performance on mobile devices.
13 General Suggestions: Work Both for Magento Mobile and PC
While we definitely have mobile-specific solutions for smartphone performance, in most cases, speed optimization tips for mobiles have more in common with those for desktops than you might expect. Here's a comprehensive list of what you can do to make your Magento mobile performance shine!
1. Upgrade to a Better Hosting Solution
Magento is hungry for resources and often has bottlenecks on the CPU. If you have no idea whether your hosting environment is the problem, install a default Magento 2 store on the server and see how fast it works. If the brand-new store feels slow, here's your issue.
When the server is too weak to handle a demo store, how well will it handle a live store full of customers, products, and third-party extensions? Our advice here is to look for a Magento-focused hosting provider which will be able to offer both a powerful server and good tech support. For more details on how to choose the best hoster, read our .
2. Check Your Server Configuration
If you use a good quality hosting provider, but your Magento 2 mobile website still loads slowly, look into server settings. Sometimes developers make silly mistakes in the server config. For example, on one of our projects, Magento loading speed on mobile was really slow because the previous developer forgot to turn off Xdebug on the server, which increased page loading time from 500 ms to 1200 ms.
3. Integrate a CDN
A Content Delivery Network is one of the most powerful ways to make a Magento mobile site work faster. It can optimize images and compress CSS/JS files, reduce latency for users from different regions, serve older format images in modern formats, keep multiple image sizes in its cache, minify JavaScript and CSS files, progressively load images, defer asset loading, etc. Read more about how to choose the best content delivery network for your Magento store in .
4. Move to HTTP/2 and QUIC
Some Magento stores still use the older HTTP/1.x protocol. It creates a lot of unnecessary slowdowns since the protocol doesn't allow to use of important modern features that HTTP/2 and QUIC are capable of.
HTTP/2 was introduced in 2015 as an upgrade to HTTP/1.x. It offers header request compression, page speed optimization, request pipelining, and other goodies that are unavailable on HTTP/1.x web stores. One of the biggest achievements of HTTP/2 is request multiplexing which allows users to download files in an asynchronous manner from a single TCP request – essentially making domain sharding a thing of the past.
QUIC is a transport layer protocol that adds to the capabilities of HTTP/2. It uses UDP instead of TCP to speed up connection time, regulates congestion in the network, offers multiplexing capabilities without a head of-line blocking, and migrates connections where needed. More about HTTP/2 in our .
Note: a good CDN will deliver your assets over modern protocols by default, but it's up to you to make sure all other files in your store are also delivered effectively and in the fastest way possible.
5. Get Rid of MySQL in Favor of MariaDB or Percona
Databases rarely become a bottleneck. Even so, it's a good idea to upgrade from the default MySQL solution to something more capable of handling larger loads and sudden user spikes. Both MariaDB and Percona offer more features, security options, scalability, and additions that are important for power users.
Larger stores will no doubt benefit from the switch since Magento tends to accumulate thousands upon thousands of SKUs, user accounts, logs, and other entries that could become a challenge to manage effectively on the traditional setup.
Not sure what to choose or how to move forward? Read our guide on and decide for yourself.
6. Install Redis and Varnish
Mobile users benefit from cache management solutions even more than desktop shoppers. A slower and less reliable Internet connection can lead to spotty service and holdups in content delivery. This is where frontend and backend cache solutions such as Redis and Varnish will mitigate these effects for pages that your users have already visited at least once. There are several caching types you can utilize: full-page cache as well as block and static content caching.
A good caching tool will improve the perceived performance of a website which is paramount for user experience. So it will be a good idea to integrate caching solutions into your store. Read more on how to build into your Magento store.
It's important to understand, though: the cache itself does not improve the actual speed of Magento stores, it does nothing in terms of raw numbers. The cache works excellently only together with general site optimizations. If you have dozens of MB of bad JS code that is loaded into the browser, then the cache is unlikely to save the day: you'll still have the main issue in place, only with loading getting a bit faster.
7. Review Your Extensions
Magento is a flexible and extensible platform, but sometimes this flexibility works against it. The more features you install in the store, the slower it gets. This happens because most third-party extension developers don't prioritize mobile optimization, write a lot of JavaScript-heavy code, and compromise performance in other ways. We believe this issue is here to stay, so don't skip this recommendation.
The impact of a single extension could be minimal, but when you have 30 of them installed, you'll understand our concerns. And mobile devices are even more affected by this bloated environment than their desktop counterparts. Smartphones have limited resources that suffer from poor execution of third-party code.
We advise you to get rid of cosmetic third-party extensions since, while they add a few insignificant effects here and there, their code impacts performance in a much more serious way than you might expect. This is because the code itself is extremely flexible in order to be compatible with any customized Magento store. Unfortunately, for this flexibility, you pay in performance.
Remove third-party extensions that you rarely use. A fast and simple Magento store will bring in more sales than a slow but pretty store. In one of the sections of our , you will learn how to profile and uninstall Magento extensions.
8. Defer Loading of Non-Critical CSS and JS
This method is convenient for improving all aspects of your store's performance, including . The general idea of deferring code loading is that not all code is important enough to get loaded right away. Some pieces of CSS and JS are actually fine if you decide to load them in a different order, say, way back from the top of the page.
Divide your CSS and JavaScript files into two separate groups. The first group will contain the code that absolutely has to be loaded first, or your page will look broken. This generally includes any above-the-fold content, features, and design elements. Any elements that are located lower on the page are fine to load a bit later since the user will not be able to see them right away.
You can preload important assets, too. As a Magento developer, you can see which parts of the page are crucial to the loading process but take a lot of time to download. Using the <link rel="preload">, you can load these resources ahead of time and remove them from the loading queue as a potential bottleneck.
9. Apply Lazy Loading to Images
Lazy loading is a more complex loading pattern than file deferring, but it works in a similar way. The pattern replaces an image with a placeholder and creates a feeling of speed when the user scrolls down the page.
Essentially what lazy load does is prevent the browser from loading the whole page at once. Instead, the browser will prioritize some files over others, focusing on delivering the best possible browsing experience for the user inside their viewport.
In our example of scrolling from top to bottom, we first see low-resolution images in place of real photos or just a placeholder. Once the bandwidth frees up a bit, these placeholders will be replaced with the source image in HD. The change happens on the fly and doesn't interrupt the user experience. Most users even think that lazy loading stores are faster just as their perception of speed changes.
Lazy loading works best for smartphones and low-end desktops since they are the ones that might have worse connection quality or low speeds. On metered connections, mobile users don't waste as much data to visit the store and make a purchase. The images they haven't reached yet will not load at all.
If you want to know further about Lazy Loading and how to integrate the feature into your store, read our guide.
10. Use Elasticsearch
Typing on mobile is less convenient than on the desktop; that's why we strongly advise you to implement Elasticsearch as an alternative to the built-in MySQL solution that Magento uses by default. Note this advice is relevant if your Magento is older than 2.4.x; for newer versions, MySQL isn't used as a search engine anymore.
Take a look at the search results above. A modern search solution gives you relevant products in different situations. It understands requests with typos ("cofe" instead of "coffee"), knows synonyms ("cup" and "mug"), and shows the right items when you input something general, like product group name ("utensils").
Do you want to know how to make the most out of your search engine upgrade? Check our guide on how to .
11. Optimize With Magento Admin Panel Settings
There are a lot of optimizations you can do within the for mobile users.
a) Optimize JavaScript files settings
Magento has a few JS settings that you can use to make the store faster: JS minification, JS bundling, and JS merge. The best way to implement them is to turn on "Minify JavaScript files" and skip over JS Bundle and JS Merge entirely. You'll find more info on how to do it and about an alternative option .
b) Enable HTML and CSS optimizations
The more data your users need to download, the more time it will take to load a page. Obviously, this has an impact on key indicators, including . What you can do is minify HTML and merge and minify CSS files. Read our guide on to know the details.
c) Compress files with Gzip
Gzip compression is a good method to further save bandwidth and transfer data faster. Bear in mind that Gzip is only one of the solutions available for Magento store owners. Brotli is another competing compression method that offers even more impressive results.
Note: most CDNs already offer gzip/Brotli/deflate and other compression methods as ready-to-use built-in solutions for their customers. Check your CDN configuration to see what is available for you.
The drawback of this approach is that the browser needs to unzip the files before it can use them. It obviously takes time and processor resources to zip and unzip files which means you need to find a good balance between server capabilities and data-saving needs.
12. Use Images of an Appropriate Size
Both mobile and desktop users will benefit from this simple Magento speed optimization: uploading images of the exact size that you need is a good way to save bandwidth and improve user experience. By doing so, you avoid the situation when the browser has to resize your image after you and take valuable processing time off more critical tasks.
You might think a few pixels can't get you in trouble, but imagine a situation where you have thousands upon thousands of larger images, for example, in a Product Grid. This is where the performance impact is felt very clearly, especially on mobile.
13. Optimize the Images You Upload
Mobile users suffer from heavy content more than anyone else. Optimize your Magento images before you upload them to the server. You can do it in a few different ways.
- Manual solutions: TinyPNG, TinyJPG, and ImageOptim. The manual method requires good discipline and dedication from your content managers, which might not always be the case.
- Automated image optimization tools: imagemin, libvips, or WebP Convert. We'd go with automated solutions as more stable and predictable quality-wise.
In addition to these tools, most CDNs will also optimize images for you. Just bear in mind that they can't change your server contents. All of their work will be stored inside the CDN cache, so the optimal solution would be to combine any of the above optimization methods with the CDN capabilities. In case the CDN cache becomes invalidated, you are left with unoptimized images until the CDN cache is back in action.
Going Beyond General Tips: Three More Things You Can Do
By this point, you probably already know that optimizing for mobile users is harder than for PC. So in order to go beyond general tips here, you'll need to get creative.
1. Review Mobile Opportunities on Google PageSpeed Insights
Google PageSpeed Insights is a good tool to get some guidance about possible performance improvements. We've actually already created a whole guide on mobile audits. Take a look at it first, it's a good starting point.
Things to take into account:
- Look at the discrepancy in desktop and mobile scores, see what's different in Google's suggestions, and focus on the items with the biggest impact on the score. This is especially true if your mobile score is way lower than what the desktop has;
- Focus on Core Web Vitals scores (LCP, FID, CLS, INP), the server response time (TTFB), speed index, and a couple of other crucial metrics;
- Remember that Google PageSpeed Insights is not a speed optimization tool; it just offers some tips for frontend performance issues.
2. Focus on Key Pages
What are the most important pages for Magento mobile optimization? The answer is simple. They are the same pages you find in your sales funnel: Homepage, Product, Categories (Product Grid), Cart, and Checkout.
To understand how fast these pages are for your mobile users and what bottlenecks they have, use Magento Profiler or any capable third-party profiling tool such as MGT Developer Toolbar. Performance issues will be different for every page you profile, so you'll have to inspect the code carefully to find and fix them.
3. Keep Tabs on Mobile Cart and Checkout Performance
Pay special attention to where your mobile users abandon the store. Sudden drops in engagement are a sign of huge performance and usability issues.
One of the weakest points of many stores is Cart and Checkout performance. For example, mobile shopping cart abandonment rates are higher than on desktops because of the way users shop on their smartphones.
Often Checkout and Shopping Cart pages create significant problems for user engagement. Loaded with CPU-heavy JS files and complex third-party extensions, they can become extremely slow. Take a look at our detailed guides on and .
Get Your Ecommerce Mobile Store Up to Speed
Some business owners who would like to switch to Magento wonder if Magento is mobile-friendly enough to offer good performance and UX. From our experience, there are a lot of ways how to speed up mobile Magento websites and offer your shoppers a top mobile user experience.
Even though Magento speed optimization tips for smartphones are similar to those described in our PC guide, they deserve more attention. We hope you now know where to start. In case you need more than just guidance, the Onilab team is excited to help you move any Magento 2 optimization project forward. Contact us for to see how we can jumpstart your eCommerce mobile store.
