January 19, 2024

From Lag to Lighting: A Comprehensive Magento Optimization Guide [2024]

Nadya Bakhur

Researcher, Technical Writer

Magento (Adobe Commerce)

Comprehensive Magento optimization guide
January 19, 2024

From Lag to Lighting: A Comprehensive Magento Optimization Guide [2024]

Nadya Bakhur

Researcher, Technical Writer

Magento (Adobe Commerce)

Comprehensive Magento optimization guide

Magento performance optimization is significant for every web store owner based on this platform. The website configuration directly influences the UX and can attract or repel customers. Online stores with poor performance and slow pages can’t be ranked high in search results. Consequently, your competitors with more optimized sites will leave you far behind.

In this article, we share the most effective Magento optimization tips that will help you achieve better performance and speed up the work of your online store. Note that we’ve asked our in-house Magento developers to comment on the tips and share the ideas, so there will be no fine words and optimized images. Only the real-life developers’ thoughts and relevant screenshots. Let’s go!

Why Magento speed optimization matters

Today, in e-commerce website management, the page loading speed is given special attention. This metric would be hard to underestimate: according to statistics, 40% of Internet users claim to abandon a website if it takes more than 3 seconds to load, while 47% of users say they wouldn’t wait more than 2 seconds! 

In e-commerce, time literally means money: as users won’t wait long for a page of a web store to load, having a slow website means losing customers and, subsequently, income. That is why Magento 2 page speed optimization is essential. But not just the speed – the overall performance dramatically impacts the customers’ decision to purchase from a web store. The statistics show the shopping cart abandonment rate if customers use a desktop version of a web store is more than 70%. In the case of mobile shopping, the figures go beyond 80%.

Cart abandonment rate in the USA diagram showing the difference between desktop and mobile phone shopping in 2021-2022
Cart abandonment rate in the USA. Source

As 63% of all online shopping orders in 2023 were generated using smartphones, it is crucial to pay attention to Magento site performance optimization for mobile devices as well. 

How do you know you need Magento speed optimization services?

No doubt, Magento is one of the most flexible, scalable, and customizable e-commerce CMS widely used: currently, there are more than 130,000 live Magento-based websites, which makes Magento one of the top 5 most popular e-commerce platforms.

However, web store owners sometimes notice that no matter how much effort they put into making the user experience even more satisfying, the sales decrease, or new customers do not arrive at the website. Of course, the problem may be in the products’ catalog or the prices, but it is necessary to check everything. As we already know, customers may need help with technical problems, including slow page loading or errors during the ordering process. 

 

We suggest two simple steps to get an idea about your website speed and evaluate if you need professional Magento performance optimization services.

  1. First, try Google Page Speed Insights to assess the loading speed of the core pages, including the main page, category page, product page, cart page, and checkout page.

Once the test is over, you can evaluate the results. Normally, the indicators should be marked green. If they are marked orange or red, it shows the problems with the loading speed. 

It is necessary to pay attention to the so-called “web vitals” – meaningful metrics that help to measure and evaluate your website performance. These metrics include:

  • First Input Delay (FID) that measures the time from when a user first interacts with your website to when the browser can respond to that interaction;
  • Largest Contentful Paint (LCP) that represents how quickly the main content of the page is loaded;
  • Cumulative Layout Shift (CLS) determines how much your website’s layout shifts unexpectedly when users are interacting with your website;
  • First Contentful Paint (FCP) is an indicator that gauges how quickly your website’s users can view the content (text, images, video, etc.);
  • Interaction to Next Paint (INP) is a metric that shows how quickly your website reacts to users’ actions, like clicks or key presses;
  • Time to First Byte (TTFB) – a measurement indicating the webserver’s responsiveness to other network resources. 

These indicators are checked by the Google page experience algorithm, so the better the performance, the better for the website’s SEO. 

We’ve scanned a product page of a Magento-based website that belongs to one of the world-famous brands to provide you with a better understanding of how this Google tool can help you in the performance evaluation:

Core web vitals assessment of Magento-based website with status passed. Key indicators: largest contentful paint, first input delay, cumulative layout shift, first contentful paint, interaction to next paint, time to first byte.

As you can see, the desktop version of the website doesn't demonstrate particular issues; only the Time to First Byte could be improved (below, we'll tell you why this metric matters). 

However, everything changes if we switch to the mobile version:

Core web vitals assessment of Magento-based website mobile version with status failed. Key indicators: largest contentful paint, first input delay, cumulative layout shift, first contentful paint, interaction to next paint, time to first byte.

The assessment failed, and several indicators need substantial improvement. 

        2. The second step on the way to Magento 2 performance optimization is to check the server response time. You can do it by evaluating the Time To First Byte (TTFB) metric which indicates the exact moment when the server sends your browser the very first byte. It is recommended to have this indicator of 0.8 seconds or less. TTFB is important as it helps to understand whether the performance issues are server-originated. 

To assess the TTFB of your Magento website, you can use the Chrome developer console. For that:

  1. Open your website in Google Chrome;
  2. Pass to Chrome developer tools (either hit the F12 button or hold down Ctrl+Shift+I keys);
  3. In the opened window, pass to the “Network” tab, move to the “Waterfall” section, and select the first entry there:
A Chrome development tools window screenshot with the "Network" tab highlighted.

You’ll observe the time of the request sent, the waiting time (exactly what we need, the TTFB), and the content download time.

These can be the initial stages of detecting Magento performance issues. Below, we will discover what Magento speed optimization steps you can follow. If you face problems with the metrics mentioned above, it is already a good sign to search for a qualified Magento speed optimization service provider.

Top Magento performance optimization tips

When it comes to Magento 2 optimization, there are various strategies you can follow to make your website run faster. Below, we will consider the most effective Magento 2 optimization techniques and provide comments from our in-house Magento developers

First, let’s see what options for Magento performance optimization are offered out-of-box. 

Cache settings

Stores →Configuration→System→Full Page Cache

In this case, you can select between the built-in cache and the Varnish cache:

Magento configuration page screenshot with cache settings.  A drop-down list with built-in cache and varnish cache options.

With the built-in cache everything is clear; Varnish cache is an HTTP accelerator that was created to serve content-heavy dynamic websites and sites with APIs.

This option is marked as “recommended” as Varnish cache is considered more productive than the built-in cache. That is why enabling and configuring the Varnish cache on the server and enabling it on Magento is important.

NEKLO expert comments:

“When discussing the Varnish cache option, we recommend installing any cache warmer available on the market. This tool "warms up" the cache for specific pages, pushing Magento to create more cache. How does it help to speed up Magento? Varnish cache is periodically cleared, and it may happen that a customer will have to wait for the web page with no cache to load. It is better to have the cache "warmed up" so the customers will not have to wait.

How can we improve Magento’s performance? The first thing we do when providing the Magento performance optimization service is checking the cache. We pay special attention to the layout cache, configuration cache, full page cache, and block cache. They should all be enabled. Important note: the production mode should also be enabled – it is mandatory requirement. 

In addition to the Varnish, we also recommend installing Redis – a cache solution that can be used as a PHP session storage. It stores metadata and cache records in one file, allowing the number of inodes and other operations to be reduced.”

JavaScript settings (available in Developer Mode only)

Stores →Configuration→Developer→JavaScript Settings

Magento JavaScript Settings page screenshot with the highlighted fields: Merge Java Script Files, Enable JavaScript Bundling, Minify JavaScript Files, Move JS code to the bottom of the page.
  1. Merge JavaScript Files this option merges the JS files into one. If the “Enable JavaScript Bundling” option is inactive, not many files will be merged, mostly the Require JS configurations. The rest of the JS files will be uploaded through Require JS upon request. 
  2. Enable JavaScript bundling this option allows you to collect all the JS files in “bundles”, following the settings from the view.xml file. In this file, the size of each bundle and the exceptions from it are set up. If you enable the “Merge JavaScript Files” option, you’ll get just 1 JS file instead of several bundles.
  3. Minify JavaScript files – this option allows minifying the JS files, deleting the blank spaces, line transfers, etc., and helping to reduce the final file size. It adds .min to the file name and functions in Production Mode only.
A screenshot of the JavaScript files list with .min added to the file name.

      4. Move JS code to the bottom of the page – this option is your opportunity to move the JS files from the header to the footer, allowing the HTML content to load first. Thus, your users will be able to interact with the website’s content while the JavaScript will be executed.

CSS settings (available in Developer Mode only)

Stores →Configuration→Developer→CSS Settings

CSS settings screenshot with the fields: Merge CSS files, Minify CSS files, Use CSS critical path.
  1. Merge CSS files – this option allows to merge all CSS files into one (excluding the print.css file). However, after you enable this option, you can notice the following issue:
A screenshot showing two CSS Magento file styles: m.css and l.css

Why are there 2 files instead of just one? Basically, that’s because Magento has 2 CSS file styles: m.css (basic, mobile styles) and l.css (desktop styles). 

  1. Minify CSS files – this option allows you to minify the CSS files, delete the blank spaces, line transfers, etc., and help reduce the final file size.
  2. Use CSS critical path – this option allows blocking rendering from the CSS part. 

Image optimization

Stores →Configuration→System→Images upload configuration

This section allows to set up the maximum width and height of the image, enables resizing, and, most significantly, sets up the image quality.

NEKLO expert comments:

“Various developers suggest optimizing images, especially for Magento. However, it is necessary to remember that Magento works well with images. It allows storing the image in its original size and converting it into a small, medium, large, and thumbnail version. These options will fill the product catalog with quality images and not slow down the website.

Kind reminder: for website administrators, it would be nice to remember not to overload Magento with excessively “heavy” media files.”

Illustration of working difference when using CDN.
Use of Content Delivery Network (CDN)

For Magento server optimization purposes, you can use a content delivery network. 

NEKLO expert comments:

“The use of a CDN is not a must for Magento 2 speed optimization. However, it is recommended for large online stores wishing to work outside their local market. The principle of CDN work is easy: when the users enter your website, they need to get the whole data volume from the website loaded as quickly as possible. It will not take much time if they are located close to your web store server. But the bigger the distance between the users and the server, the slower the load speed. That is why, if you want your web store to be easily available from various parts of the world, we would suggest using the CDN as it allows you to store the website content on the servers that are closer to the users.”

Update Magento and PHP to the latest versions 

Adobe releases new Magento versions once every three months. Each new edition comes with major and minor new features and security patch update. When upgrading your Magento to the latest version, together with new functions, you get a chance to get rid of bugs that can impact Magento speed. 

The latest released version as of December 2023 is Magento 2.4.7. However, if your website has any customizations functioning incorrectly, you may face serious difficulties upgrading to the most recent version. In this case, we would suggest not wasting time trying to fix the issues on your own and turning directly to a qualified Magento optimization service provider.

A very similar point is using the latest version of PHP. The current stable one is PHP 8.3.0. As with the Magento updates, every new PHP edition helps resolve the issues the previous one couldn’t, improving the overall website performance. 

Upgrade search & database

How to optimize the Magento database? There are several tactics to approach Magento 2 database optimization. The most effective include disabling flat catalogs, passing to ElasticSearch, clearing database logs, and arranging the indexers.

  1. No more flat catalogs

For years, switching to flat catalogs has been the way to collect the product attributes in a more or less simple table. This has been considered a method to avoid multiple database queries.

However, starting from Magento 2.1.x, this technique does not work anymore. It is no longer recommended to use flat catalogs. On the contrary, it is confirmed that this method can lead to performance degradation and other issues.

Magento officially warns you:

Magento warning that the use of flat catalog is no longer recommended as a best practice.

         2. Use ElasticSearch/Open Search as a catalog search engine

One of the reasons for Magento to slow down is its inability to search and process large data volumes when the wrong search engines are used. In this case, you can opt for ElasticSearch (which is actually a must for Magento 2.4 and up) or Open Search

Both solutions will help enhance search accuracy and, subsequently, speed up your Magento website.

       3. Cleaning database logs

Too many database logs can become a problem. They create a real mess occupying more and more space on your disk and slowing down the website. 

That’s why deleting the database logs is considered a way to speed up Magento backend: you need to go to the PHP MyAdmin Panel in your hosting solution and try clearing the tables with the logs like these:

A screenshot of the list of logs

      4. Arranging the indexers

Magento needs indexers to avoid long MySQL queries every time some specific data is necessary. Indexers help to get data for the request from a table containing the required results.

However, disordered indexers can badly impact Magento’s performance. We would suggest the following tips:

  • Update the indexers

For Magento 1, updating the indexers can be executed right from the Admin panel. For Magento 2, in the root directory, it is necessary to execute the following command:

Php bin/magento indexer : reindex

  • Create your own indexers

If you have your own indexers, you can set up your reindex rules and the indexer will be updated independently. 

NEKLO expert comments:

“There is a working tool helping optimize the Magento backend – New Relic. It is a paid solution, but it definitely is worth the price. This tool allows you to see all the website loads in real time. It helps you observe what pages were loaded, what requests were made, what Ajax calls were made, how many times, etc.

And remember: tools will only do some of the developer's work. They can help automate some processes, detect issues, and suggest ways to resolve them, but the central part of the work for backend optimization is done manually.

That's why make sure to control that:

  • All the blocks that must be cached are actually cached;
  • All the blocks that must not be cached are transformed into Ajax calls;
  • The database and all the tables are optimized.”

Check your hosting solution

To show its best, Magento needs a powerful hosting solution able to cope with high loads and many customers. The better the hosting capacity is, the more users will have an opportunity to visit your website simultaneously without delays. The customers’ requests will not remain in a queue, and your web store will run faster.

Don’t forget to check if your hosting solution meets the Magento system requirements. As your web store grows, update the hosting accordingly. 

Review all the 3rd party modules

The core Magento 2 code doesn’t offer much room for improvement. But this usually doesn't apply to the third-party extensions and modules you can buy or download for free. Some of them can significantly 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 essential page types: home page, category, product, and checkout pages. If you turn off the extension and your site is faster, congratulations – you've found your performance bottleneck and can resolve it.

Use PWA and the Hyva theme to speed up your website

Today, more than 90% of customers shop from mobile devices. Progressive web applications (PWA) were created specifically for mobile clients and represent a combination of a website and a native mobile application. For users, it means they can open the site in a mobile browser and save it as an application on their smartphones, bypassing the Google App or App Store. The website will visually look like an application, opening in full screen. The additional PWA benefits include the ability to send push notifications and use the solution even without the Internet.

This technology can help to optimize the speed of a Magento website. However, building a website on PWA requires more time and is more expensive than many think. In our experience, development on PWA takes three times longer than traditional Magento, even if Magento offers its PWA Studio and supports the tech development. The reason is the novelty of the technology itself.

So why would we still recommend to start adopting PWA?

Firstly, PWA will speed up your website – this is guaranteed. Gaining one second, or even a millisecond, is what modern e-commerce strives for every day. Speed, as you have already understood, is very important for customer experience and, as a result, for conversion rates. PWA is close to native technologies; it pulls information from the user’s phone – location, first name, last name, etc. The application can take this data so that the user only partially fills out the checkout. As a result, the user can place an order in just one click or even without an Internet connection.

Secondly, PWA is a headless architecture. Independent work of the front end and back end allows you to carry out technical work on the site without interrupting the shopping process. You can even replace the backend engine; users will not notice the change.

Thirdly, the PWA update’s peculiarity is that, unlike native applications, approval from Google Play or the Apple Store is unnecessary. A typical mobile app must pass a Google Play or Apple Store technical review to trigger an update. This approval takes days, or even weeks. Plus, the update is often sent back for revision.

NEKLO expert comments:

“Today, another powerful solution is gaining popularity – the Hyva Arsenal theme for Magento 2 development. It works fast, and it has been created with optimization in mind. This solution can even be considered as a competitor to GraphQL. 

It is not a free theme, but by paying for it, you get access to the сlient chats in Slack and GitHub, where you can observe all the tasks in progress and all the live updates available. Moreover, they provide continuous tech support and announce every planned upgrade.

Working on projects with the Hyva theme is not just delivering tasks – it is the way to learn something new and track the Magento development progress in real-time.”

Bottom line

The request for Magento performance optimization has always been and will probably remain popular among e-commerce business owners. Naturally, we also don’t support the idea of wasting an hour to get from a product page to payment options.

We hope the methods we've overviewed will allow you to accelerate your Magento 2 website to supersonic speed, increase your Google PageSpeed scores, rank your site higher in search results, and grow your business. But if you still have questions regarding Magento development, contact NEKLO – together, we will resolve any issue.