Open menu

Need to speed up your Magento 2 store?

Hire us! Open menu
Magento 2 Mobile Speed Optimization – A 2020-ready Guide

Magento 2 Mobile Speed Optimization – A 2020-ready Guide

Magento 2 Mobile Speed Optimization – A 2020-ready Guide

July 1, 2019, Google has fully switched to mobile-first indexing for new sites. In fact, this announcement was long overdue. Even though Google started promoting mobile-first user experience as a top priority for the Web a long time ago, the final switch has happened only recently.

screenshot from the search console

But why is that a good idea? Compared to other devices, mobile phones have less raw CPU power, memory, bandwidth, and screen real estate.

The main reason is that more than 50% of all users browse the web on mobile 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. No more separate URLs for mobile stores, no more apps or dynamic serving. Google wants Ecommerce to build a uniform user experience for all platforms.

When your Magento website is optimized for mobile, everyone wins. Optimizing for the weaker device first can benefit the stronger device as well. Even the desktop will benefit from a lighter, more responsive design that’s designed for speed, simplicity, and good content visibility.

  1. 5 Challenges of Magento 2 Mobile Speed Optimization
  2. Should You Convert Your Magento Store to Magento Mobile App?
  3. 3 Mobile-Focused Magento Speed Optimizations
  4. 13 General Suggestions: Works Both for Magento Mobile and PC
  5. Beyond General Tips: 3 More Things You Can Do
  6. Final Thoughts

Understanding the Challenges of Magento 2 Mobile Speed Optimization

When we look at both mobile and desktop platforms, we’ll see that they require the same steps to make them faster: less CPU-hungry code, faster databases, lighter files, better servers. But if all principles and 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 are looking for.

1. Physical screen size and screen orientation

Smartphone screens are small. Even the “plus” versions of the flagship models are tiny compared to a notebook 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 mobile devices. 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 website speed and you get good chances the user will become frustrated and leave before making a purchase.

3. Attention spans and situational use

Mobile users go shopping in a different way than those who shop online on their desktops. First of all, a smartphone user could browse your store riding in a car, sitting on a sofa, or waiting for their order in a cafe. 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 users and desktop users are two different groups of people. More than half of all mobile users browse the 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 page layouts, fewer scripts, lighter DOM structure, and compressed files to work fast. Mobile devices are not designed to effectively deal with CPU-heavy scripts because they are in general 75% weaker than desktops.

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 performance.

Should You Convert Your Magento Store to Magento Mobile App?

Building your Magento mobile store as an app is far from being a cost-effective m-commerce solution. There are two reasons for this:

  • most people use fewer than 10 apps per day and install exactly 0 new apps a month (what are the chances they will want to make an exception for your store?)
  • unless you are Amazon or Alibaba we highly recommend you just optimize your 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 cheaper price.

Alternatively, you may opt for developing a progressive storefront on top of your Magento store. In this scenario, your site will get all the benefits of a native app, such as the ability to be installed to a user’s home screen, offline mode, fast performance. All the more reason why you should consider Magento PWA development as an alternative to a mobile app is an excellent app-like UX and reasonable rates.

3 Mobile-Focused Magento Speed Optimizations

Most of Magento’s speed optimization strategies work both for mobile and desktop versions of the store. After all, there is no fundamental difference between PC and mobile 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. Integrate AMP into Store Pages

There’s a preconception (even among developers) that AMP pages are only good for static, text-rich environments such as landing pages, blogs, news hubs, digital media, etc. But we recommend you discover a wider purpose for them in your Magento store instead of limiting AMP technology to articles and media-rich websites if you want to speed up a mobile Magento website.

AMP is a relatively new technology that combines parallel loading, the use of iframes, asset-independent layout, and static layouting techniques to dramatically speed up page loading time. AMP uncouples document layout from resource layout and uses other tricks to boost page performance and speed. If you want to get a detailed review of the technology, more info will be here.

Instead of going into technical detail on how AMP increases store speed, let’s get to the biggest advantage of AMP.

AMP can move your store to Google cache.

See the address bar in the screenshot below? That’s not onilab.com, that’s google.com. WIth an update-cache request, you can tell Google to serve AMP versions of the store inside the cache instead of retrieving the live version. The main advantage of loading pages from Google is, of course, the speed.

screenshot from the onilab website

Switching to AMP pages allows mobile devices to load a few times faster. AMP reduces the number of HTTP requests, eliminates CSS and JS bottlenecks, and reduces bloat moving CSS inside the document.

While AMP does a lot of work for you, it’s still quite labor-intensive to introduce and maintain. For example, you need to keep good CSS discipline to stay within the allotted 50 KB space for size-bound inline CSS inclusions and bear in mind other limitations AMP has.

The tradeoffs are well worth it though since AMP is a good investment of optimization effort for both mobile and desktop devices. Product Pages, Product Lists, Homepage, and other key store pages can be improved with AMP.

2. 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 popups 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 store’s speed would be even heavier.

In order to maintain a decent level of speed, we need to focus on delivering a lighter, simpler mobile design. It’s a complex task that involves simplifying the layout structure, eliminating resource-heavy elements, and generally working on all the speed aspects everywhere in the store. More about the theme and media optimization you can find in our recent guide.

3. Use Mobile-Friendly Animations and Styles

Magento desktop and mobile browsing have a few technical differences that you should definitely take advantage of.

a) CSS separation

One solution to speed up Magento mobile theme loading 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 Magento theme 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.

b) Hardware-accelerated content

The older the phone, the slower it works with animation, too. One of the solutions to make animations on mobile devices faster is to switch the use of 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 the lag.

13 General Suggestions: Works Both for Magento Mobile and PC

While we definitely have mobile-specific solutions for smartphone performance, in most cases, mobile speed optimization tips have more in common with those for desktops than you might expect. Here’s a comprehensive list of what you can do to make both your Magento mobile performance shine!

1. Upgrade to a Better Hosting Solution

Magento is hungry for resources and often bottlenecks on CPU. If you have no idea whether your hosting environment is the bottleneck, 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 problem.

When the server is too weak to handle a demo store, how well will it handle a live store full of customers, products, and 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 Magento hosting guide.

2. Check Your Server Configuration

If you use good quality hosting but your Magento 2 mobile website still loads slow, look into server settings. Sometimes developers make silly mistakes in the server config. For example, on one of our projects, Magento mobile performance was really slow because the former developer forgot to turn off xdebug on the server which increased page loading speed 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 CDN for your Magento store in this section.

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 does not allow to use 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 optimizations, 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.

HTTP/2 requests multiplexing

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 here.

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 database optimization for Magento and decide for yourself.

6. Install Redis and Varnish

Mobile users benefit from cache management solutions even more than desktop users. Slower and less reliable Internet connections can lead to spotty service and holdups in content delivery. This is where frontend and backend cache solutions such as Redis and Varnish will be able to help mitigate these effects for pages that your users have already visited at least once.

It’s important to understand that the cache itself does not improve the speed of Magento stores. A good caching tool will improve the perceived performance of a website but it does nothing in terms of raw numbers. Yet since perceived performance is paramount for user experience, it will be a good idea to integrate them into your store.

Read more on how to build Redis and Varnish into your Magento store and improve your Magento mobile optimization further.

7. Review Your Extensions

Magento is a flexible and extensible platform but sometimes this flexibility works against it. The more features you install in your 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. The impact of a single extension could be minimal but when you have 30 of them installed, you will 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 recommend that you get rid of cosmetic 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 Magento speed optimization guide, you will know how to profile and uninstall Magento extensions.

8. Defer Loading of Non-Critical Assets

This method is convenient for improving all aspects of your store’s performance, including Magento Core Web Vitals. 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 JS 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 features or design elements that you can see from the first screen. Any elements that are located lower on the page are fine to load later since the user will not be able to see them anyway.

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

applying 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 it prevents 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 with 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.

the cost of Lazy loading

Lazy loading works best for mobile devices and low-end desktops since they are the ones who 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 Magento image optimization 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.

elasticsearch use in Magento mobile

Take a look at the search results above. In this example, we are looking for products that have a “hand” word in them. But in the results below you can see that none of them has “hand” in the name.

This is because a good search engine will help you find your item even if you’ve made a typo or can’t remember the name right. Instead of giving you a blank result, in this situation, the search works smarter and shows all products that you can wear on your hand.

Do you want to know how to make the most out of your Elasticsearch upgrade? Check our guide on speeding up Magento search.

11. Optimize With Magento Admin Panel Settings

There are a lot of optimizations you can do within the Magento Admin panel to improve speed for mobile users:

a) Switch to Flat Catalogs

Flat products and categories make sense when your store grows to dozens of thousands of SKUs. Where the traditional Magento DB structure stores product attributes in multiple tables across the database, the flat structure can help optimize a website for mobile devices thanks to the fact that it keeps all attributes within fewer tables. Less lookup time, better speed, especially for stores with a lot of products. The guide on how to enable flat catalogs is here.

b) Optimize JavaScript 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 and skip over JS Bundle and JS Merge entirely. More info on how to do it here.

javascript settings for Magento mobile optimization

c) Enable HTML and CSS optimizations

The more data your users need to download, the more time it will take to load a page. What you can do is minify HTML and merge and minify CSS files.

magento speed mobile minify_html

Follow the links above to learn how to enable this Magento 2 mobile optimization setting.

d) Compress files with Gzip

Gzip compression is a good method to further save bandwidth and transfer data faster. 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.

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.

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.

You might think a few pixels can’t get you in trouble but imagine a situation where you have dozens upon dozens of larger images, for example, in a Product Grid. This is where the performance impact is felt very clearly, especially on mobile.

By uploading images of the right size you avoid the situation when the browser has to resize your image after you and take valuable processing time off more critical tasks.

13. Optimize the Images You Upload to Make Your Mobile Magento 2 Website Faster

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.

The manual method requires good discipline and dedication from your content managers which might not always be the case. That’s why we recommend you look into automated solutions:

  • integrate automated image optimization tools such as imagemin, libvips, or WebP Convert,
  • if you still think you would like to use manual solutions, look into TinyPNG, TinyJPG, and ImageOptim services to see which of them you like most.

In addition to these tools, most CDNs will also optimize your 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.

The reason being in case the CDN cache becomes invalidated, you are left with your unoptimized images until the CDN cache is back in action.

Going Beyond General Tips: 3 More Things You Can Do

By this point, you probably already know that optimizing for mobile users is much harder than optimizing 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

lab_data_mobile_1 magento

Google PageSpeed Insights is a good tool to get some guidance about possible performance improvements. We’ve actually already created a whole guide on Google PageSpeed score and Magento 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, 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 rendering path metrics, time to interactive, and first contentful paint,
  • and finally, 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 View, Product Grid, Shopping 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. Focus 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 code and complex third-party extensions, they can become extremely slow.

Take a look at our detailed guides on Magento Add to Cart and Magento Checkout Performance.

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 mobile performance. 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 mobile speed optimization tips are very similar to those described in our PC guide, they deserve a separate article.

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 Magento performance optimization services to see how we can jumpstart your e-commerce mobile store.

Related Articles

Magento tips from real projects
Magento tips from real projects
Close
CALL US 24/7:
Australia
& asia
+61 (02) 8005-7494