You know the drill, page speed greatly affects the success of a store, as stores with slow performance are bound to have lower conversion rates and lose out to their competitors as a result. And since we regularly do speed optimization for our clients, we feel that it’s in our competence to provide you with up-to-date techniques on speed optimization in Magento 2.
Speed optimization and why it’s hard to get it right
Obviously, if speed optimization in Magento 2 websites was simply installing and enabling extensions, you wouldn’t be finding yourself struggling with performance optimization. It’s much more complicated than that.
Lots of variables
You need to take into account the various variables involved in page speed measuring. It could be that your page speed is actually fantastic in the ideal condition—that is if the user’s device is capable of rendering everything that you throw at it. Or it could be that your page’s speed is not that bad, but the perceived performance for the user is terrible due to bad cumulative layout shift.
There are lots of variables to be taken into consideration when optimizing your store’s performance, which is why you should always identify the specific issues first.
And even if you did your homework and identified all the running issues that your store currently has, it still wouldn’t be a good idea to try fixing all of them. It’s in our experience that micro optimizations do next to nothing to improve real-world performance, and you should only work on optimizing the issues that you think are the major obstacles preventing your store from driving the kind of shopping experience that you want.
When you really get into it, speed optimization is a constant trade-off between functionality and performance—you always need to sacrifice something to get better performance. Sometimes it’s an alluring Magento theme, sometimes it’s an useful extension that is detrimental performance-wise to your store.
General optimization techniques
These general optimization techniques are painless and don’t require much technical knowledge to implement.
1. Lazy load images
Out of all types of resources requested by popular websites, images are the most frequently requested type of resource whose number of requests, on average, take up 35.6% (desktop) of total requests made by the page. In terms of page weight, image resources on average take up 46.6% of the median page weight which makes it the low-hanging fruit in speed optimization that yield impressive results when you do it right.
Lazy loading is an effective way to improve the performance of your store as it eliminates the need to load all images at once. With lazy loading, images are loaded at a later point in time when the user needs it, effectively lowering the time it takes to load a page without hurting user experience.
In Magento 2, you can implement lazy loading images to your Magento website with extensions such as Lazy Loading for Magento 2. There are several more extensions like this that are available on the Magento marketplace free of charge.
2. Use WebP
Often being compared as the Swiss Army Knife of image formats, WebP is a new and flexible image format that is rapidly gaining in popularity and is expected to be the replacement to PNG, JPEG, and GIF. Compared to PNG and JPG images, WebP images are usually 25 – 35% smaller with next to zero loss in image quality.
Because this is still a relatively new image format, WebP is not supported by default in Magento 2, and you’ll need to install 3rd-party extensions like Magento 2 WebP Images Extension to enable auto image conversion to WebP.
3. Use lightweight themes
From impressions alone, you can tell when a heavy theme significantly slows down your store, and users with slow internet connection and/or outdated hardware capabilities will only be further impacted by this.
To get around this, you’ll need to selectively choose your Magento themes with a focus put more toward performance. However, we get that it’s hard to accurately determine if a theme is truly lightweight, which is why you should generally check out if the demo version of the theme feels fast to you, read more user reviews, and if you want to be sure about it, use PageSpeed Insights to test the theme thoroughly.
4. Disable flat catalogs
It used to be that enabling Flat catalog was the way to go if you want to reduce the time it takes to make SQL queries. However, from Magento 2.1 and above, this is no longer a best practice, and you should refrain from using any extension that involves the use of Flat catalog as this feature is known to cause performance degradation and other indexing issues.
To disable flat catalogs, make sure that you set Use Flat Catalog Category/Use Flat Catalog Product to No in Stores > Settings > Configuration > Catalog.
5. Cut down on unnecessary third-party extensions
As always, stacking up third-party extensions isn’t always a good idea, and third-party extensions can cause even more issues if downloaded/purchased from untrusted sources. To eliminate any potential issues, the best practices are to keep your number of extensions to an essential amount, regularly update them, and only download/purchase third-party extensions from trusted sources.
Going a little bit more advanced
6. Use Varnish full-page caching
Varnish Cache is an open-source web application accelerator that, depending on your architecture, can speed up content delivery with a factor of 300 – 1000x. This is why Magento themselves strongly recommend Varnish as it is a much better option than the built-in full-page caching. Furthermore, since Varnish is designed to accelerate HTTP traffic, you can have substantially lower server response time and network bandwidth consumption on repeated requests.
To configure and use Varnish, follow the detailed step-by-step guide to making your Magento 2 website fly.
Powered by Varnish, Fastly helps you achieve more for a cost
For Magento Commerce Cloud specifically, Fastly is required for use in Staging and Production environments. Compared to using Varnish alone, it is a more feature-packed approach since in addition to the fast caching capabilities powered by Varnish, it also provides a CDN and security enhancements for your Magento 2 website and Cloud infrastructure.
Merchants on Magento Open Source are welcome to use Fastly, but you should still note that, unlike Varnish, Fastly isn’t a free solution and has fees based on bandwidth and request usage by region.
To set up Fastly, consult the official guide on Magento DevDocs.
7. Move to HTTP/2
Released back in February 2015, HTTP/2 is a new improvement made to the existing HTTP protocol. It is now used by 49.9% of all websites, and will only be seeing more adoptions from now on, especially since testing have shown that HTTP/2 delivers up to 14% improvement in page load and other benefits.
For example, in the video demonstration below you can see how HTTP/2 enable greater performance when pushed to the limit:
In this video, we have each image split into 379 small tiles, thus requiring 379 separate connections to be made to the server. This is a highly unlikely scenario, but it does give us insights into how HTTP/2 multiplexing works, and how it can bring much faster performance when compared to HTTP/1.
To enable HTTP/2 for your Magento website, you need to configure it either through your CDN (e.g., Fastly) or through your web servers (Apache). For example, here’s how to do it in Apache & Nginx.
- Set your Magento 2 store to production mode
- Then go to Stores > Configuration > Advanced > Developer
- Remember to flush cache afterwards via System > Cache Management
9. Go headless with a PWA storefront
Since most of the Magento websites that we have right now are still based on the traditional architecture, you’re more limited by the infrastructure in use more than anything, as traditional architecture itself is rigid, conservative, and prone to slowdowns over time. Headless architecture more or less solves this issue, since it is an approach that seeks to bring more flexibility, more scalability, and more performance improvements to storefronts.
This is why you see brands are opting for PWA storefronts (which is a headless storefront) as a way to bring more performance enhancements, and it really is a sleeper that will only be gaining more recognition in the near future.
As going headless often involves major infrastructure changes to your website, we suggest that you should only rely on a trusted Magento PWA Solution provider to carry out the whole process for you.
Recommended reading: Benefits of PWA for Your Business
With all these techniques, you can now work to make your Magento faster and thus, gain a better competitive edge over your competitors. However, you should note that performance optimization isn’t always worth going all the way, as micro optimizations are most of the time a wasted effort and remain unnoticeable in real world usage. The best strategy, in our experience, is to identify impactful issues first and focus only on them until you’ve had the results that you want.
For Magento merchants who are struggling with performance, here at SimiCart we offer a wide range of services including speed optimization for your business. Start exploring your options now and achieve industry-leading store performance.