Magento Performance Optimisation: 10 Ways To Unleash Magento Performance & Protect Magento SEO Rankings.

Here are ten effective Magento performance optimisations for speed & SEO.

Magento Performance Optimisation: 10 Ways To Unleash Magento Performance

Magento performance optimisation

A fast loading website is essential to the success of your online business. Portent’s analysis of over 26,000 landing pages revealed that website conversion rates decrease by approximately 4.42% for each extra second it takes to load. Moreover, with Google’s recent page experience update, website performance now impacts SEO as well.

Magento delivers industry-leading functionality and can support thousands of concurrent users. To help you leverage it, Adobe gives you essential Magento performance optimisation features such as built-in Varnish support and optimised operation modes.

However, you need to configure them for optimal performance. Before we show you how to optimise your Magento store for Google, let’s understand Google’s PageSpeed metrics.

Google’s Page Speed Metrics Explained

Google pagespeed metrics explained

Google’s PageSpeed Insights tool measures website performance based on six metrics:

  1. First Contentful Paint
  2. Time to Interactive
  3. Speed Index
  4. Total Blocking Time
  5. Largest Contentful Paint
  6. Cumulative Layout Shift

It also provides you with helpful recommendations based on leading industry trends to improve your Magento store speed.

Here’s an overview of the six PageSpeed metrics:

First Contentful Paint

First Contentful Paint (FCP) measures the time required for any part of your website page to render when it starts loading. A fast FCP score reassures visitors that your site is loading.

Time to Interactive

Time to Interactive (TTI) measures the time from when a web page starts loading to when it starts responding to user input. It helps identify instances where pages may appear usable but actually aren’t.

Speed Index

Speed Index (SI) measures how fast site content displays visually. It gives you an estimate of how fast above-the-fold content displays when customers visit your site.

Total Blocking Time

Total Blocking Time (TBT) measures load responsiveness, i.e., the time between FCP and TTI when your site is non-responsive to inputs. It helps identify how long it takes a site to become interactive.

Largest Contentful Paint

Largest Contentful Paint (LCP) measures the time needed to render the largest above the fold image or text block after the page starts loading. It helps reassure users that the page is relevant and useful.

Cumulative Layout Shift

Cumulative Layout Shift (CLS) measures unexpected layout shifts occurring across the lifespan of the web page. It helps track the visual stability of a page.

PageSpeed Insights uses Lighthouse to analyse URLs. It scores each metric both numerically and visually.

For example:

Google pagespeed insights score

The PageSpeed performance score is a weighted average of all six metrics. The online tool doesn’t display the distribution. However, you can explore it using Google’s Lighthouse score calculator.


Magento 2 Speed Optimisation Tips

Google only focuses on three Core Web Vitals currently: LCP, FID, and CLS. However, it plans to update the page experience signals annually. So it helps to ensure your Magento store is optimised for all six metrics.

Here are ten Magento speed optimisation tips to improve your PageSpeed score.

1. Choose the Right Magento Hosting Setup

Magento 2 is a resource-heavy platform that needs a CPU-optimized hosting environment. If you find that your store struggles to load products during peak traffic hours, it’s likely that your hosting environment isn’t configured optimily to run Magento or your server resources need to be adjusted.

Make sure you follow Adobe’s hardware recommendations to estimate Magento hosting requirements. We recommend choosing a Magento hosting solution that meets Adobe’s recommendations and fits your budget.

If you don’t know how to balance value and performance, sign up for a free hosting consultation with VIXXR.

2. Optimise the Magento Caching Configuration

Magento’s default caching system uses the file system to cache queries. Although this speeds up development and deployment, it isn’t optimised for a live store.

There’s a lot that you can do to optimise Magento caching. But first, make sure you enable all cache types on your store.

Log in to the Magento admin panel and go to System > Tools > Cache Management. Select all caches and enable them.

How to enable Magento caching

Next, install and configure your Magento store to use Varnish for Full-page caching and Redis for session caching. Varnish is a powerful HTTP accelerator that can help your store serve static files at near-instant speeds. In contrast, Redis will handle bulky session logs.

3. Use Magento in Production Mode

Magento supports three operation modes — developer, default, and production — each designed to address a different use case. If you haven’t assigned an operation mode to your Magento store, it’s likely that it’s either running in the default or developer mode.

Only the production mode in Magento is configured for a live store. So if your Magento store isn’t operating in production mode, it’s likely to suffer from performance degradation.

Fortunately, this one’s an easy fix. Here’s how you can enable the production mode on Magento 2:

Log in to your Magento server as the file system owner and set the operation mode to Production using the following command in the Magento CLI:

<code>

$ bin/magento deploy:mode:set production

</code>

4. Minify CSS and JS To Reduce File Sizes

CSS and JavaScript determine your Magento store’s appearance and functionality. However, they’re notorious for increasing the page size and hurting store performance.

Adobe lets you minify your CSS and JavaScript files from the Magento admin to reduce file sizes and boost performance. Here’s how you can do it:

Note: Test this in a development environment before implementing it on your live store.

Set your store to Developer mode and log in to the Magento admin.

Go to Stores > Settings > Configuration > Advanced > Developer.

Expand the JavaScript Settings section and set Minify JavaScript Files to Yes.

How to minify Magento javascript

Next, expand the CSS Settings section and set Minify CSS Files to Yes.

How to minify Magento CSS

Finally, go to System > Tools > Cache Management and refresh all caches.

You can also merge and bundle CSS and JS files in Magento 2. However, Magento’s built-in mechanisms aren’t the best for those tasks. Consider using a third-party tool like RequireJS instead.

5. Configure Indexers to “Update on Schedule”

Magento indexes data to improve store performance. Instead of fetching data such as product pricing or stock information from the database each time it’s requested, it stores them in tables using indexers.

Magento updates indexers in one of two ways: on schedule or on save. The Update on Save mode rebuilds indexes each time data changes in the backend. However, reindexing data each time it changes in the backend is extremely resource-intensive and can slow down your store in a production environment.

Thus, it’s best to set your Magento store indexation to Update on Schedule by navigating to System > Tools > Index Management in the Magento 2 admin.

6. Disable Flat Catalogs for Magento 2.1.x and Above

Until Magento version 2.1.x, Adobe recommended using Flat Catalogs to improve Magento store performance. However, if you’re using a newer version without disabling Flat Catalogs, you’ll likely experience performance degradation.

Follow these steps to disable Flat Catalogs on Magento versions 2.1.x and above:

Log in to the Magento admin and go to Stores > Settings > Configuration > Catalog > Catalog.

Expand the Storefront section and set the Use Flat Catalog Category and Use Flat Catalog Product values to No.

How to disable Flat Catalogs in Magento

Click Save Config to save your changes and refresh the Magento cache.

7. Use a Content Delivery Network

HTTP archive’s annual report found that images contribute to nearly two-thirds of the total page weight. So if you’re looking to reduce page size and improve Magento performance, optimising your website media is the best place to start. 

The obvious way to optimise media is to upload images based on the maximum display size and use next-gen image formats such as WebP. But you can also use a Content Delivery Network (CDN) such as Cloudflare or Fastly to store and serve your site media.

Implementing a CDN with Magento 2 will help you reduce the load on your primary server and improve frontend content delivery.

8. Optimise the Magento Database

The Magento database houses all your store data such as customer, product, and order information. If your store has been operational for years, it can grow bulky with outdated and unnecessary entries leading to poor performance.

If you know how to use a command-line interface, you can use a free tool like MySQLTuner to run diagnostics on your Magento database and identify potential bottlenecks. You can also consider clearing the following database tables to improve performance:

  • log_customer
  • log_visitor
  • log_visitor_info
  • log_url
  • log_url_info
  • log_quote
  • report_viewed_product_index
  • report_compared_product_index
  • report_event
  • catalog_compare_item

If you aren’t confident with optimising the Magento database yourself, reach out to the Magento experts at VIXXR for a consultation.

9. Identify and Fix Dependencies

Magento’s rich ecosystem gives you access to hundreds of themes and thousands of extensions to design unique shopping experiences. However, a poorly coded theme or extension can hurt your store performance.

Excessive requests and dependencies are obvious signs of bad code. The best way to identify them is using Magento’s built-in profiler.

You can enable the Magento profiler by following these steps:

Log in to your Magento server as the filesystem owner and go to the Magento root.

Run the following command to enable the profiler with type html:

<code>

$ bin/magento dev:profiler:enable html

</code>

If you want to enable profiling using type csvfile, run the following command:

<code>

$ bin/magento dev:profiler:enable csvfile

</code>

Once you’ve identified problem areas, you can implement fixes or replace poorly coded extensions entirely.

You can disable the profiler using the following command:

<code>

$ bin/magento dev:profiler:disable

</code>


10. Use a Headless Frontend

Magento offers powerful ecommerce backend functionality. However, its front end leaves a lot to be desired. It’s incredibly complicated, which makes balancing performance and implementing design changes challenging.

Adobe launched the Magento PWA studio to address this issue and help merchants build Progressive Web Apps (PWAs) for Magento 2. PWAs offer superior performance, allow offline browsing, and bridge the gap between a mobile site and a native application.

However, if you’re looking for a future-proof solution, you should consider implementing a headless frontend for your Magento store. Separating the front and back ends allows you to leverage Magento’s powerful ecommerce features and the latest frontend technologies to design cutting-edge shopping experiences.

Magento 2 Performance Optimisation Summarized

We’ve covered many different Magento performance optimisation techniques in this guide. From simple DIY measures like configuring the operation mode and optimising CSS and JS to complex tasks like optimising the database and profiling Magento code.

Implementing these performance optimisation tips on your Magento 2 store will help you improve your PageSpeed score. But if you want to win the upcoming SEO battle by improving Magento performance, you need an experienced partner like VIXXR on your side.

Book a call with VIXXR today.