Improve the Performance of Your Magento 2 Shop in Four Steps
The number of online sales is increasing explosively this year, partly due to the coronavirus. As more and more companies are embracing e-commerce, online product offering is greater than ever. To distinguish yourself online from the growing number of competitors, it is more important than ever that your shop performs optimally.
This article will tell you about the four steps we have defined to get your Magento 2 webshop's maximum performance. These optimisations range in complexity from simple adjustments to quickly see improvements to technical changes that get the most out of every Magento 2 shop.
What Is Performance?
Performance is a common term that can have multiple meanings, so it is essential to define it first. We distinguish between two types of performance: PageSpeed performance and emotional performance. While these two overlap, it is important to know the distinction.
PageSpeed performance is the score that Google assigns to your webshop page and partly determines the page rank assigned to a webshop (measured in a tool such as Google PageSpeed Insights). Google will give priority to the shop with the highest score at two comparable webshops. Google regularly reviews these measurements, so it is essential to keep a close eye on your score.
Emotional performance is the speed that a customer experiences during a visit to a webshop. Google uses its measurement of emotional performance as one of the metrics to determine the PageSpeed score. Keep in mind: Google is not perfect. An intuitively fast webshop can have a relatively poor Google PageSpeed score.
The Influence of Budget on the Performance of Your Shop
It is theoretically possible to have every page load immediately and get a PageSpeed score of 100, but you will have to make a considerable investment. The more money you invest in development time and the required features, the higher your PageSpeed score will be.
It is important to find the right balance between the measured performance in Google PageSpeed, analyse the emotional performance, and optimise your shop based on your budget.
Step 1: Choose the Right Hosting Partner
The first step in improving performance is to find the right hosting as the foundation for a fast webshop. Hypernode offers us a hosting environment that is set up out-of-the-box to keep a Magento 2 shop running as well as possible and the tools and support we need to find the perfect balance in performance for all our webshops.
The only choice we still have to make at the project level relates to the most suitable hosting package. Even that, we rarely have to worry about it because Hypernode makes it easy to upgrade or downgrade a package at any time. The combination of tools on the Hypernode and Magereport Premium offers us the tools to quickly determine whether a situation requires it. When we see peak traffic, we can downgrade the relevant shop again after a few days, and our customers only pay for what they have used.
Important: To follow all steps in this article, it is vital to have a hosting environment with Redis, Varnish and Blackfire. An image optimiser is a plus. Hypernode offers this tool as standard on its platform.
Step 2: Analyse and Optimise Your Magento Installation
A standard "bare" Magento 2 installation loads hundreds of Javascript files, a handful of CSS files and often dozens of images. It takes time to download, initialise and display all those files. Every extra plugin, module or custom addition increases this, and all of that affects the performance.
In most cases, a few simple tweaks in Magento 2 can lead to significant improvements.
This step of the optimisation process covers Google PageSpeed (and its sister project Google Lighthouse ). These tools help us to detect which images are larger than necessary and which Javascripts are incorrectly loaded. In addition, they provide insight into the impact of the changes made on performance. Are you making changes? Then take a number of before and after measurements to get a good picture of the improvements.
Make Sure Magento and Associated Modules Are up to Date
In most cases, each new version of Magento means a performance improvement. The size of this improvement differs per update. Although this article focuses on the webshop's performance at the front, things like the admin environment and associated processes are also improved and accelerated at the back. When the back-end of your installation is fast, more space on the server will be available for your visitors.
Disable Unnecessary Modules
Any reputable magento 2 agency will tell you that the installation contains standard modules and features from Magento or third parties that are not necessarily required. If you do not or hardly use these functions, you can see whether disabling them leads to improved performance. Do you not miss the functionality of the module or feature? Then switch it off by default.
Configure Magento 2 According to Best Practices
Magento's documentation contains an entire section on best practices for optimal performance. Most of the issues in this documentation will be discussed in the following sections. However, we can already optimally configure your Magento configuration according to this Magento documentation. In our opinion, there are some comments and remarks on this documentation:
A pitfall is the section on 'Client side optimisation settings'. These settings can only be adjusted via the developer mode or via the command line. Activating the settings results in more unsatisfactory performance, in our opinion.
We do not prefer activating Javascript Bundling in a standard Magento installation. The bundling implementation as conceived by Magento itself is at best a fallback and realistically not very good. We recommend experimenting with the options merge CSS, merge JS, and Minify HTML. Depending on your hosting and your shop, this can have a good or bad effect on the overall performance.
We recommend activating the Minify CSS and Minify JS settings. Because the webshop must be measured in Production mode, we recommend that you only activate this mode after these settings have been adjusted. Always make sure to compare the performance of your shop before and after the changes.
Optimise the images in your shop
Images make a web page attractive, but they can also be the most considerable slowing down factor. The file size of images is often much larger than necessary. A good image optimisation tool can make images up to 80% smaller, with no visible difference in quality. This automatically means that the visitor has to download 80% less data, making loading faster. In addition, optimising images has the additional advantage that the disk space on the server is used less so that perhaps your shop can run on a smaller hosting package.
Of course, this 80% is a best-case scenario; the actual savings will depend on many factors such as the type of images used (some images can be compressed more easily than others) and the amount of compression applied to the images.
Image resizing can be done manually using images with a small file size, but you can also use tools such as the hypernode image optimiser. You could also choose a different format. The vast majority of images currently used on the web are JPEG or PNG images. Google has had its own WebP since 2010, which is up to 30% smaller in JPEG or PNG images. Important detail: Internet Explorer does not support WebP, and it is not yet possible to upload WebP without extra modules in Magento 2. We expect that support for WebP images will grow.
Step 3: Use Caching
Caching a web page is the temporary storage of a page so that the page is immediately loaded during the next page visit. Magento 2 has many levels and variants of caching. We recommend that you activate most of the caching functions, but this may require some additional configuration in some cases.
Fortunately, Hypernode has extensive guides for configuring Redis (skip the step to configure Redis as a Full Page Cache, use Varnish for this) and configuring Varnish. Although these tools can lead to significant performance gains, there are several catches:
Data leaks: Varnish and Redis store the results of requests and show them to the next visitor who makes the same request. When a theme or plugin is poorly built, it could be that a visitor is presented with the wrong data.
Missed cache: to prevent such data leaks, a theme or plugin may indicate that certain blocks should never be cached. The danger here is that a wrong configuration can ensure that all, or a large part of, the pages are not cached at all. That can negate the performance benefits of caching.
Not enough space: all data that is cached is kept in the memory of the server.
The first request: a web page is not cached indefinitely. For example, you can clear the cache of a page yourself when you have made changes. When a page is not cached, the next visitor to that page will have the same experience as when no cache is activated. All this can be overcome by using a cache warmer. This is a tool that visits all or a subset of the pages on your website and ensures that they are cached without a visitor having visited them first.
Step 4: Changes to the Code
If the previous optimisations have not delivered the hoped-for performance improvements, there is the option to change the code. However, this often requires a specialist. In our experience, most code performance improvements fall into one of the following categories:
Poorly Performing Plugins and Customisation
Plugins and customisation are rarely developed with an eye for the performance of your Magento 2 shop. But these functionalities can offer added value. That is why it is important to see whether you can speed up the performance of customisation and whether there might be a better working alternative.
Great Plugins
Many plugins are crammed with features and options to ensure that as many people as possible purchase the plugin. Yet we often see that they are only used for a few things in practice, while the plugin must be loaded in its entirety for each visitor. It is important to look at alternatives with compact customisation that contain the same functionalities without significant impact on performance.
Optimised Theme
The theme in Magento is the source of the performance. A webshop can have good hosting, few superfluous plugins and good caching: if the theme is poorly put together, the performance will never be good. The same applies the other way round. A good theme can minimise the performance impact of a flawed system.
Resources:
Last updated