Magento Performance Optimization: The Ultimate Guide to boosting your website’s speed

Magento is one of the most powerful open-source ecommerce platforms. It makes it easier for people with no experience in web development to build and start their own ecommerce store. And even if you’re not a developer, the Magento community is quite large and very helpful. Despite this, an average person is bound to run into some problems. It is most likely that your web store needs some Magento performance optimization.

It is important to keep your ecommerce site functioning smoothly to provide a user-friendly experience to your potential customers. People judge their online shopping experience not just by the product but also by the kind of experience the web store provided while they were buying the product. And if they face a slow ecommerce website, that takes too long to load, it is most likely that they will bounce from your site and never come back.

79% of customers who are dissatisfied with a site’s performance are less likely to buy from that site again. And more than 46% of those will tell their peers about the bad experience.

Are you facing high page load times on your Magento ecommerce website? Do you want to speed up your Magento website?
We have created this comprehensive guide to help you speed up Magento 1 and Magento 2 websites, conduct Magento performance optimization, and speed improvements. Read to find out all the best practices and tips to improve the Magento website performance.

Why should you bother speeding up your Magento website?

There is conclusive evidence to prove that slow website page speed can affect your traffic, bounce rate, conversions, and customer retention.

Google’s 2017 study has shown that a website’s bounce rate gets worse for every second more that it takes for a page to load. If your page load time increases from one to three seconds, your bounce rate will increase by about 32%. But, if your page load time increases from one to six seconds, your bounce rate increases by about 106%.

Increasing the page load speed by just 1 second can improve conversions by 7%.

Moreover, Google and other search engines consider website page speed as an important ranking factor. They are known to penalize slow websites and bring their rankings down.

It is clear that your website’s loading speed matters a lot when it comes to attracting and retaining customers. A slow website can not only drive away present customers but also prevent you from getting new customers.

For customers, user experience has become a major factor while shopping online. Any website that does not provide a good user experience is not considered trustworthy by people and search engines. And page speed is an important aspect of user experience. If a website does not load quickly, it is quickly perceived as providing bad and inconvenient user experience.

We hope that it is clear why you must speed up your Magento website and get it to load in 4 seconds or less.

How can you check the speed of your Magento website?

There are a variety of tools on the internet to help you gauge your Magento 1 or Magento 2 ecommerce store’s page speed accurately and figure out what you need to do to improve it. Here we are listing 2 such popular tools:

• Google PageSpeed Insights: It is one of the best free tools to check your Magento website’s performance. It gives a detailed analysis of your store’s page speed, factors that are affecting it, and parts where you can make improvements to your website to improve page speed



• GTMetrix: GTMetrix is also a great tool to check your Magento website performance and to aid in Magento performance optimization. It gives you a comprehensive waterfall analysis of all the elements loading on your Magento website and the time taken by each element. With such a detailed report, you can easily find out which plugins or elements are affecting the Magento ecommerce website page speed.

Preferably, you should aim to get a score of 90 or above in the Google PageSpeed Insights test and loading time of under 2 seconds in GTMetrix. If this goal is too difficult for you then you can aim for a loading time of under 3 seconds in GTMetrix and a score of over 80 in Google PageSpeed Insights.

Why is your Magento store so slow?

There could be many reasons why your Magento site takes so long to load. It could be anything from server load time to image size to the number of redirects you have. Let us take a look at few such factors that could be slowing down your Magento ecommerce website:

• Slow Hardware: If you fail to meet the Magento technical requirements, chances are that your website takes too long to load. You can find a detailed list of Magneto technical requirements here.
• Third-Party Extensions: You should only use trusted third-party extensions. A poorly written extension can significantly slow down your overall Magento website performance.
• Caching Configuration: If your Magento site is not serving cached pages, then it will overload your server thus causing your website to slow down or crash entirely.
• Page & Image Size:The total size of the webpage and the size of images that aren’t optimized for the web also determine the loading speed. The bigger the size of images and webpages, the heavier the load your server is pushing every time.

There could be many other reasons for the slow page speed of your Magento website. Here we have just listed out a few to give you a general idea of where to look for. To know more about your website, you need to closely analyze the reports generated by Google PageSpeed Insights and GTMetrix for your website.

Magento Performance Optimization – Best Practices

Now that you know how important it is for your website to quickly, let’s get into Magento performance optimization.

A website that loads fast and provides a good user experience will help increase conversions, reduce bounce rate, improve search engine rankings, and improve your brand image. This is why you should always keep your Magento eCommerce website in the best state of health and optimum performance.

Let us take a look at a few best practices to follow for speeding up your Magento website and Magento performance optimization.

1. Select the right Magento Hosting

You should consider hosting your Magento web store on a provider that is reliable and delivers a smooth user experience. Hosting plays an important role in Magento 1 and Magento 2 performance optimization.

Before you go about choosing the hosting, you must check the hardware requirements for Magento. Make sure that the hosting you choose satisfies all the requirements mentioned in the Magento DevDocs.

Your aim should be to secure as many resources as you can while staying in your budget. Make sure to not cheap out on the hosting since it’ll play an important role in determining how quickly your website loads.

2. Use a CDN

A Content Delivery Network (CDN) is a tool that caches the static content of Magento stores such as CSS, JavaScript, images, videos, fonts, etc. The CDN provider has servers located all over the globe. It stores all the static data of your website on its servers. In this way, whenever a user visits the website, they are served the static cached data from the server that is closest to them.

This ensures quicker delivery of data to users, and thus significantly improves the website page speed.

3. Upgrade to PHP7, if you haven’t

Magento is powered by an interpreter engine called PHP. PHP received a major upgrade not so long ago, that is, the version 7. PHP7 runs faster than the previous version, PHP5.

You must ask your system administrator if you are using the latest version of PHP. If not, upgrade to PHP7 to give your online shop a performance boost.

4. Enable Caching

Caching is used to create cached versions of your web pages and deliver them to the user instead of running all the queries for each request. But, setting up caching works a bit differently in Magento 1 and Magento 2.

Full Page Cache for Magento 1

To make sure your Magento store offers smooth user experience, use Full Page Cache (FPC) extension for Magento 1 stores and speed up Magento 1 landing pages, and decrease server load time.

Alternatively, you can use other extensions available for Magento 1, such as the Cloudways Full Page Cache powered by Amasty.

Varnish for Magento 2

Magento 2 comes with an in-built solution for caching called Varnish which is provided by default. To configure Magento 2 to use Varnish for caching, log in to the Magento Admin as an administrator, and then follow these steps:

• Go to ‘Stores’ > ‘Configuration’ > ‘Advanced’ > ‘System’ > ‘Full Page Cache’
• YFrom the ‘Caching Application’ list, click ‘Varnish Caching’
• Enter a value in the ‘TTL’ for public content field
• Expand ‘Varnish Configuration’ and enter the specific information about your Varnish configuration

Varnish is designed to accelerate HTTP traffic and helps a lot in speeding up Magento websites.

5. Optimize Images

The size of your images directly impacts the speed of your website since it increases the size of web pages. Bulkier web pages mean that server will have to work more to deliver them to the users successfully. This not only slows down your Magento website’s page speed but also reduces the load that your server can handle.

Make sure that your images are properly optimized and that they maintain a good balance between quality and size. Also, ensure that your images are not resized by CSS but resize the source file itself to the specific size you need.

6. Merge CSS and JavaScript files

Merging CSS and JavaScript files helps minimize the number of HTTP requests which makes the server respond faster. This improves website page speed.

Log-in to your Magento Admin panel as an administrator and follow these steps to merge CSS and JavaScript files:

• Magento admin > System Configuration > Developer > Under “Javascript Settings”, change “Merge Javascript Files” to YES.
• Magento admin > System Configuration > Developer > Under “CSS Settings”, change “Merge CSS Files” to YES

Finally, clear the cache. Now Magento will merge all CSS and JavaScript files by default.

7. Run Magento in Production Mode

Magento has three modes: Default, Developer, and Production. Out of these three, Production mode is optimized for best performance and ensures a great user experience.

So, always run Magento in Production mode to provide your visitors with a perfect user experience.

Practical Tips for Magento Speed Optimization

In this section, we will get into the technical aspects of Magento speed optimization. If you follow these tips, you will see a significant improvement in your Magento website page speed.

Let’s take a look at all the practical tips to speed up a Magento website.

1. Domain Sharding

Domain sharding is splitting external resource files (like JS/CSS/images etc) across multiple domains. This is done because a browser can download files in parallel but has a limit per domain. For example, Chrome can do 6 concurrent connections.

If we can split images, JavaScript, and CSS files across multiple subdomains, we can make the browser download resources a lot faster. This is because now the browser would be processing a lot more requests and connections than before.

Follow this simple process to setup up Domain Sharding in your Magento website:

• Create subdomains like skin.domain.com, media.domain.com, js.domain.com, and others as per your need.
• Point them all to the same IP address and file folder your main domain is pointing to.
• Go to Magento backend main menu ‘System’ > ‘Configuration’ > ‘Web’ and set ‘Base Skin URL’, ‘Base Media URL’, and ‘Base Javascript URL’ for unsecure and secure (if you have one) links.
• Clear cache and confirm your resources are now served from subdomains.
  Note: It is recommended that you use HTTP/2 since Domain Sharding is not needed when you use HTTP/2.

2. GZIP Compression

GZIP compression helps shrink the Magento website page size. If you serve compressed HTML pages, the browser has fewer kilobytes to download. This improves the page speed and the website loads faster than before.

You can use the following example configuration to enable GZIP compression in NGINX:

http {
  gzip on;
        gzip_disable "msie6";
 
        gzip_vary on;
        gzip_proxied any;
        gzip_comp_level 6;
        gzip_buffers 16 8k;
        gzip_http_version 1.1;
        gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;

You can use the following example configuration in your .htaccess file in your Magento root folder to enable GZIP compression in Apache:

  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

 BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4.0[678] no-gzip
  BrowserMatch bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent

3. Leverage Browser Caching

A browser can cache files for faster access and you can use this to improve your website’s start render time.

You can add the following code inside server directive to leverage browser caching for NGINX:

server{
     .....     
      location ~* .(js|css|png|jpg|jpeg|ico|gif|pdf)$ {
            expires 300d;
            add_header Pragma public;
            add_header Cache-Control "public";
      }

You can add the following code in your .htaccess file to leverage browser caching for Apache:

## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"



## EXPIRES CACHING ##

4. Set Indexers to ‘Update on Schedule’

Magento Indexers can be set to two modes: ‘Update on Save’ or ‘Update on Schedule’.

When they are set to ‘Update on Save’, every time you save a product, attribute, or a category, the specific index starts running. Indexers can become resource consuming and might slow down your server.

The best mode to set the indexers is to ‘Update on Schedule’. In this way, you can be sure that they are executed by the cron job at the specific time that you set. You should choose a time when the traffic on your website is low so that no visitors face any slowdowns or lags.

You can change all the current indexers to ‘Update on Schedule’ by following these steps:

• • Log-in to your Magento Admin as an Administrator,
  • Now, navigate to ‘System’ > ‘Index Management’
  • Select all indexers and from ‘Actions’ dropdown select ‘Update on Schedule’.

5. Use ElasticSearch

ElasticSearch enables full-text searching at very high speeds. It offers fast web content search capability because of the indexing service running on the server instead of searching the entire database for the match.

ElasticSearch is valuable in keeping your Magento store search precise and faster. This enhances the user experience and makes sure that customers can make good use of their time in your Magento store.

Follow this Magento DevDocs guide to configure Magento to use ElasticSearch.

6. Enable Flat Tables

Magento uses the Entity Attribute Value (EAV) Model which stores the attributes of its entities in multiple tables based on their value type. Using multiple tables, joins & requests on multiple tables are necessary to retrieve the data. This can slow down the queries.

Magento has the option to use Flat Tables for the products and catalog. Flat tables are created by merging all the attributes of an entity into one table. When requesting the data no we only need to query one table, which makes the process much faster.

You can enable flat tables by logging into Magento Admin as an administrator and then following these steps:

• Go to ‘Stores’ > ‘Configuration’ > ‘Catalog’ > ‘Catalog’ > ‘Storefront’
• Select ‘Yes’ for ‘Use Flat Catalog Category’
• Select ‘Yes’ for ‘Use Flat Catalog Product’
• Save Configuration.

7. Minify HTML, CSS and JavaScript

We can reduce the amount of data the browser has to download by minifying HTML, CSS, and JavaScript resources. Minification is the process of removing unnecessary characters like comments and whitespace from the source code. These characters are extremely useful in development, but they’re useless for the browser to render the page.

By removing such useless character from the website code, you can reduce the overall website loading time.

Magento does this for you and all you have to do is open the Magento Admin page and navigate to ‘Stores’ > ‘Settings’ > ‘Configuration’ > ‘Advanced’ > ‘Developer’. From the page that appears, select ‘Yes’ for the settings ‘Minify JavaScript Files’ and ‘Minify CSS Files’. Once you do this, Magento will minify the CSS and JavaScript files on its own.

Final Words

Speed is a paramount factor in determining the success of an ecommerce store. A fast Magento store is quick to respond, converts better, and brings happiness to the visitors. This leads to an increase in sales and revenue. A fast site helps boost your rankings, improves crawl-ability for search engines, increases time on site, improves conversion rates, and decreases the bounce rate. Moreover, everyone loves a fast website and users consider it a part of great user experience.

On the contrary, a slow Magento web store would make customers run away, resulting in loss of sales and a serious hit to the brand’s reputation. This is why Magento developers must know how to optimize Magento performance.

We hope that this Magento performance optimization guide was helpful. If yes, please take a moment to share it. It’ll help more people like you who want to speed up their Magento website.

Did we miss anything important? If yes, then we’d love to hear about it. Let us know in the comments below!
Want to know more about Magento performance optimization? Get in touch with us today and we will help you out!