Magento Optimization: Tried and Tested Practices for eCommerce Stores

There is no doubt that Magento is a robust eCommerce platform. After the release of Magento 2, the platform became even more powerful. Still, there is one domain in which Magento 2 requires improvements – speed!

Do you want to know how to optimize Magento 2 for the best performance? Read the article to explore the best techniques. Here’s what you’re going to learn:

• Why Magento 2 speed optimization is important
• Why your website is slow
• Magento 2 optimization techniques

Without further ado, let’s dive right in.

This article is written by Oleksandr Tereta.
Oleksandr Tereta is a guru of Magento optimization. He is a Full-Stack Magento Developer with over 12 years of experience. Oleksandr knows how to speed up Magento 2 website by x2, x5, x10 and applies his deep knowledge of Magento 2 to bring significant results to clients.
If you have any questions about Magento 2 Optimization, drop them in the comments below and Oleksandr will answer them.

Magento 2 Speed Optimization: Why It’s Important

Website speed plays a huge role in eCommerce. One of the main reasons why customers prefer online shopping is the ability to make purchases quickly. The conversion rate drops when  an online store fails to meet customer expectations.

According to data provided by MachMetrics, conversion falls by 7% because of only a second delay in page loading.

You only have one chance to impress potential customers and if you lose the opportunity to do so because of poor website performance, 79% of customers won’t ever return to your online store again.

Akamai Company also states that website speed matters. According to the presented data, even milliseconds impact the conversion rate. The research showed that pages loading in 2.7 seconds had a conversion rate of about 12.8%. Pages that loaded in 2.8 seconds had a conversion rate of about 2.4%.

Magento Speed Optimization: Why Your Website is Slow

As you probably know, Magento is a flexible and highly customizable eCommerce platform. You can easily integrate it with different payment gateways, delivery options, and even unique features. Still, all these solutions can slow down Magento.

Take a look at the list below explaining the main reason for slow website performance:

• too high load on the server
• a lot of installed modules
• extensive reliance on customizations
• low-quality customization

All of the factors above can negatively impact website speed. Thus, you need to know how to spot any problems that may interfere with your website work.

There are a lot of tools that you can use to track the performance of a Magento 2 store. Still, many underestimate Xdebug, a solution provided by the platform out of the box.

Xdebug is an extension which provides debugging and profiling capabilities. With the help of this tool, you can debug PHP code, the PHP execution of a GraphQl query, and track the number of recurring requests, which usually indicate that there is some room for improvements.

Recommended service PWA
Development Get a robust PWA
Supercharge your eCommerce efforts with superb UX and ‘superfast’ speed. Build an eCommerce PWA from scratch or save time and money using GoPWA Storefront.

Approaches to Magento 2 Optimization

Magento 2 speed optimization is a process that requires a complex approach. You cannot just address a single part of your website, e.g. checkout while ignoring other elements. You need to conduct a thorough analysis of your website, starting with code review and moving on to Magento 2 image optimization, cache setting up, and so on.

Usually, there are two main parts that you can improve: servers and Magento itself. In this article, we will explain the best practices for improving both of them.

Note: Below, you can find methods to optimize Magento 2 that we consider being the most effective. These are tried and tested solutions that we use in our work to speed up Magento 2 for our clients.

Magento 2 Optimization Techniques: Server Optimization

One of the main reasons for a low Magento website performance is a choice of low-performing hosting and servers. That’s why very often, we start Magento 2 speed improvements with the optimization of Magento 2 server configuration. Let’s take a look at some techniques we can use to solve this problem.

Cloud Hosting  & Server Configuration

In most cases, we recommend creating a cluster of servers that will support key operations of your website: one server dedicated to the web server, one server for the database, and one server for Redis and Varnish. This way, the load will be distributed between three servers, positively influencing Magento 2 speed.

In most cases, we recommend using Digital Ocean because of the best provided quality and price ratio. AWS is a good choice for high-load websites of an enterprise level, since Amazon has the most powerful servers but at quite high prices.

A Magento 2 website can still run slowly, even on the most powerful machine. The main reason is poor Magento 2 server configuration. To speed up Magento 2, it’s important to pay close attention to the optimization of the following parameters: caching, database, MySQL and query cache.

You can see on the image below what results the right server configuration and the use of a server cluster brought to our client Shirtee.

Latency Minimization

Where does your key audience reside? In the USA? Then, it might not be a good idea to host your Magento website on servers in Asia.

Latency is a factor that is often overlooked in Magento 2 speed optimization. Still, you can improve website load time by migrating your M2 store to a server based closest to your target audience.

Content Delivery Network

However, if your audience is distributed across countries and continents, it is better to move your static content to a Content Delivery Network.

This way, Magento 2 will load information from servers that are closest in location to your users. With the latest Magento 2 versions, you don’t have to rely on third-party solutions, as the platform supports a CDN out of the box.

Product Page CRO Checklist Make data-driven improvements to your Product Pages.

Free download Free download

Reverse Proxy

Reverse proxy is an intermediary server that forwards client requests to appropriate backend servers. A reserve proxy sets an additional layer of protection since clients never directly communicate with the origin servers and balances client requests between servers based on different security parameters, like location.

Reverse proxy is used for a number of reasons:

• load distribution between several servers
• caching content and web acceleration
• stronger and more efficient SSL encryption
• protection from DDoS attacks and the alike security risks

Our developers applied reverse proxy when working on Magento 2 speed optimization for our client Restaurant Supply. With the help of reverse proxy, we transferred the caching to another server, reduced the number of requests to the server, and automated the cache clearing, thereby speeding up the Magento 2 website.

Domain Sharding

Domain sharding is splitting external resources files (like JavaScript, CSS, images, and so on) across multiple domains. It’s important to do so because of certain limitations of modern browsers. Though they can download a few files in parallel, there is a limit to the number of files being downloaded per domain.

For example, if we talk about Chrome, this browser can do up to 6 concurrent connections. If there is a need to download more files, they will be downloaded only after the download of the first 6 ones is complete.

If you distribute JavaScript, CSS, and images across multiple subdomains, the browser will download the resources faster, thus increasing website speed for end users.

Since Magento 2 supports domain shading out of the box, you only need to perform a few steps:

• Create a subdomain for each type of files
• Point them all to the same IP and file folder that your domain is pointing to
• Go to System → Web. Set Base Skin URL, Base Media URL, and Base JavaScript URL
• When you have configured everything correctly, don’t forget to flush the cache for the settings to come into action

Magento 2 Optimization: System Optimization Techniques

Magento 2 speed optimization usually includes the main eight steps:

1. Code and Modules Audit
2. Start Render Time
3. Caching
4. Magento 2 Image Optimization
5. CSS and JS Files Merging
6. Cookies Optimization
7. Standard Google Fonts
8. Shipping Rate Recounting

Let’s take a look at each of them more thoroughly.

Code and Modules Audit

Start Magento 2 performance optimization with code and modules audit. During this part, you can use Xdebug Profiler to identify any problems with your code, for example, to identify any heavy SQL queries that slow down your website so that you can perform Magento 2 MySQL optimization.

Magento 2 is famous for its flexibility and customization. You can easily add extensions for almost any feature, like one-step checkout, advanced navigation, and so on.

You cannot be sure that these extensions don’t impact the website speed. Turn them on and off one by one and test the speed. If you spot any difference, any drops, it might be a good idea to look for faster alternatives. And don’t forget to get rid of all unused extensions.

Here is a short guide explaining how to use Xdebug for profiling on Ubuntu.

To install XDebug on Ubuntu, use the following command:

sudo apt-get install php-xdebug

You can find INI file by the following catalog /etc/php/7.3/cli/conf.d/20-xdebug.ini

Use the command to turn on xdebug profiler in the file 20-xdebug.ini:

xdebug.profiler_enable = yes

xdebug.profiler_enable_trigger = yes

xdebug.profiler_output_name = cachegrind.cli.out.%t.%R

xdebug.profiler_output_dir = /var/log/php/profiler

Every PHP process will be written down to the catalog /var/log/php/profiler

You can use phpStorm to interpret these profiling journals. In the phpStorm, go to Tools > Analyze Xdebug Profiler Snapshot.

After you open the profiling file, you will see the on the screen information presented in the below format, with the execution statistics in percentages, which allows you to easily spot any bottlenecks.

Start Render Time

1 second!

That’s how fast customers need to see the first elements on the screen when they enter your online store. If it takes longer for your site to render the first elements, you need to speed up Magento and start with the start render time.

To configure it correctly you need to inspect the Magento code base.  A possible solution is when HTML is uploaded first. Other files, like images, CSS and JavaScript, are  loaded a little later.

Caching

Caching plays a massive role in Magento 2 speed optimization. The correct configuration of the cache system can do wonders for the speed of your website.

Varnish, Redis, and browser caching, are the key solutions that you need to consider for your store.

Magento 2 supports Varnish out of the box, so you don’t have to rely on any third-party solutions. Varnish can hold over 200,000 server requests and is used for full-page caching. Varnish can reduce the Time to First Byte to half a second. As a result, customers see the first elements of your website on the screen of their devices faster, which results in a higher conversion rate.

Varnish helped to deliver great results in Magento 2 speed optimization for our client MakeMyBlinds. Full-page caching improved the website speed from 2 seconds to 100-150 milliseconds, which is a mind-blowing result.

Redis, on the other hand, is utilized for caching sessions. The main goal of its use is the reduction of the response time of a website. For example, you can set up the Redis preload feature so that it will cache data that is reused between pages, speeding up page loading time.

Browser caching is another solution that you can use for Magento speed optimization. By storing data on the user’s local machine, it is possible to speed up page loading. Browser caching brings the highest speed improvements for Magento 2 websites that are CSS-heavy.

Magento 2 Image Optimization

Every eCommerce website has thousands of images loaded every time a user opens a new page. By compressing images before uploading, you can decrease the weight of a page drastically.

There are a few approaches that you can use for Magento 2 image optimization, including Magento 2 image compression, preloading, etc.

Below, you can find information on each of the most popular techniques that we apply to speed up the websites of our clients.

• Images compression – by compressing images before uploading to your website, you can decrease the weight of a page drastically.
• Images preloading – this technique is usually used for product pages, especially if each page has a lot of images. Image preloading allows choosing a single image that will be loaded first when a new website page is opened and other images will be uploaded later.
• Lazy loading – this technique allows images to load as users keep scrolling a web page. This way, the website loads only the images that the user could see. The rest of the images stay dormant, as they are loaded when the user scrolls down to them. Lazy loading is especially useful for speed up on mobile devices.
• Image CSS Sprites – it takes a lot of time to load a page with multiple images and generates multiple server requests. An image sprite is a collection of images put organized into a single image. By applying this technique, you can reduce the number of server requests, save bandwidth, thus speeding up your website.
• srcset – though this tag is used to create responsive websites, it can also improve the loading time of images. The srcset tag can unite a number of the same images of different sizes into a single set. The browser will download only the image of the needed size, depending on the screen resolution of the device being used. As a result, the website loads a lot faster.

CSS and JavaScript Files Merging

Google has strict rules for websites regarding their speed. One of the possible solutions to speed up Magento 2 is the minification of JS and CSS files.

Merging of CSS and JavaScript files creates a single file with CSS and JavaScript code. A web browser doesn’t have to download two separate files, thus improving page loading speed. Your website will be lightning-fast for end users.

Magento 2 provides the necessary tools for JavaScript and CSS minification out of the box.

Path to the JavaScript minification tool: Stores > Configuration > Advanced > Developer > JavaScript Settings > Minify JavaScript Files

Path to the CSS minification tool: Stores > Configuration > Advanced > Developer > CSS Settings > Minify CSS Files

Another solution includes CSS and JS file merging. Combined, these two approaches bring the best results in Magento 2 speed optimization.

Path to the JavaScript tool: Stores > Configuration > Advanced > Developer > JavaScript Settings > Merge JavaScript Files

Path to the CSS merging tool: Stores > Configuration > Advanced > Developer > CSS Settings > Merge CSS Files

Cookies Optimization

As you probably know, cookies are small pieces of information sent from a web server and stored on a computer or mobile device. Cookies allow to remember the state of information in the browser, to identify users and their authentication purposes, record past activities, user preferences, and so on.

Despite being small files, cookies can grow in size with time and impact website performance. As they are transferred every time a browser makes a request to a web server for a CCS file, image, HTML file, etc., you can notice a degradation in website speed.

The ideal size of cookies is around 1kb. When they start growing beyond this minimum value, it’s your hint to start acting.

One of the possible solutions that we use is setting a separate static domain. This domain is also known as the cookieless domain and is used to serve CSS, images, JavaScript, and other static content. The main reason to create a static domain is the speedup of content loading. This Magento speed optimization is especially effective for pages that contain multiple file requests.

When you place a CDN in front of a cookieless domain, it will automatically increase server response time. Thus, the content is delivered to the end-user even faster.

Standard Google Fonts

When building a website, consider using standard fonts provided by Google.

Google Fonts will act like an additional CDN, which will add a necessary boost to Magento 2 speed. This little hack is great for international websites with a target audience in different countries.

Shipping Rate Recounting

The shipping rate can be recounted each time a customer makes any changes in the shipping address field on the checkout page. By making a small change to your code and allowing the shipping rate to be counted only if all the parameters are provided, you significantly increase the speed of the checkout page.

Magento Speed Optimization Services: Why Businesses Need Them

There are a lot of solutions that can be used for Magento 2 optimization. Depending on the purpose of your website, a number of third-party extensions and integrations, CSS-heaviness, you might need to apply a few techniques at once to see the needed results.

If you don’t want to lose customers, taking a deeper look into speed optimization is definitely your path.