Since Magento 2 version released in 2015, ecommerce web owners have migrated their websites to Magento 2 to leverage its state-of-the-art features and the benefits of an early-adopter. By improving all errors in old version and adding more powerful features, Magento 2 allows business owners to build powerful and compelling online experiences for their customers resulting in better sales.

Although a lot of websites have migrated successfully, I found they are not really mobile friendly, it’s like web owners forget mobile users even they are large businesses. So in this post, I will contribute some tips to improve the performance of Magento 2 for mobile users:

1. Render Above the Fold Content

Above the fold content is what your customers will see first before scrolling down the webpage. The first impression is so important and keep in mind that you always optimize it follow these steps:

• Postpone the Loading and Execution of JavaScript Code: the content on web page will appear faster if you postpone the loading and execution of the JS code. How can you do? Move all the code to the bottom of the page. Or other solution is using available Magento 2 extension to complete.
• Isolate and Load Critical CSS First: The first thing is you need to identify which CSS is critical. Critical CSS should be a set of stylesheet and is only a portion of webshop’s CSS used to render the visible content. One recommendation for companies is composing a set of critical CSS for every page of the website, such as homepage, category, and checkout and inline it into the head section of respective pages.

2. Minimize loading time

• Compress The Web Pages With Gzip: Gzip will reduce the weight of the web page by 70% along with compressing the external scripts, fonts, CSS, and Java Scripts.
• Use CSS/JS Minification Feature: this feature is not provided in Magento old version until Magento 2 has been released. Magento 2 has three running modes – default, developer, and production and CSS/JS minification only works on the production mode.

You go to backend first

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

To enable minification, set production mode in the following manner:

php bin/magento deploy:mode:set production

The above-mentioned command should be run in the SSH terminal within the Magento root folder. If a company wants to find out the current mode, they should run the following command:

php bin/magento deploy:mode:show

3. Optimize the Product Images

Some websites upload really really large images and you might know that the amount of images in an ecommerce website is considerable. Therefore, make sure that any images you upload were already compressed.

4. Make Faster and Secure Browsing With HTTP/2

Magento 2 is that it can co-exist with HTTP/2 out-of-the-box, but it will require prerequisites below:

• Your e-store pages should be served via SSL.
• Your hosting server should support HTTP/2.

The last words,

Over 80% of total online customers use mobile devices and this numbers will continue to increase in the following years. Thus, providing mobile-friendly website would be the key for a better shopping experience and better sale revenue.