Since Magento 2 version released in 2015, e-commerce 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 the 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 keeps in mind that you always optimize it follow these steps:
- 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 the 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 check out 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 work on the production model.
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, it 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 e-commerce 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 these numbers will continue to increase in the following years. Thus, providing a mobile-friendly website would be the key for a better shopping experience and better sale revenue.