Is your Magento 2 store loading under 3 seconds? If ‘No’, the following information will be of help.

Magento is a powerhouse with scalability, customizability and integration capabilities that any eCommerce business would love to leverage. These capabilities come packed with equally strong challenges in terms of performance. So, make performance optimization a key phase of your Magento 2 store development.

This blog brings you the best practices and optimization tips which can better your eCommerce store’s performance.

Load ‘Above-the-Fold’ contents first

‘Above-the-Fold’ is the content which users get to see first. It is the first part of the page after which a user scrolls to see the remaining contents. This can be done by following the techniques given below:

Refrain JS from loading upfront

Contents in a web page must be given priority over the JS code. When a web page’s above-the-fold contents loads, the JS code also loads simultaneously adding more time to the load time.

Refraining JS from loading upfront means deferring the parsing of JavaScript code. This can be done by moving JavaScript code to the bottom of the page and can be achieved with the help of third-party extensions like Defer JS loading.

Make page size as small as possible

A heavy page laden with too many elements can slow down the page loading speed. Though it is encouraging that a majority of shoppers prefer mobile over desktops, connectivity strength is something not great all the time. So here is how you can do this:

Gzip Compression

Gzip helps in decreasing the page to nearly one-fourth of its actual size. With Gzip, you’ll be able to compress external scripts like CSS, Javascript, font. Ask your hosting support team to get this done. Perform a check using Google PageSpeed Insights tool to find whether Gzip is on for your store.

Use CSS/JS minification

Magento 2, by default, has the provision to perform CSS/JS minification which can contribute towards reducing page weight.

So, you can do it this way:

In the Magento 2 backend panel, go to Stores > Configuration > Advanced > Developer and enable minification.

Note: For Magento versions 2.2+, this menu is visible on in Developer mode.

Magento has three running modes namely, default, developer and production. The Production mode is the fastest one and minification works only in this mode.

First, find out the current mode by running the following command:

php bin/magento deploy:mode:show

To set your app in production mode and to enable minification, run the command given below in the SSH terminal inside Magento root folder.

php bin/magento deploy:mode:set production

Optimize Images

Images are must-have assets for eCommerce businesses but optimizing and compressing images is of utmost importance as it has a direct effect on page weight.

Your eCommerce store’s CDN support team can help with this. Else, you can go for Google PageSpeed server extension.

Capitalize on the capabilities of HTTP ver.2

HTTP/2.0 is the new gen hypertext protocol. It’s bundled with features mainly focused on making browsing faster and secure.

When using HTTP/2.0, the browser need not keep going back to the server to fetch every file. Instead, all requests and files are fetched and transferred at once thus avoiding heavy operations.

Yet another noteworthy advantage is that HTTP/2 helps servers in pushing the resources before a browser (client) requests for it which significantly improves browsing speed.

Here are the conditions required for Magento 2 to work with HTTP/2.0
  • – All pages should be served through SSL.
  • – The server should support HTTP/2.

You can contact your hosting team to assist in setting up HTTP/2.0 and make use of extensions to introduce server push to your Magento 2 store.

JS Bundling

JS Bundling is a default feature available in Magento 2. Magento 2 reduces the number of HTTP requests a browser makes to display a web page. In case you use HTTP/2.0 this is not at all required.

Even if you are using HTTP/1.1, JS bundling is not required because it packs all the JavaScript in one file. Certain parts of the JS may not be required but it will be running as it is bundled into one package. This will have a great effect in slowing down page loading speed in case of slow internet connectivity.

To disable JS Bundling go to Stores > Configuration > Advanced > Developer:

Optimize Time to First Byte (TTFB)

TTFB is the time taken by a client browser to get a response from a server.

TFFB optimization is mainly for pages like cart, checkout, customer profiles which cannot leverage the advantage of Magento 2’s built-in full page cache. TFFB is not required for the rest of the pages, which are more likely to be cached.

These following are the ways to improve server response time:

Audit third-party extensions

The third-party extensions you use for your store might be a cause for deteriorating page speed. Find the list of extensions used.

Except for the core Magento extensions, remove the rest of the extensions and perform a speed test to detect the plugins that are slow. You can either go for an alternative replacement or enhance the extension contacting its vendor.

Magento 2 Profiler check

Find the origin of the cause that’s creating the slowness by running a check using the Magento 2 profiler. Magento 2 profiler will let you know which part of your code is causing trouble.

Upgrade hosting plan

The final thing you can do is upgrade your hosting plan. You can get to know whether you need an upgrade in your hosting or not by performing a comparative speed test between your live site and a fresh Magento 2 version in your existing server.

If the new Magento 2 copy is faster than your live site, your current setup is fine. If the result is the other way round, you need to reach out to your hosting team to get it upgraded.

Varnish for full page caching

Varnish cache can accelerate your mobile web loading speed more than 25x and this is how it does.

Varnish cache is a fast cache technology that acts as a temporary storage facility that makes a copy of the web pages of your eCommerce store. When a request is sent to render a web page, the request is directed to the Varnish server first.

It takes only a few milliseconds to render pages from the Varnish server which reduces the load time significantly (time differs based on the hardware capability). Varnish cache can be used as a failover system, caching reverse HTTP proxy, or load balancer.

Using Varnish cache you can reduce the number of web servers you are depending on to support your website and accelerate response time.

Redis for Session Store and Database caching

To know how important Redis is, let’s understand the key distinguishing factors between Session store and Database caching.

Database Caching – Database caching is required in order to reduce the server load for dynamic websites, mainly eCommerce stores.

Session-store – A session begins when a user signs in and ends when signs out. ‘Session Store’ is the database that records all the session-related data during this period. The information recorded during such user-session would be profile information, recommendations, targeted promotions and discounts.

Redis is an in-memory database that can be used for database caching and session store scenarios. Redis, as a cache, provides more control over database caching as its data eviction mechanism can be configured to create space automatically for new data by deleting old ones.

With Redis, you can choose from 6 different eviction scenarios which allow you to evict data proactively or only when additional space is needed. With support from your development team, Redis can be optimized to serve both purposes.

PWA – Progressive Web Apps

PWAs (Progressive Web Apps) are apps that replicate a mobile app kind of experience but are actually mobile web pages which bring in the experience that a dedicated mobile app can provide.

Magento has rolled out its own PWA Studio for developers (from version 2.3) to build faster loading mobile web pages for eCommerce stores. PWAs can provide a consistent experience across all customer touchpoints on mobile as they are cross-device and cross-browser compatible.

Apart from quick loading speed, it also bundles advantages like quick share, ease in updating, location-based push notifications, better search engine indexing and online discoverability.

Closing lines

Well, that completes the list for Magento 2 performance optimization for mobile. Remember, these are the basic optimization tips to adhere. There are a lot more techniques which might come in handy as well. We would advise a thorough website audit to figure out other possible areas to optimize the performance of your Magento 2 store.

Want to add something more to the list? Feel free to share the knowledge. Your ideas would help us improve.