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