Improving Magento 2 speed: the ultimate guide (2020 update)

A slow webshop is outdated. Many studies have shown that the slower the webshop, the lower the conversion. Also search engines, especially Google, are increasingly punishing slow websites. In short, every reason to go for ultimate speed performance.

Especially when a lot of customization has been added to the webshop and the maintainability of the code is also at stake, both the frontend and the backend can sometimes feel a bit slow.

Of course, the website visitor, you as the owner and developers don’t like to see this and that’s why we wrote this extensive guide to improve the speed of your Magento 2 webshop.

This guide is meant to get a super-fast Magento 2 webshop and focuses on the entire application. With the objective not only getting a fast frontend, but also a fast backend.

Hipex is born from a Magento development agency and we have built, maintained and further developed webshops for years now. Our core value, next to security, has always been performance.

We’d like to provide you with our knowledge to make your Magento webshop even faster.

Need help?

This guide is set up in such a way that you can do a lot yourself and, where necessary, easily get help from a developer.

Magento speed optimizations which will be covered

In this guide we will cover 14 optimization points:

1. Update Magento 2 to the latest version
2. Enable Lazy Loading for images
3. Use a Content Delivery Network (CDN)
4. Caching Options
5. Remove unused plugins
6. Choose for lightning-fast web hosting
7. Make use of a fast search feature
8. Make use of Varnish Cache
9. Update indexes
10. Make use of GZIP Compression
11. Make use of HTTP/2
12. Never use JS-combining
13. Run your shop in production modus
14. Optimize your CSS

Let’s get started 😃

1. Update Magento 2 to the latest version

If you are running on an older version of Magento 2, you may not benefit from optimizations that Magento and/or the community have implemented in the latest update.

A lot of attention is paid to the speed of Magento. It often includes performance optimizations that provide direct speed gains for both the frontend and the backend.

Please note: don’t just update. Usually, Magento updates are not being executed flawless and are not implemented with just a push on the button. So, make sure you have a backup and test the update first on a test environment, for example.

It is also beneficial to have a Magento developer who can support you when it is needed to quickly solve some issues. Hipex can help you with this, as we collaborate with some renowned agencies.

We’d like to get you in touch with those agencies to ensure you can engage one or more good developers. Good to know about this is Hipex executes an audit and will only accept professional agencies.

In case an agency does not comply with the requirements of Hipex, that agency will not become an official partner of Hipex.

Some cases that have been improved in recent updates:

• Response time of the catalog, search and advanced search pages have been improved significantly
• optimization of product page gallery load
• Improved page view due to delayed loading and parsing JavaScript

All other optimizations can be found on Magento’s website.

2. Enable Lazy Loading for images

Generally, images have a big impact on the speed of your website. Loading too many images on a page at once does not only have a negative impact on the speed, but also on your page speed scores.

A good practice for not loading all those images at the same time is: Lazy Loading

With Lazy Loading you ensure images will be loaded only when they are needed, so when they come into view. It means the browser does not attempt to load the page fully in one time, but prioritizes loading the visible content.

As the user scrolls to the bottom of the page, new content loads along the way. First, Lazy Loading shows a lower resolution image or a placeholder image, then it instantly transfers to the high-quality source image,

While the user scrolls below, new content will be loaded. First, Lazy Loading shows low-resolution images with a temporary designation, after which directly will be transferred to high-quality images.

Bron: Giphy.com

To use Lazy Loading, you can ask for help from a developer or make use of a (free) extension that will handle it for you.

3. Use a Content Delivery Network (CDN)

A content delivery network (CDN) refers to a geographically dispersed group of servers that collaborate to provide fast delivery of online content.

A CDN allows rapid transfers of resources required to load content like HTML pages, javascript files, style sheets, images and videos (source: Cloudflare).

A properly configured CDN can help websites to protect them against common malicious attacks, for example, DDoS attacks.

Using a CDN helps to improve the loading speed of pages of your Magento shop, and it reduces the bandwidth-consumption at the same time. A CDN has the most effect on performance if you really get visitors from various countries to your website.

We notice many web shops make use of Cloudflare's CDN. So, take a quick look at Cloudflare’s website!

4. Caching options

Of course, a fast webshop requires well-configured caching options. One way to optimize this is through Nginx configurations.

For example, you can set how long the cache of a certain file type may be stored.

At Hipex, the expiration time of static files is already set optimally by default.

Below is a list of extensions with the corresponding expiration time:

Are you already interested in further optimizations? Please get in contact with us.

5. Remove unused plugins

If your webshop already exists for a while now or, for example, you do not have access to a good developer, it may be that your Magento webshop is provided with some useful plugins.

Of course, it is nice these plugins are available and you do not have to hire a developer for many extra functionalities to improve your webshop functionally.

However, there is also a disadvantage of installing plugins, as they often harm the performance of your webshop.

Concerning plugins, we think that less is more. The more functionality a plugin offers, the bigger the chance of performance issues. Decide which plugins you really need, but not more than that.

So, check regularly which plugins you still use and whether they can be replaced by a custom code or another optimization.

6. Choose lightning-fast Magento web hosting

A low-impact way to improve the speed of your Magento webshop is by choosing well-optimized Magento hosting.

The offer is big, but not every party offers Magento optimized hosting.

There are many different solutions available, varying from large to small and it is important to choose the right package.

For your Magento webshop, good hosting is necessary to offer your users a good experience. In addition, it is important to handle several backend processes faster.

Therefore, pay attention to the available resources when selecting the right hosting plan. The main resources are memory, CPU and storage capacity.

In addition, it is important to select a host where you not only get a fast connection, but also high-security standards and good support in case of downtime.

More things you have to pay attention to when choosing Magento hosting, we explain inthis article.

7. Make use of a fast search engine

For online stores, the search functionality is often one of the main functionalities in the battle for a high conversion. A fast search engine is a must-have to make this happen.

We do not recommend using the search feature of Magento or database (MySQL) related alternatives, as there are better alternatives available.

A well-known alternative is the from the Netherlands originated ElasticSearch.

Another very extensive search functionality you can use is Tweakwise. Tweakwise Navigator is a tool created for e-commerce managers or webshop owners who want to have control over the ranking, searching, navigation and filtering within their webshop.

Tweakwise can act on the background of every webshop and is 'platform-independent'. The most beautiful thing is, there is no technical knowledge needed for maintaining Tweakwise, which makes the entry-level relatively low.

Tweakwise is really good, but is also relatively expensive compared to ElasticSearch. So, investigate which search functionality you want to use and, if necessary, ask us for substantive advice

8. Make use of Varnish Cache

Caching is a commonly used method to improve the speed of websites and webshops. So, the question is not whether or not to make use of caching, but what caching method you are going to use.

For Magento, we would recommend making use of Varnish Caching.

Varnish is a reverse proxy that ensures static pages are cached.

We offer the possibility to enable Varnish Cache on the Hipex servers, without having the need to set up an external authority. It saves costs and reduces latency.

In addition, Hipex also offers full flexibility in configuration. For example, do you want to reserve 6GB for Varnish with a dedicated or cluster environment? In most cases, this is even possible without an upgrade.

9. Update indexes

For Magento 2, reindexing products and categories will be done automatically when updating a product or category.

The problem of reindexing is that it makes the environment significantly slower at the time it happens.

Instead of letting Magento reindex it during an update, you better do this yourself manually at a time you choose.

You can do this via the menu system and then go to index Management.

Updating according to this schedule is a good option for the performance. It is in contrast to updating the reindex on save with every product update.

In this case, choose for ‘Update by Schedule’.

Now you have control over when you update your Magento index. It is wise to automate this process, for example via a cron job. But now, you choose the day and time yourself, and so update it when you have few visitors in your online store.

Updating according to this schedule is a good option for the performance. It is in contrast to updating the reindex on save with every product update.

In this case, choose for ‘Update by Schedule’.

Now you have control over when you update your Magento index. It is wise to automate this process, for example via a cron job. But now, you choose the day and time yourself, and so update it when you have few visitors in your online store.

10. Make use of Brotli Compression

The bigger the web page is, the more time it will take to load. One of the possible ways to lighten the size of your web page is to switch on Brotli and Gzip compression.

With the compression algorithm, web pages will be compressed before they are sent to the browser. It reduces the transfer time drastically, because the files are much smaller.

The reason compression works well is because CSS files and HTML files use a lot of repeating texts and have many blank spaces. Because Brotli comprises frequently-used character strings, it can reduce the size of pages and style sheets up to 70%.

Brotli and Gzip must be enabled on the web server, which is fairly simple to do. Of course, we will arrange that for Hipex clients by default.

If you are not a Hipex customer, ask your hosting provider what the possibilities are.

Because Brotli is not supported by all browsers yet, you should provisionally make sure that you use Brotli and Gzip in combination.

11. Make use of HTTP/2

Although HTTP/2 has become the standard, some older websites do still not run on this new protocol.

If HTTP/2 is enabled by your hoster and your shop has an SSL connection, your shop will automatically become faster. This allows you to achieve speed wins up to 15% in comparison to the old HTTP.

HTTP/2 must be covered by all servers and networks. Do you doubt if this is enabled for your webshop? Ask your hoster for more information. Of course, Hipex customers benefit by default from the HTTP/2 protocol in combination with an optional free SSL certificate.

12. Never use JS-combining

In Magento 2, you can enable JS-bundling. This special feature of Magento groups JavaScript files to reduce the number of HTTP requests.

This is a useful feature if you still run on HTTP-version 1, but it doesn’t have any value in case you already run on HTTP/2 (what we recommend you to run on anyway).

Another reason for not enabling this feature is that all JS files will be merged into one large file. Loading one big file has a negative impact on your performance.

So, don’t use JS bundling, but make sure you use HTTP/2 with Brotli and, for example, a CDN as described.

You can check whether your JS bundling is enabled or not, by going to the backend menu: STORES > CONFIGURATION > ADVANCED > DEVELOPER.

13. Run your shop in production modus

You can run your Magento webshops in 3 different ways:

Standard (default) modus

This is the default mode when having Magento installed. You can use this modus when you want to configure and test your webshop before going live.

Developer modus

If you want to have extensive logging, you want to search for bugs and execute more in-depth configurations in your Magento store.

Production modus

You use this modus to achieve optimized performance. You want to use this by default and to serve out to your visitors. It offers the best user experience for your visitors.

The first and second modes are both quite slow (the standard and developer modus). Make sure your website is set in the production modus. It seems to be obvious, but we see many (smaller) Magento shops struggle with this.

You can turn your Magento into production modus by entering the following command:

php bin/magento deploy:mode:set production

14. Optimize your CSS

When you optimize your CSS you ensure small performance optimizations.

These settings can be made in the backend of Magento. Don’t forget (before doing) to put Magento into Developer Modus (and switch back to production modus when finished 😉).

Execute the following command via SSH to switch Magento to the developer mode.

php bin/magento deploy:mode:set developer

In case your shop is in developer mode, go to Stores -> Configuration -> Advanced -> Developer and scroll to your CSS settings:

Turn both dropdown options to yes, that’s the way you can ensure the CSS files are reduced in size and merged.

Save your settings and switch back to the production mode.

Re-test your Magento webshop

When some or all recommendations are implemented, it is very interesting to see the effect of those implementations on the performance of your Magento shop.

So, re-test your webshop with the same tools you used for the baseline measurement and you will see you have made performance win.

There are a lot of things you can do. For example, you can work in even more detail by optimizing your code, therefore a developer is needed who knows how to deal with it.

According to us, every Magento shop has to have performance that goes through the roof and that is why we offer the perfect solution regarding hosting. Don’t save money on this, because a good partner as a web hoster will probably provide you with the fastest webshop possible.