Magento (Adobe Commerce)
Table of Contents
Website loading speed is very important for every new Magento store. It affects Google search results, user experience, and overall conversion rates.
In this article, we will share our experience on how to speed up Magento 2 web store. Moreover, NEKLO experts will disclose some other useful Magento tips, so stay tuned!
The owners of Magento websites want their web stores to be the most popular and visited. But if the site loading speed is too low, then this can have a bad effect on the business itself, namely:
One of the first steps on the way to Magento speed up is a full audit and testing of the website, and only then you can move on to the technical part – optimization on the backend and frontend.
In this article, our Magento ecommerce website development experts want to share the most effective methods for optimizing sites developed on this CMS and help increase Magento revenue.
There is not much room for improvement in Magento 2 core code. But this usually does not apply to modules that you can buy or download for free. Some of them can really slow down the site.
Audit third-party extensions
Turn each module on and off, clear the cache, and see if the site speed changes. Test all important page types: homepage, category, product, and checkout pages. If you’ve disabled the extension and your site is faster, congratulations – you’ve found a performance bottleneck.
Unfortunately, due to the complex architecture and special Magento 2 requirements, you cannot afford a fast store on a cheap VPS, otherwise, it simply will not withstand the load, and you will not be able to receive orders from your potential buyers.
In this case, you need to pay attention to productive servers – with a margin of memory and server resources. You can also consider servers on AWS, which have flexible settings and allow you to “scale” server resources.
A very common reason for Magento slow down is when caching is disabled and as soon as you enable it, the website becomes immediately faster. But it also happens that only some pages on which caching is disabled are slow.
What could be the reasons for disabling the cache? There are several of them: starting from the banal “forgot to enable” and ending with the fact that the developers turned off caching for some block in the layout. And that entailed disabling the entire page cache.
Magento comes with a built-in caching module. Make sure all types of caches are enabled by going to System → Manage Cache.
When evaluating the site load, a parameter such as TTFB (Time To First Byte) is used. It is the time until the first byte of the site page is received, or the server response time. Often, this indicator can be high, so it is necessary to check the server component of the site.
The first thing you need to pay attention to is the database. When generating pages, the server each time accesses the database to obtain certain information. For example, when forming the block “Frequently Bought Together”, the following queries are executed:
The more products and completed orders there are on the site, the more time it takes to form a response. To reduce the number of queries to the database, you can store the already generated response in the cache. So instead of five requests, only one will be executed.
If you have large and heavy database queries, then check the structure of the database itself and, where necessary, add indexes and optimize queries. It’s also worth checking your PHP version. At the moment, PHP 8.1 has already been released, which has better performance than the previous ones. Be sure to check the compatibility of your site with the new stable versions of PHP and update after that.
When you open an ecommerce website, the browser loads files with different extensions. The larger the size of such files, the longer it takes to load the content. In this case, enabling GZIP compression on the server side can help. This type of compression is supported by all modern browsers.
GZIP helps archive text-only information while video, images, audio and other media files do not change. Text information is compressed on the server, and in this form, the browser receives the data and unpacks it.
Enabling GZIP compression provides you with the following benefits:
For Magento optimize purposes, check the redirects on the site. Each redirect is an additional request between the browser and the server, which increases the page rendering delay and consumes server resources.
The total time spent in this cycle is called round-trip time (RTT).
A landing page redirect can be defined as having multiple redirects from a URL to the final landing page.
For example, redirect abc.com >> https://abc.com >> https://www.abc.com. In this case, you also need to check if there are redirects for static files.
Image optimization as a part of Magento content management gives one of the biggest gains in Google PageSpeed. The first thing to do with images is to check their formats and compress them.
Often, instead of the standard JPEG format for pictures, PNG is used. So the files “weigh” much more.
If you first convert them to the correct format and then compress them, the final size can be several or even tens of times smaller.
In addition, modern browsers (even Safari, starting from the 14th version) already support the new image format – WebP. Compared to JPEG and PNG, it provides the best compression with less quality loss. WebP “weighs” 25-35% less than a JPEG of similar quality.
Feel free to use lazy loading
This is a method of optimizing the download speed of media files that are not critical to page display or user interaction. With lazy loading, images won’t load until a specified moment.
For example, it makes no sense for us to immediately load images that are outside the critical zone of the site, somewhere closer to the footer. They may need to be loaded when the user scrolls the page to these images.
There is such an interesting CSS property for fonts as font-display, namely its swap parameter. Without waiting for your beautiful and heavy font to load, it shows the text in the browser using the font built into the same browser. In this case, it is necessary to prescribe a default or fallback font.
After all the manipulations are done, the effect of “pulling” the text for a split second may appear when loading the page (especially after clearing the cache). To minimize this nuance, make a preload for all used fonts. To do this, specify the meta tag in the <head> with the preload parameter.
Magento 2 has three operation modes: default, developer and production. The fastest is the production one. The rest of the modes are useful for debugging and should never be used for a live site.
This is another special Magento 2 feature that was missing in the first version. You can now minify JS/CSS files without the need for third-party extensions. An important point: these settings only work in production mode.
Optimize JS loading
In addition to minifying JS files, you also need to correctly include them on the site. When loading a resource, you should not include the entire JS code at once, but only the critical parts. For example, loading analytics can be delayed. And to reduce the number of requests, combine several JS files into one bundle file.
It is better to transfer the connection of scripts from the head to the footer of the site and add the async or defer attribute. With normal scripting, HTML parsing stops as soon as the browser sees the <script> tag. Then the script is loaded and executed, and only then does parsing continue. Often this is undesirable behaviour, since there can be a lot of scripts, and the site will simply take a long time to load. That is why it is better to use the async or defer attributes.
The async attribute is typically used for scripts that do not depend on other files and/or have no dependencies. The script is loaded in parallel, and the script is executed after it has already been loaded. defer is used to indicate that the script can be delayed (for example, after the page has fully loaded). In addition, it is necessary to reduce the use of third-party libraries to the maximum.
If a massive library is used only for small functionality and can be replaced with your own code, it’s better to do so.
The popularity of online shopping has grown amid the pandemic in 2020. Trying not to lose customers, many businesses have massively moved online and the load on their online stores has increased. That is why there is and will be the most demanded request for speed optimization from Magento-based website owners. No one likes a slow online store, in which the response time from “Add product to cart” to payment in the checkout is too long.
We hope the methods we’ve reviewed will allow you to “overclock” your Magento 2 website to supersonic speed, increase Google PageSpeed, increase your site in search results, positively affect UX, and improve your Magento sales rates. If you have questions regarding custom Magento development, NEKLO experts are always available to help you. Just contact us through the form on our website – and we will resolve any issue.
US-based and operating globally, NEKLO spearheads digital transformation initiatives for businesses worldwide. We deliver software solutions complying with your market and legislation.
.png)
.svg)
.svg)
