Magento 2 Mobile Optimization – A 2020-ready Guide

Magento 2 Mobile Optimization – A 2020-ready Guide

Magento 2 Mobile 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. magento mobile optimization crawler

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 you design for the 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 optimized for speed, simplicity, and good content visibility.

Understanding the Challenges of Magento 2 Mobile 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 methods remain the same, what’s different?

But the 2 platforms are not really the same. The main differences lie in how users interact with your store, who they are, and what kind of experience they are looking for.

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. This 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 for speed on mobile devices. Portrait mode browsing allows using smaller product photos and banners: this is a great opportunity to save bandwidth resources.

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.

Attention spans and situational use. crawler_mobileMobile 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.

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.

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 Mobile App?

Building your Magento mobile store as an app is not a cost-effective solution. Two reasons:

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

Mobile-Focused Optimizations

Most of Magento optimizations work both for mobile and desktop versions of the store. After all, there is no fundamental difference between PC and mobile performance.

Any store that is well-optimized will work great on both platforms. Of course, you’ll see a bigger performance boost on the PC just because it’s a more capable device. But what we can’t get in absolute numbers we can achieve in perceived performance.

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.

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. 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 boosts 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, that’s 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.

amp_pages magento mobile optimization

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.

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?

We know that online retail is an image-focused industry with stores that can have 100.000+ of 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 here.

Use Mobile-Friendly Animations and Styles

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

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

2. Hardware-accelerated content. The older the phone, the slower it works with animation, too. One of the solutions to make animations 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 performance since users are extremely sensitive to the lag.

General Suggestions: Works Both for Mobile and PC

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

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

Check Your Server Configuration

If you use a good quality hosting but the performance is still poor, look into server settings. Sometimes developers make silly mistakes in server config. For example, on one of our projects Magento 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.

Integrate a CDN

A Content Delivery Network is one of the most powerful upgrades for Magento performance. 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.

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.

http1_vs_http2_comparison magento mobile optimization

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 head of line blocking, and migrate 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.

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.

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 the store. A good caching tool will improve the perceived performance of the store 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.

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 extensions developers don’t prioritize 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.

We have a short guide on how to profile and uninstall Magento extensions here.

Defer Loading of Non-Critical Assets

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.

Apply Lazy Loading to Images

no_lazy_loading mobile optimization magento

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 user experience. Most users even think that lazy loading stores are faster just because their perception of speed changes.

lazy_loading_on magento mobile speed

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.

Read on about lazy loading to find out how you can integrate it into your store.

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.

hand_suchwort_beispiel mobile speed

Take a look at the search results above. In this example, we are looking for products that have “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.

Optimize With Magento Admin Panel Settings

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

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 offers a performance boost because it will keep 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.

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.

js_settings magento mobile speed

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.

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.

Use Images of an Appropriate Size

Both mobile and desktop users will benefit from this simple Magento 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.

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.

Optimize the Images You Upload

Mobile users suffer from heavy content more than anyone else. Optimize your 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

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.

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.

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.

Focus on Mobile Cart and Checkout Performance

Pay special attention to where your mobile users abandon the store. Sudden drops in engagement is 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 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 top mobile user experience.

Even though Magento mobile optimization tips are very similar to the PC guide, Magento 2 mobile optimization deserves a separate guide because of how important it is for your business.

We hope you now know where to start from. In case you need more than just guidance, Onilab team is excited to help you move any Magento 2 optimization project forward. Contact us to see how we can speed up your mobile store.

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