Jan 14, 2021 | 12 min read

1. QuickRead

Magento is a popular eCommerce platform across the globe. Sometimes we hear about site speed being very low. Customers always like to purchase from a website that loads fast. Website Speed is the most important factor for any online website. Every customer expects the website to load faster when they visit. If a website takes very long to load then the customer will leave the page from your website and result in an increased bounce rate, low conversion, low traffic, low margin. If you don’t want to face these problems in your business then there is a need to look into your site speed and improve it.

MINIMUM LOAD TIME = MAXIMUM CONVERSIONS

In fact, 47% of customers expect your website to load within 2 or less than 2 seconds. And 40% will abandon a page that takes three or more seconds.

FAST SPEED WEBSITE= GREATER CONVERSION RATE

79% of shoppers according to the noteworthy Gomez and Akamai studies will avoid shopping again at a site where they had a poor experience or that was too slow.

IMPROVING SITE SPEED= IMPROVING SITE SALES

Research has shown 25% of the customers were found to exit from a website if it takes 3-4 seconds to load. This not only affects the user experience, but also affects the website rankings. For all leading search engines such as Google, website speed is a prime factor that determines its position in their search results. There are many reasons to slowdown your website. It includes server configuration, use of heavy images, use of unwanted js/css, etc

Is Your site taking more time to load? number of requests are more?

There is a need to improve your website speed. Fast loading website have a more benefits:

Increase in conversion rates
Boost Sales and profit margin

User Story :

One of our client Magento 2 Site was loading pages in 6 seconds and the CPC was at 0.07 USD per click.

We optimized the site product detail page and the site load time was reduced to 2.5 seconds.We were surprised to see that the CPC cost went down to 0.05 USD per click.This mean that while we were getting 1400 clicks per 100 usd not we were getting 2000 clicks per 100 USD.Indirectly a saving of 600*0.07 = 42 USD per day or 1260 USD per month.

The other known benefit is higher conversion.Also while we were getting 4 orders from 1400 clicks per day now it was 7 orders from 2000 clicks per day.

So from a cost of 35 USD per order we are not at 28.5 USD per order.

2. Effects of Slow Page

If your website is very slow then it will impact on sales and revenue as well as impact on conversion. Customers are more likely to purchase from a fast loading website, if your site takes more than 3 seconds to load then customers will not stay at your site, they will leave the page and prefer to buy from another website. Customers will not wait to load your site, they will leave your site page and switch to another site for shopping.

So, here you have to focus on your website speed to avoid customer abandonment User Experience becomes the ultimate factor impacting conversion rates on your online business.

3. How to check Site speed?

You can use below tools to check your site load time, pagespeed score, number of requests generated, total page size, etc. Using this tool you will get the detailed report where your site resources consume more time to load, accordingly you can apply fixes for speed improvement. If more requests are generated then you need to minimize that requests so that your website content or images load faster and the user can be happy with your faster loading website.

GT Metrix
Page Speed Insights
Pingdom

Once you check your website speed in above given tools, you will know the present load time of your website, number of requests. You need to follow the given recommendations and speed up the website.

Below are given steps to Speed Optimization for your Magento 2 website:

4. Steps to speed up your Magento 2 website

There are many factors that slowdown your website. Below are given steps to speed up your Magento 2 website speed. Let’s see in details one by one:

1. Update Magento version

Magento regularly releases new version updates, with bug fixes, security purpose, new features updates. We recommend using the latest version of Magento to improve your website speed.

2. Use of Http2

Compared to HTTP/1 using HTTP2 is significantly faster. It reduces the load of your website. HTTP/2 is a relatively new protocol. Before HTTP/2 the requests went one after the other from the browser, so there are more requests being generated. As every time connection is going and breaks. But using HTTP/2 continuous streams is going to help to reduce load time.

2. How is this useful in Magneto 2?

Reduce the load of JS

For Example, when you merge Home page JS, which load is 1.5 MB and when it unmerged the load of JS on the Home page is 700 KB because when you unmerged the js of checkout, Product Page and Contact us page is not used on the home page. So HTTP/2 is beneficial to reduce the JS load. Again there is a possibility to reduce 3 js and reduce load upto 600 KB if your code allows.

When we merge JS, all JS will go in Header. When we unmerged, we can add 2 critical js under the head, and the remaining JS will add in the bottom of Head. When we add 2 js in head then it will impact TTFB and first painful content. Until and unless head is not download browser will not download the page html.compress headers

All of this was not possible with HTTP1.

Therefore, we recommend asking your hosting provider if HTTP/2 is enabled in their server settings.

3. Use of CDN

CDN (Content Delivery Network) is helpful for fast delivery content across the globe. It delivered static content like js, css, html, images from a geographically distributed group of servers working together to provide fast delivery of internet content.

Whenever a user requests your site, the server closest to the user’s physical location will deliver the static content, ensuring the shortest distance for the data to travel. This ensures reduced latency and fastest site experience.

How CDN Works?

After setting up CDN for your website, caching takes place:

When a Visitor in a particular location (e.g US) makes the first request for a static content on your website. Then the asset is retrieved from your actual server when it is being delivered, and the assets get cached on the CDN’s US server, the nearest CDN based on visitors location. When next time visitors request the same content on your website, the request goes to the nearest CDN edge server to check if the asset is already in cache. If the request is already cached by the same edge server then the visitor will receive a response from the server. This helps in improving the load time.

To configure CDN in Magento 2:

From Admin panel, go to the Store–>Configuration->>General–>Web

In the Base URL for Static View Files, enter the URL of the location on the CDN where static view files are stored.
In the Base URL for User Media Files field, enter the URL of the JavaScript files on the CDN
Open the Base URLs (Secure) section and continue with following:
- In the Secure Base URL for Static View Files field, enter the URL of the location on the CDN where static view files are stored.
- In the Secure Base URL for User Media Files field, enter the URL of the JavaScript files on the CDN.
When complete, click Save Config.

4. Use of Varnish Cache

Magento 2 provides a built in cache functionality, where you can configure cache and use that. Let’s see how to use Varnish cache and its benefits.

Varnish is a proxy server. It is useful to deliver content fast. When a visitor requests your site, then this request will not send to Magento, it’s delivered from cache. Varnish checks if visitors request for Home page, Checkout, without firing a mysql query, or without hitting any php code it delivers content from cache.

Magento strongly recommends using Varnish (or Redis) in production. The full-page caching (to either the file system or database) is much slower than Varnish.

To configure Magento to use Varnish log in to the Magento Admin:

Go to Stores > Configuration > Advanced > System > Full Page Cache
From 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

User Story:

We have set up Varnish cache on our client website and see improvement in page load time.

Before Applied Varnish- Home page

After Applied Varnish- Home page

Before Applied Varnish- PDP page

After Applied Varnish- PDP page

5. Enable Gzip Compression

Gzip Compression allows you to compress files for fast loading, using this you can compress big files into a smaller one and which loads much faster. With gzip, you can compress JS,CSS, HTML, Text files as well. This happens at the server level before sending them to the user browser.

6. Optimize Images

If you are using higher resolution images then this will negatively impact on website speed, specially when users access your website on mobile devices. Solution for this to optimize images. There are online tools available to optimize images or you can use Photoshop to optimize images.

For example, if your product image is 69.7 Kb in size, and you are using a number of product images on catalog. Then obviously image size is more and impact on speed. Instead you can optimize images so that images size can be reduced by maintaining image quality.

Check if your images are properly optimized and if they have a good ratio between quality and size. Also, make sure your images are not resized by CSS but have the source file resized to the specific size you need.

7. Minimise third party modules

Use of many third party modules means more load of unwanted js files. You can reduce the use of modules if you can. Sometimes there is a possibility many modules are unnecessary. They introduce extra processing with a negative impact on performance and speed. You can uninstall the modules which are not in use. It will help to minimize the load of resources and improve site speed.

8. Minify JS/CSS files

Minify css and javascript files to lightweight the load of js/css files.By doing this step you can reduce the size of js files and it resulted into reducing the js requests.

From Magento admin, go to the Store->>Configuration->>Advanced->>Developer from JavaScriptsetting set ‘yes’ to Minify JavaScript Files.

From Magento admin, go to the Store->>Configuration->>Advanced->>Developer from CSS settings set ‘yes’ to Minify CSS Files.

9. Use of ElasticSearch

Use of Elasticsearch for catalog pages and search results. Using elasticsearch searching results will load much faster.

To Configure Elasticsearch, login to the admin panel:

Click Stores > Settings > Configuration > Catalog > Catalog Search.
From the Search Engine list, click Elasticsearch or Elasticsearch 5.0+ or Elasticsearch 6.0+

9. Turn on Production Mode

There are 3 modes of operation in Magento 2.

default
developer
Production

default and developer mode is normally used while developing and debugging, it is not suitable for your ecommerce shop’s site at all. Turn on production mode mode for your site to load faster.

5. Conclusion

As explained in this article, a fast loading website is very important for better user experience, increase in conversion rate, sales & revenue. Fast loading pages, minimum loading times, and overall high speed and performance are key factors for a successful e-commerce shop.

So using these steps you can definitely improve your Magento 2 site speed. If you are getting any hurdle during speed optimization.

Magento 2 Website Speed Optimization