Magento Website speed is the most important factor. Once you focus on site speed it helps to grow your site sales. If your site loads faster, then customers want to stay at your site for a long time that creates a smooth and easy shopping experience. At the other end, your site is ‘slow’ then customers prefer to buy from another website and in such case your site bounce rate will be increased and conversion rate will be decreased automatically. It affects your business profit margins and results in low traffic on your website.
So it’s very important to speed up your Magento site.
- To increase traffic at your website.
- To gain a customer preference to buy from your site only.
- Increase in conversion rate.
Speedup Magento 2: The Ultimate guide will help you to improve your Magento 2 site speed.
- Image Optimization
- Optimize TTFB
- Enable Magento 2 Cache
- Activate Varnish Cache Tool
- Go for Advance JS Bundling
- Enable Flat Catalog in Magento 2
- Use CDN to Boost Up Content Delivery
- Go With Elasticsearch
- Choose the right hosting
- Minimum logs to be generated
- Go for webP images
- Make sure cache hit ratio is pretty high
- Lazy Loading
- Reduce extension. Specially if the JS payload due to extension is high
- Minify & Merge JS/CSS
- Enable Browser Caching
- Clean up data base
- Make sure unwanted cron is not getting executed plus schedule cron efficiently
- Activate Production Mode to Boost Magento 2 Speed
- Enable Gzip Compression
- Use HTTP2
Let’s see in detail.
1. Image Optimization
Images are the selling factor of products in any online store. If images are clear & attractive then customers are always interested in buying products from your site.
Sometimes we see the use of heavy size images on site, it is harmful to your site it slows the website speed. Higher resolution images have larger file sizes and that can negatively impact the site speed. Generally, it takes time to load the speed on mobile devices. One of the effective ways to increase Magento 2 speed is by compressing all the prevailing images.
Using the below steps you can optimize images.
1.1 Serve scaled images
Scaled images useful to resize images and display size as close as possible to original size of the image. It is necessary to pay attention to image sizes and use perfect size images on your website.
For example, your website banner size is 1440 x 400 pixel and during display on the website the image size is using 2000 x 900 pixel. As a result, the browser has to download and scale the picture down before displaying it to the visitors. This process can slow down your website loading time.
However, this issue will not happen if you use scaled images. Smaller images use less space and speed up your site, which in return will improve your site’s SEO and ranking.
1.2 Use of picture tags
Using a picture tag you can load multiple images of different sizes and resolutions, which can be the best fit for different viewports, so instead of loading a single image, the picture tag is useful to load multiple images as per viewport sizes. So it will help to reduce the size of images and helps to achieve a speed of the site.
< picture style=”width:100%” >
< source media=”(max-width: 414px)” srcset=”//banner1-414.jpg” >
< source media=”(max-width: 768px)” srcset=”//banner1-768.jpg” >
< source media=”(max-width: 1400px)” srcset=”//banenr1-1400.jpg” >
< source media=”(max-width: 1920px)” srcset=”//banner1-1920.jpg” >
< /picture >
1.3 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.
1.4 Sprite Image
Instead of using a seperate images icons on header like social icons, mini cart icon, my account icon, search icon. You can use the sprite image and add all these icons in a single image and use that.
2. Optimize TTFB
Time To First Byte (TTFB) is the time it takes for users browsers to receive the first byte of page content. Once a user requests a browser’s, the browser’s request travels to the server and the server responds back to it.
Google suggests that your TTFB should be much less than 200ms. Otherwise, it’s considered bad TTFB.
Slow response time always affects the ranking and user experience. If TTFB takes more time to load, then it ultimately causes the site load. So try to keep TTFB as low as possible.
You can improve the TTFB of your site by using the full page cache or Varnish cache. Cache helps to load data from the browser history and reduce the load time of static content. When you use the cache, it delivers the static content from the cache without executing PHP. Proper use of cache(varnish, block cache) can improve the TTFB.
3. Enable Magento 2 Cache
Cache is the key to speed up the site. It helps to deliver the content fast and reduces the load time. By using Cache there are various benefits like better user experience, higher conversion rate. The main use of cache is to deliver content fastly from the browser history. When a user accesses your site a request is sent to the server, during this request sending to the server, this request is processed by PHP doing specific operation and database queries then returning to the corresponding HTML displayed to the user. Cache stores that HTML response, and it is displayed to the user from Cache when the user requests next time for the same content.
In Magento, there are different types of cache systems available. Full Page Cache, Varnish Cache, Redis, Memcached. You can configure the cache for your site to increase the speed and for a better user experience.
To enable Magento full-page cache you can run the following CLI command:
php bin/magento cache:enable full_page
To enable cache types you can run the CLI command:
php bin/magento cache:enable
You can also do it from Magento Admin by logging in as an administrator:
- Go To System > Tools > Cache Management
- Select the Cache Type you want to activate
- In the Actions dropdown select Enable and click Submit
4. Activate Varnish Cache Tool
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 the layer in front of the 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. Using varnish
Redis is useful to store the data. It is useful to store the session data, Checkout session, etc.
If you’re might thinking, I am using Varnish then why need to use Redis. Varnish is used for cache the home page, product details page data. Redis is used to cache the session, checkout data.
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
5. Go for Advance JS Bundling
We recommend to go for advance js bundling. Advance JS Bundling has been developed to accelerate the website speed.
6. Enable Flat Catalog in Magento 2
Magento is based on the EAV model (entity attribute value) to store product and customer data. It helps to merge data into one. Helps to improve performance by responding to MySQL faster.
- Go to “Stores” → “Configuration” → “Catalog.”
- Under “Storefront” change “Use Flat Catalog Category” and “Use Flat Catalog Product” to “Yes.”
- After this, “Save Config” and clear the cache.
7. Use CDN to Boost Up Content Delivery
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.
8. Go With 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. Choose the right hosting
Recommended to choose the right hosting for your Magento 2 website. Hosting servers is also one of the important factors in speed optimization. Choose a better configuration server Which Supports Magento configuration. Hosting servers should be fast and reliable with security, High Speed connection.
10. Minimum logs to be generated
In Magento there are 3 types of logs generated i.e System logs, Debug log, Exception log. Always recommended to keep minimum log files. Because if more logs are generated then server resources will be utilized and its effects site speed little bit, So don’t keep unwanted logs in files. By default, Magento keeps logs up to 180 days. This can result in your database becoming quite large. You can change it to a smaller time period like 2 weeks to save space.
11. Go for webP images
WebP is a modern image format and it is supported in Google Chrome, Firefox, Edge, the Opera browser, and by many other tools and software libraries. WebP helps to optimize images faster and reduce image sizes without compromising on the picture quality. For your website image optimization, you can choose the Magento 2 WebP Images extension that helps you to automatically convert all current and future images on your website to WebP format. Using WebP, webmasters and web developers can create smaller, richer images that make the page load faster. WebP images are about 30% smaller in size compared to PNG and JPEG images at the equivalent visual quality.
WebP includes the lightweight encoding and decoding library libwebp and the command line tools cwebp and dwebp for converting images to and from the WebP format, as well as tools for viewing, mixing and animating WebP images. The full source code is available on the download page.
Due to better compression of images and support for all these features, WebP can be an excellent replacement for most image formats: PNG, JPEG or GIF. You can see from the below example that WebP offers over 50% saving in image size for the same picture quality.
12. Make sure cache hit ratio is pretty high
Cache hit ratio refers to the percent of queries returning a cache page (fast response)
for instance, user requests for 10 times, and for a 9 times response given from cache, the hit rate is 90%.
Hit rate (%) = [hits from page cache] / [total number of hits] * 100
If the hit rate is low, most of your users will have to wait for several seconds for the server to respond, which is decidedly not what we are looking for. Cache hit ratio should be high, if you’re using Varnish then you can set time in TTL to deliver content from cache.
13. Lazy Loading
When a user opens the webpage, the entire page’s content is downloaded, if the site web page contains more images or content then it will take time to load.
So instead of loading all of the images at one time, images can be loaded when the user accesses a part of the page that requires it. With lazy loading, we can load on-screen images first, and on scrolling of pages, load remaining images so that we can reduce the site load and make it fast.
For Example, if your web page contains 100 or more images then instead of loading all the images at one time we can add images in lazy loading and load only required images on visible screen on page scrolling.
14. Reduce extension. Especially if the JS payload due to extension is high
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.
15. Minify & Merge JS/CSS
To Merge & Minify CSS:
- Go to the Magento backend
- Stores > Configuration > Advanced > Developer > CSS Settings
- Set “Yes” for both Merge CSS Files and Minify CSS Files Options
16. Enable Browser Caching
Some pages might only consist of a few files and be small in size – maybe a couple of kilobytes. For others however there may be a lot of files, and these may add up to be several megabytes large.
Leverage browser caching helps to download data faster. When visitors access the site in the future it will display data from the browser caching and reduce the load time of your site. In-Browser caching you can specify how long a web browser should keep images, CSS, js stored locally so that once a user access site in the future this data can download faster.
17. Clean up database
In Magento 2 there is not an option to automatically clean up all entries. To start cleanup you’ll need to have access to the PhpMyAdmin panel in your hosting tools.
18. Make sure unwanted cron is not getting executed plus schedule cron efficiently
In Magneto by default setting to update indexing, in use of 3rd party modules their cron will be added to your system, so we recommend that unwanted crons should not be executed. For instance, on your website if you’re using cron for images to delete in every hour, it can be changed to 1 week because images will not change everyday.
19. Activate Production Mode to Boost Magento 2 Speed
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.
20. 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.
21. Use 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.
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.
22. Add expire headers
Expires headers useful to store and fetch the resources from the browser’s cache. By doing this your site loads faster as certain elements are being displayed from browser cache also it helps to reduce server requests as some elements data displayed from Cache and not fetching from server.
For example, if you set expires headers for images (jpeg), the browser will store all the JPEG files in its cache. This means a visitor can load the site faster as the browser has cached some resources related to the site.
You can set expire headers for some time periods so that browsers can store the resources locally for certain time periods and load data from cache when visitors request data repeatedly. By using expires headers, you will improve your site’s speed by reducing HTTP requests
To achieve high speed it’s very essential for your online store. Our article will help you to understand how you can achieve the desired speed of the site. By applying these speed optimization techniques you can improve the site speed. Contact us If you have any questions related to this article or if you need optimization service.