Magento 2 Optimization: Speed Up Your eCommerce Website

Flexible architecture, extensions, scalability, customizations.

There is no doubt that Magento is a superior 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 and you will learn the best approaches to Magento 2 optimization:

  • what slows down your Magento 2 website
  • tools to track website performance
  • best approaches to Magento 2 optimization

Let’s get straight to the details on how to speed up Magento 2.

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.

eCommerce and Website Speed

Before jumping to the tech details, let’s find out why making website lightning fast matters today.

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. When an online store fails to meet customer expectations, the conversion rate drops.

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

 

How Website Speed Impacts Abandonment Rate

You only have one chance to impress potential customers and if you lose the chance to do so because of poor website performance, 79% 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 that were 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%.

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 rely on customizations

PWA

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.

Approaches to Magento 2 Optimization

 

Magento 2 Optimization Techniques

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.

Let’s review Magento speed optimization methods

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.

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 heavн SQL queries that slow down your website so that you could perform Magento 2 MySQL optimization.

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.

Xdebug Profiler: Checking Magento 2 Speed

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.

phpStorm - xDebug Profiling

Caching

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

Varnish, Redis, 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. The use of 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.

Varnished 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.

 

Optimize Magento 2 with Varnish Cache

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 Speed Optimization with Browser Caching

 

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 the location.

Reverse Proxy for Magento Speed Optimization

Reverse proxy is used for a number of reasons:

  • load distribution between a number of 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, automated the cache clearing, thereby speeding up the Magento 2 website.

JavaScript и CSS Minification

By removing unnecessary or redundant data from your JavaScript and CSS code, like whitespaces, line breaks, comments, and so on, the web browser reads such minified JS and CSS files faster. This way, you can speed up Magento 2 page loading time.

It should be noted that Magento 2 provides the necessary tools for JavaScript and CSS minification out of the box.

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

Path to the CSS minification tool: Stores > Configuration > Advenced > 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 > Advenced > Developer > JavaScript Settings > Merge JavaScript Files

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

Content Delivery Network

Setting up a Content Delivery Network (CDN) is mandatory for eCommerce businesses with the target audience distributed between countries and continents. Moving static content to a CDN, Magento will be able to load information from servers that are closest in location to end-users.

Magento 2 has built-in features allowing to set up a CDN for a webstore. You don’t have to rely on any third-party solutions, which reduces any risks and instability in website performance and helps to reduce latency.

 

Speed up Magento 2: Content Delivery Network

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 degrade 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.

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 for 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.

Domain Sharding for Magento 2 speed optimization

 

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 Image Optimization

Images optimization brings the biggest speed up to Magento 2 websites. It is one of the techniques that allows reducing the page weight.

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.

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 the 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.

Hosting & Server Configuration

One of the main reasons for a low Magento website performance is a choice of a low-performing hosting and servers. That’s why very often we start Magento 2 speed optimization starts with the optimization of Magento 2 server configuration.

In most cases, we recommend creating a cluster of servers that will support key operations of a website – one server dedicated to the web server, one for the database, and one server for Redis and Varnish. Distribution of the load between three servers positively influences Magento 2 speed.

Still, a Magento 2 website can run slowly even on the most powerful servers because of poor Magento 2 server configuration. When setting up a server for Magento 2, it’s important to pay close attention to the optimization of a few factors, including caching, database, MySQL query cache, and so on.

The right server configuration and the user of a server cluster brought great results to our client Shirtee:

  • The main page loading time increased by x6
  • The loading time of product pages sped up by x10
  • Hosting expenses were reduced by x4

Speed Up Magento 2: Final Thoughts

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.

Contact Us
Submit a request and we’ll get in touch within a day.
Thank You for Your Request!
We will contact you shortly.
Share
Subscribe to Newsletter Learn the main secrets of creating a successful eCommerce project