Mobile performance optimization for your Magento store

Published by Guest Author in Ecommerce fundamentals. 14 mins to read.

With more than 50% of all users browsing online using mobile devices, Google started prioritizing site set up for mobile experiences some time ago. However, it wasn’t until July 1st, 2019, that the search giant officially announced that it would be prioritizing mobile-first indexing for all new websites.

At first glance, it looks like a controversial move. After all, mobile devices have a number of key restrictions:

less CPU power (roughly 75% less processing resources),
bandwidth challenges (rural network capabilities, browsing on EDGE and H+ networks),
memory restrictions (slower to work on resource-heavy stores, hard to keep multiple pages live),
physical screen size and tap-based UI (harder to type and navigate),
older smartphones (not everyone owns the latest iPhone, you know).

However, mobile device proliferation is how the industry is moving, with more ecommerce shoppers preferring to use their mobile devices when browsing online stores.

What does these changes mean for ecommerce?

Google’s recent move means that it wants your website to be as efficient and effective as your desktop service. As a result, you’ll need to eliminate separate URLs for your mobile stores, as well as no more dynamic serving or apps. All of these changes cater to a uniform user experience where everyone gets a win-win situation.

When you optimize your strategy for mobile platforms first, it makes for an optimized and responsive design that enhances desktop performance as well. Using systems like PageSpeed Magento will improve your user’s experience, driving conversion rates higher.

Focus optimization efforts on key store pages

What are the most vital pages for the Magento PageSpeed optimization strategy? Focus on improving the pages in your sales funnel first. You can expect every customer journey to include:

the homepage,
search or product list,
product page,
shopping cart,
checkout.

These pages should have your undivided attention when it comes to mobile optimization. But what exact steps do we need to speed up the store? We’ve created a short and hands-on mobile performance optimization guide to get you started.

5 main steps for Magento 2 mobile optimization

Looking at desktop and mobile platforms, we find that they both require the same process to increase speed.

1. Reduce CPU-heavy code

Magento 2 is even more CPU-hungry than Magento 1 which means you want to investigate CPU bottlenecks as closely as possible. The biggest culprit here are JavaScript-heavy sections courtesy of poorly optimized third-party extensions and lack of Magento-specific optimizations. While it would be hard to go into all the specifics, we’ll outline the main methods you’ll want to use to deal with CPU bottlenecks:

Get JS code out of the <head> section of the HTML. When your code is so high up in the document it interferes with normal page rendering cluttering up the Critical Rendering Path of the page with non-important script execution. By moving these non-mission-critical scripts to the end of the page, just before the closing <body> tag, we free up computer resources to process actually important stuff.
Defer JavaScript that you can’t move. Some scripts do actually belong high up on the page. Fortunately, that doesn’t mean we don’t have any means of optimizing them, too. The best way to manage mission-critical JavaScript code is to defer its execution for a while. JavaScript execution takes an exceptionally heavy toll on mobile devices because smartphones are far less capable in the CPU department as desktops.
Simplify the layout structure. The sheer number of DOM elements can cripple mobile performance pretty hard. This challenge is the bane of larger and more ambitious stores with fancy themes and lots of customizations, either bought with the theme itself or added later on by the development team. The more complex your design is, the more CPU time the browser will need to make sense of all the elements and how they should be placed on the page. Simplify and optimize your design to speed up page rendering and free up CPU resources for more useful stuff. After all, the end goal of the store is not to impress your audience but to make them buy your products.
Remove third-party extensions that are too heavy. Do you remember how snappy and light a brand-new Magento store feels like? What happened to that? Why can’t we all have fast stores, right? Well, we can if we get rid of dozens upon dozens of third-party extensions that over the years pile up in your online store modifications folder and each eat up a tiny portion of your server resources. In addition to that, Magento extension developers also don’t dedicate a lot of effort into making their products as fast as possible. In a kind of twisted but justified worldview they understand that fast extensions don’t make a good sell. This is why they cramp as many impressive features as they can into the product instead of making sure they actually work on a real store.

2. Create faster databases

Move the database to a separate server. Database queries that are slow will create a tough bottleneck. As a result, the store will feel sluggish and slow to respond. One of the most effective ways to speed up database performance is to move it to a separate server with fast SSD. This way the database gets its own CPU and RAM resources that won’t get suddenly drained by other competing Magento processes. Fortunately, databases rarely become huge bottlenecks of their own so before you go spending a ton of money on a separate server infrastructure, do your research and get a clear confirmation that the DB really needs the upgrade.
Reduce the number of database queries. This might be a more resource-efficient way to deal with poor database performance than the first one. First of all, you can merge database queries into bundles. This way instead of bombarding the server with tons of DB requests you’ll essentially limit them to 3-4 times less of what you previously had to deal with. With this reduction the database server will have more time to address other DB requests thus increasing the overall productivity.
Prune your database to reduce the overall bulk. Over the years without proper home-keeping you’ll see how your databases grow to ridiculous sizes. Some of this growth is legitimate stuff: order history, customer account details, inventory increase, and other important Magento assets. But there are more than 20 tables that do not make a lot of sense to keep around. Tables like technical logs regarding URLs, index_events, quote logs, and notification inbox junk. Truncating those will not hard your store in any way. Just make sure you either consult a knowledgeable developer or use a third-party extension which already has all the harmless database entries cleared for removal.
Abandon MySQL for a specialized database engine. Using MySQL is a time-honored tradition in a lot of projects. This might be fine in and of itself unless you encounter database performance challenges related to scale or peak usage management. Simply put, MySQL is not very good at dealing with them. Looking at the alternatives, there are two main competitors to MySQL: Percona and MariaDB. Percona is more focused on peak load and large datasets handling (so basically when you have a lot of products and highly distinctive seasonality). MariaDB is a good choice for working with multiple shards, advanced horizontal replication, or if you want a lot of database management features. Both databases have high profile fans such as Facebook and Netflix for Percona and Samsung and Red Hat for MariaDB.

3. Build and upload lighter files

Mobile users often lack the necessary bandwidth to quickly and reliably load everything your store has to offer. Some of them live in the countryside, others browse the web in crowded places where there’s not enough capability to serve everyone, others yet sport really old phones that can’t cope well with modern technology. Still, all of these people can convert to paying customers if you play your cards right.

And this is exactly why this battle for speed created a lot of interesting solutions in this area. All of them aim to reduce the amount of data users have to download and display on their devices. The dream is to let users see the store in less than one second, as Google recently stated. But is it possible? Let’s see what data reduction tricks are available for Magento stores.

Compress the files before you give them to the user. Gzip and other compression methods work well to reduce the amount of data you need to transfer from the server. It serves two purposes: mobile users on slow networks load pages faster and you as a store owner save on bandwidth costs.
Encode images to make them lighter. Process images using tinypng and tinyjpg services before uploading them to the server. In some cases the savings constitute up to 50% of the initial size.
Look into a decent Content Delivery Network. A good CDN can solve so many problems for you. From managing the cache expiration date better to creating multiple versions of the same file to serve the appropriately sized images to your mobile users – getting a good CDN is not a panacea but close enough. If you don’t have time for all the other fixes we have listed here but integrate a CDN – that’s a good decision. Just do your research to find the one that suits you best.

4. Use faster servers

We are all for saving money but hosting is not the right place to do that. Not for Magento 2, anyways. Magento demands a lot of resources and good knowledge of the server environment to work at the top of its performance capabilities. Our advice here is to forget cheap solutions out there and go straight for the middle.

Provide a sturdy hardware foundation. Working with Magento, it’s paramount to understand that not all optimizations in speed will come from coding efforts. There’s a whole layer of stuff that serves as a foundation on which everything else rests. We are talking about the hardware: actual servers and their supporting infrastructure that provide the necessary bandwidth and machine resources that make up the powerhouse of your store capabilities.

Cheaping out on the actual server hardware is not a good idea in Magento’s case. Magento is an extremely power-hungry platform that does not feel well in the constrictions of a budget server. The primary bottleneck is almost always the CPU followed closely by the RAM amount and storage device speed.

This is what you should aim for when we are talking about foot traffic for a medium store:

specialized Magento hosting is a must. Choose a VPS or a dedicated/cloud server,
3-4 Gb of RAM,
20-30 GB of SSD space,
a separate database server.

5. Work on proper server configuration

Fast servers that aren’t configured right are a waste of money. One more important thing to keep in mind. Don’t hope to find a good solution with a hosting provider who has no expertise in Magento hosting specifically.

You will need a team who have built and maintained Magento-optimized servers – because good server configuration will become the foundation of all your later optimization efforts. In addition to that, an experienced team will know how to help you and where to look if something goes terribly wrong.

However, if all your optimization strategies are similar, then what makes them different? Mobile and desktop platforms aren’t identical in any way visually, with the primary differences being how your customers interact with your e-commerce store pages, and the experience they expect when browsing pages.

Understanding mobile UI limitations: why screen size matters

Even though mobile devices are trending toward more substantial screens, they still offer significantly less screen real estate than the smallest desktop monitors. There are both advantages and disadvantages involved in screen size limitations on mobile devices like tablets and cellphones.

According to ux/ui consultants brisbane, you can optimize for speed on mobile devices by deferring content from loading immediately by avoiding displaying plenty of content on the first screen. Optimizing for portrait-mode browsing using smaller banners and product images is an ideal method for saving on bandwidth resources.

Other methods you can use to optimize for mobile include:

Input and Interface Differences – Users that need to type in specific searches and shipping information might find using your site to be a frustrating experience. Combine that with slow loading speeds, and there’s a significant chance that they’ll leave your site before completing their purchase.
Situational Use and Attention Spans – You need to account for the difference in user experience between using mobile and desktop. Mobile users can browse your store from anywhere, including the back of the Uber as they travel to their destination. As a result, you need to optimize to speed up the user experience before they move on from their browsing activities.
Desktop and Mobile Audiences – These audiences are different groups of users, with different browsing and shopping habits. However, we recommend that you optimize for mobile, as it will only enhance the desktop experience as well.
Bandwidth and CPU Usage – We already touched on how smartphones have far weaker processing power than desktop PCs. Therefore you need to optimize your site and pages to cater to fewer scripts, simple layouts, a lighter DOM structure, as well as using compressed image files to get the pages and website to work faster.

Is it a good idea to convert Magento stores to mobile-friendly apps?

This strategy might not be the most cost-effective solution for the optimization of your mobile performance. Most users will open less than 10 apps per day, and they don’t install any new apps. Therefore, what makes you think that they’ll download and install your new app?

Unless you’re a store on the level of Amazon or Alibaba, then it’s advisable to optimize for both mobile and desktop users.

And even these giants work hard to offer users as many opportunities to increase user engagement and improve the overall user experience.

In case of Alibaba, the PWA adoption helped them increase customer conversions 76% across all browsers and grow total user base by 14 to 30% (iOS and Android numbers respectively).

In most cases, mobile browsers are powerful enough to provide the same user experience as a native app, but with better affordability and a higher adoption rate.

Mobile optimizations

The majority of Magento optimizations will work on both desktop and mobile store versions. It’s important to note that there is very little difference in the fundamentals of mobile and PC performance.

Alibaba PWA almost completely mimics the desktop store. The team believes in creating the same user experience is the optimal way to success.

Any well-optimized online store will work efficiently and effectively on both of these platforms. However, you’ll see better performance on a desktop due to it being more of a capable device with higher processing power.

Things you need to account for in your optimization strategy

Make sure that you audit your mobile and desktop scores, accounting for any discrepancies. Take a look through Google’s suggestions and focus on making changes that have the most significant impact on creating your score.

Key areas to focus on include your contentful paint, path metrics, and interactive times. It’s vital to remember that Google PageSpeed Insights isn’t a tool for optimizing speed; it only offers you tips and suggestions for enhancing any performance issues on the frontend.

Focus on the performance of your mobile cart and checkout process

Check your analytics for sudden drops in user engagement such as abandoned carts. Reductions in your engagement rates are a clear sign that there are user and performance issues on your pages.

The cart and checkout pages are a common weak point across many mobile stores. Some of the common problems associated with drops in engagement include complex third-party extensions and CPU-heavy JS code.

In closing – Bring your ecommerce mobile strategy up to speed

Some ecommerce marketers might wonder if Magento offers mobile-friendly performance. Magento 2 mobile optimization strategies offer plenty of efficiency and utility for upgrading your site and its pages to mobile-friendly user experience.

Article contributed by: Nikita Rabykin

Nikita has been working with Magento stores for 7 years now. His special interests are mobile UI and UX challenges and Magento mobile optimization. Other than working hard on the next Magento challenge, you can find him taking part in local IT events or building 3D models for fun.