Magento 2 Speed Optimization: Tips & Techniques to Improve Site Speed

Dec 23, 2020 | 07 min read

Magento 2 Speed Optimization: Tips & Techniques to Improve Site Speed

1. Quickread

Speed is the most important factor of any online store. Speed impact on various aspects, including customer satisfaction, conversion rates, SEO ranking. It’s been observed that customers will not buy from the slow website. According to statistics, 47% of online shoppers expect a web page to load in 2 seconds or less. And if it takes more than 3 seconds for a page to load, 40% of all customers will leave.
This article will help you to understand the importance of fast loading websites and how simply you can improve website speed using simple tips and techniques given below.

Top Reads

Contact Us

2. Why Magento Site Speed Can Be Slow?

There are numerous factors which can slow down site speed. It can be inappropriate Hosting, use of too many extensions, use of high resolution images, more traffic on websites, server issues

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

4. Tips & Techniques to Improve Site Speed

Below given tips & techniques are useful to improve the site speed.

Use of Magento Cache

Page Caching is a great method to improve loading speed. It stores the data and delivers it from the cache when the user requests the same resources repeatedly. Page caching is useful to decrease the number of database operations required for each page request and so improve the website loading speed.
Varnish is a common caching tool for Magento. 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.
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
Redis, Memcached: Both are the distributed memory caches that speed up Magento 2 large-scale web applications with dynamic databases. They reduce the load of database requests on servers and deliver cached data if an external data request allows it.

Optimize image

Use of higher resolution images will negatively impact website speed, especially 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.

Enable flat catalog for categories and products

Magento usually stores catalog data in multiple tables, based on the Entity-Attribute-Value (EAV) model. Because attributes are stored in multiple tables, SQL queries are sometimes long and negatively affect Magento performance.
By enabling the flat catalog for categories and products, you can unite all product data into one instance for Magento to extract. It accelerates the time it takes for the system to respond to the database queries, therefore improving website performance. This is especially relevant for large product catalogs with thousands of items.
Enable flat catalog from Magento backend.
  • Go to Store ->Configuration -> CATALOG -> Catalog
  • Choose Storefront section
  • Set Use Flat Catalog Category and Use Flat Catalog Product to Yes

Monitor website Speed

We recommended that Website’s speed should be checked on a regular basis. This is an important aspect since it allows you to find out what affects your page loading times, how new extensions or plug-ins perform, what can be improved, etc.
There are a variety of free performance monitoring solutions available on the market. The page speed can be measured with the help of such tools as GTMetrix, Pingdom, and many others. With the help of reports generated on this tool you can optimize the site.
You Might Be Interested In: Magento 2 Speed Optimization Services

Get rid of unnecessary extensions

Magento is a highly flexible and scalable ecommerce platform. There are a number of third party extensions available to enhance functionality and unique features. But installing too many extensions might affect your website speed. As these extensions contain js/css resources. During execution these js/css creates more requests and slows down the website speed. We recommend removing the extensions which are not most useful.

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

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.

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.

5. Conclusion

We have attempted to show you the various tips techniques to improve the Magento website speed. There are various factors which impact the website speed. Slow website means low conversion, low sales, and bad customer experience. So using these tips & techniques you can improve the site speed.

Related Articles

Contact Us

Dec 23rd, 2020|
This website or its third party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the privacy policy . By tapping on "I accept" you agree to the use of cookies.