When Magento 2 was first rolled out, it was welcomed with much enthusiasm by merchants and developers alike. Everyone rushed to migrate to the new platform, but the process wasn’t a smooth one for everyone. One of the most commonly encountered issues was that many eCommerce users were experiencing issues with poor Magento 2 performance on mobile devices.
Factors such as low quality devices, poor connectivity, a poor mobile signal and others can cause an otherwise robust, functional online shop to function less than optimally. Because of this, we came up with some easy tips for enhancing Magento 2 to perform better on mobile. Using these methods will help Magento 2 shops run faster and with more reliability and should result in better traffic and more revenue for eCommerce websites running on this excellent platform.
Minimise Your Page Weight
Slow-loading websites and pages that take ages to load on mobile (and then fail to load properly) can often be avoided by trying to make your pages less heavy. Minimising the page weight can be done in several ways, and we suggest you combine them all for the best effects:
Compress your pages
Gzip compression is an excellent and easy way to compress your pages and reduce your site load. If you’re not sure if gzip is already in use on your store, use Google PageSpeed Insights, an excellent free online tool for speed optimization.
Page compression with gzip can reduce your page weight by almost 70%. The best thing about it is that it also compresses your external scripts, your CSS, JS, and fonts.
Minify the CSS/JS
One of the many great things that came with Magento 2 that was not available in Magento 1 is the excellent CSS/JS minification feature. If you haven’t been taking advantage of this feature, now is definitely the time. Bear in mind, though, that this feature is only available in Magento 2 production mode, not in the other two (Default and Developer) modes.
Optimise Your Images
High-resolution images are known for weighing websites down. To take some load off, consider optimising the images by compressing them. Of course, don’t overdo it, since you still want your product images to look great.
Also, if your budget allows, consider signing up for CDN (content delivery network) services since, in most cases, these support image optimisation.
Optimise Your “Above the Fold” Page Content
“Above the fold” content is basically the part of the page that is visible when the page first loads, before the user scrolls down. Websites with content-rich pages that can be scrolled for a while work better if the “above the fold” content loads first, so the user doesn’t have to wait for the entire page to load in order to see the full page content.
For eCommerce websites, it is highly recommended to make sure that this particular content gets rendered first. Here are a few things you can do to assure that:
Postpone the JS code
The entire process of parsing and running JavaScript is known to considerably slow down page loading time. Postponing the JS code, also known as “deferring the parsing of JavaScript code,” is one of the most efficient methods of assuring the above the fold content gets loaded first. To make it happen, you essentially need to move all your JS content to the bottom of the page. If you’re not sure how to go about this, you’ll be pleased to hear there are extensions for Magento 2 created specifically for this.
Make Critical CSS Load First
Critical CSS is a collection of stylesheets that comprises only one part of your site’s total CSS, and its purpose is to display the visible content. Logically, you want them to load first, so that your “above the fold” content can be served to the visitors immediately.
As for how to achieve this, you have two options:
- Use one of the available extensions for Magento 2.
- Using help of an experienced agency to create a set of critical CSS for each page separately (homepage, checkout, category, etc.)
2buy1click has helped a number of clients build and maintain excellent mobile experience for their Magento 2 store customers. This has significantly improved the quality of their service and moved business forward. Contact us now to improve your store Mobile UX.
Use HTTP/2 for Better Site Performance
Your website can load much faster and can provide more security for your users if you use the potential that comes with HTTP/2.
HTTP/2 is a relatively new protocol based on Google’s SPDY. It has implemented a few key optimizations to data transfer that makes HTTP/2 significantly faster. For Magento websites, it has the ability to compress headers, use multiple server requests at the same time, and work in parallel on a single connection.
Many Magento 2 users doubt that the platform is compatible with HTTP/2 but it is, under these two conditions:
- your server supports HTTP/2. This is true in most cases as 99% of all web hosting servers (Apache 2.4.17+, Nginx 1.9.5+, more here) will support HTTP/2 by default. The same goes for CDN providers (Cloudflare, MaxCDN, KeyCDN, etc.))
- your pages are served through SSL
TTFB Optimization
TTFB (Time to First Byte) refers to the amount of time that passes before the browser gets a response from the site server. Ideally, it should be about 500 ms.
If your TTFB is slower than that, there are things you can do, including:
- Audit your third-party modules (i.e. check all your extensions and if one of them is slowing the shop down, ask the developer for a patch or switch to an alternative).
- Use a Magento 2 profiler to dig deeper into the shop’s structure in search for the cause of the site’s poor response time.
- Consider upgrading to a better hosting plan. You can run a test to see if it’s time to change plans: install a fresh site onto your existing server, and if the fresh site is faster, you can stick with your current plan but tweak the shop a bit, otherwise, it’s time to upgrade.
Stop Bundling Your JavaScript
Magento 2 comes with bundling features for JavaScript that group JS together in order to reduce the number of HTTP requests needed to load the pages. These features can easily be disabled in order to optimize the performance of your Magento 2 web store for mobile.
