How to Enhance Magento 2 Performance for Mobile Users

DZone 's Guide to

How to Enhance Magento 2 Performance for Mobile Users

We discuss minimizing page weight, considering Time to First Byte (TTFB) optimization, and making browsing secure and faster with HTTP/2.

· Mobile Zone ·
Free Resource

As Magento released the new Magento 2 platform in 2015, many of our e-commerce clients wanted to undertake Magento 2 migration in order to leverage its out-of-the-box capabilities and the early-adopter advantage. Magento 2 enabled businesses to build powerful and compelling online experiences for their customers and drive sales.

However, some of our clients who served audiences dealing with intermittent cellular connectivity and low-end mobile devices came back to us with the challenge of poor performance of their Magento 2 e-store on mobile devices.

In today’s post, we would like to share with you the proven tips given by our team of Magento Certified Solution Specialists which enabled our clients to deliver an amazing mobile user experience to their Magento 2 webshop customers.

Optimize the Web Page to Render Above the Fold Content First

In case you aren't familiar with the phrase 'above the fold content,' it is the visible content that appears before you scroll down the web page.

Since this is what users see first, it is crucial to load and render this first. The following are few techniques to do so. 

Postpone the Loading and Execution of JavaScript Code

To make the content on your web page appear faster, you would need to postpone the loading and execution of JS code.

This technique is also known as deferring the parsing of JS code and to achieve that you have to move all the JS code to the bottom of the page. The good thing about Magento 2 is that you have certain extensions available to do this for you.

Isolate and Load Critical CSS First

Critical CSS, a set of stylesheets, is only a portion of your webshop’s CSS and is used to render the visible content.

You should isolate and load critical CSS first to render the above the fold content faster.

Although you can find online tools to extract the critical CSS automatically, our Magento 2 developers recommend composing a set of critical CSS for each of the different pages, such as homepage, category, checkout, etc. and inline it into the head section of respective pages.

Minimize Page Weight as Much as Possible

The page weight could be a significant performance factor when it comes to viewing an e-commerce website on a mobile device with low bandwidth. So how do you make your web page lighter?

Here are some tips. 

Compress Your Web Pages With Gzip

With Gzip, not only you can reduce your page size by almost 70 percent but the external scripts, fonts, CSS, and JS can also be compressed.

You need to get in touch with your hosting partner to enable Gzip for your e-store. You can rely on Google PageSpeed Insights, an online tool, to check if Gzip is on for your Magento 2 store.

Leverage the CSS/JS Minification Feature

Magento 2 comes with a CSS/JS minification feature which was lacking in Magento 1. However, you need to know that Magento 2 has three running modes – default, developer, and production.

Keep in mind that the JS/CSS minification feature works only in production mode.

Image title

First of all, let’s go to the backend menu:

Stores > Configuration > Advanced > Developer (this menu is visible only in developer mode).

Now, to enable minification, you would need to set your app production mode in the following manner:

php bin/magento deploy:mode:set production 

The above command should be run in the SSH terminal within the Magento root folder. If you want to find out the current mode, run the following command:

php bin/magento deploy:mode:show

Optimize Product Images

It is obvious that an e-commerce website would have plenty of product images. In order to maintain the lowest possible page weight, it is important to keep the images compressed and optimized.

If budget is not a constraint, we recommend you sign up with any content delivery network (CDN) as they support image optimization.

Consider Time to First Byte (TTFB) Optimization

Time to first byte (TTFB) is the time a browser needs to wait prior to getting a response from a website’s server. Optimal TTFB is around 500 ms.

Even though Magento has built-in full page cache functionality, pages like cart, checkout, and customer area pages cannot make the most of it.

Therefore, you can adopt the following three techniques to optimize server response time.

Perform a Third-Party Modules Audit

Ask your Magento 2 developer to perform a third-party modules audit.

Once you detect a plugin is slow, either get in touch with the vendor for a patch or switch to an alternative extension.

Run Magento 2 Profiler to Detect the Root Cause for TTFB

You can dig deeper into the Magento 2 internals to find out the root cause of poor server response time. For that, you could use a profiler, a special program that shows you the time taken for a code block to execute.

Upgrade Hosting Server

You will also need to figure out if it’s time to upgrade your hosting plan. Our developers suggest performing a simple test, i.e., install a fresh Magento 2 website on your current server.

If the speed of your fresh site is faster than your live site then you are using the right hosting plan; you will need to tweak your live Magento 2 store. Otherwise, you'll need to upgrade your hosting server.

Make Browsing Secure and Faster With HTTP/2

The good thing about Magento 2 is that it can co-exist with HTTP/2 out-of-the-box, however, with the following prerequisites:

  • Your e-store pages should be served via SSL.

  • Your hosting server should support HTTP/2.

You can also do some research to find out which Magento 2 extensions that provide server pushes are suitable for your e-commerce store.

Disable JS Bundling

Magento 2 uses JavaScript bundling features to reduce the number of HTTP requests made by your browser to display a web page.

To disable your Magento 2 store to group JS resources, you have to go to the backend menu, Stores > Configuration > Advanced > Developer, and configure as follows:

Image title

If you are using HTTP/2 then you need not disable the JS bundling feature; if you are still using HTTP/1 then this tweak is a must.

Summing Up

I hope these effective tips enable you to deliver an intuitive mobile experience to your Magento 2 store customers and move your business forward.

Are you aware of any other technique to enhance mobile experience of Magento 2 store? It would be great if you share them with us and our readers.

We would love to hear from you; you can initiate a conversation by leaving your comments below.

magento 2, mobile web performance, performance, web application performance

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}