Speedup Magento 2: The Ultimate Guide

Dec 22, 2020 | 12 min read

Speedup Magento 2: The Ultimate Guide

Quickread

After reading this article and applying the suggested modification you will be able to achieve a very good speed for your site. Pingdom : Load time < 1.2 seconds.Improved web Vitals which is a must for the new coming google SEO algorithm.
Applying the guide point needs expertise of hosting and advanced Magento coding.

Speedup Magento 2: The Ultimate guide will help you to improve your Magento 2 site speed.

Let’s see in detail.

Top Reads

Contact Us

1. TTFB / server load reduction

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

1.2 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. 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
You Might Be Interested In:   Magento 2 Speed Optimization Services

1.3 Activate 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 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

1.4 Enable Flat Catalog in Magento 2 ( not recommended if an elastic search is in use )

Magento uses the EAV (entity attribute value) model to store the data of products & customers. It stores the data in multiple tables depending on their value type. Storing data in multiple tables means generating more requests while retrieving data, and this process will be slowed down to your site.
So to resolve this problem, you can enable a Flat catalog in Magento. A flat catalog helps to merge data into one. Flat tables are created by merging all the attributes of an entity into one. The flat catalog helps to improve performance by responding to MySQL faster. For example, your store contains more than 1000 products then enabling a flat catalog is beneficial.
To enable Flat Catalog in Magento.
  • 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.

1.5 Go With Elasticsearch

Every user expects quick search results where search results should be very fast whenever they visit the website. Elasticsearch is one of the best ways to deliver quick search results to users.
The elastic search comes up with advanced functionalities, render multi-language support, and other attributes that make it a reliable search option. When a customer conducts a search, ElasticSearch will return search results based on its last generated index. If a new index happens while a customer is searching for something, then that index won’t affect the customer’s search results at all.
First, install Elastic search and login to the admin panel, and turn it on.
  • Click Stores > Settings > Configuration > Catalog > Catalog Search.
  • From the Search Engine list, click Elasticsearch or Elasticsearch 5.0+ or Elasticsearch 6.0+

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

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

1.8 Reduce extension

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.

1.9 Clean Database Regularly

Tables that should be cleaned:
  • customer_visitor
  • report_event
  • report_viewed_product_index
  • report_compared_product_index

1.10 Upgrade Magento to 2.4.x

Magento regularly releases new updates, upgrading Magento to 2.4.x for better performance. Every Magento update adds various enhancements to the platform optimization, security patches.

1.11 Upgrade PHP to 7.4 and above

Upgrade PHP to 7.4 version to see speed improvement on your website. PHP 7 runs faster than PHP 5. It helps to improve the site speed.

1.12 Delete unused stores

It has been observed that some of the Magento setups have unused stores.These were generally created during development or when the test data was installed.
Each store will result in extra static file generation time.
Additional tables( flat tables ) and additional rows in the database overall increase the size of the database.Also indexing happens across all stores which results in extra resources and load on a server.

1.13 Indexers should be set on schedule

In Magento you can set indexers in two modes: ‘Update on Save’ or ‘Update on Schedule’
Indexes are used to speed up MySQL queries. Magento updates indexes on every object store by default, in some cases you need to update indexers manually.
Recommend to set the indexers ‘Update on Schedule’ index starts running every time you save a product, category or attribute.
You can update indexing from backend:
Go to the System->Index Management, select all indexers and from Actions dropdown select “Update on Schedule”
also you can change the indexers mode by running the command:
php bin/magento indexer:set-mode realtime

1.14 Remove Unused Attributes

If your store contains the number unused attributes, we recommend removing those unused attributes that increase in page load time. use below command to remove unused attributes.
php bin/magento catalog:product:attributes:cleanup

1.15 Make sure Attributes Properties are defined to Expectation

It has been observed that on times certain attributes not in use still exist.Or certain attributes not needed in front end or in collection or search are marked as attributes needed for above stated purpose.
This will result in indexer indexing them so that they are available in flat table.This results in extra data processing and a higher load.

2. Payload ( excluding JS payload )

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

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

2.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 image payload 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 >

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

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

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

2.4 Add Picture tag for delivering images based on device resolution

< picture > tag is used to define & deliver multiple images based on device resolution. You can define multiple images by specifying its resolution.

2.5 Use Brotli or other compression technique

As is known that all html, css and JS should be compressed and then delivered.
Brotli is the most common compression used.

3. JS Payload

3.1 Go for Advance JS Bundling

Magento JavaScript bundling reduces the number of server requests. JS bundling is the native feature of Magento which is used to bundle all the js files necessary for the site to work. Magento bundling help to reduce the number of connections per page, for each page request it loads all bundles, even when the requested page may only depend on files within one or two of the bundles. Performance improves after the browser caches the bundles.
We recommend to go for advance js bundling. Advance JS Bundling has been developed to accelerate the website speed.

3.2 Minify JS

Minify JavaScript files to make the web page as light as possible, and ultimately speed up your Magento 2 store.
To  Minify JS:
  • Go to the Magento backend
  • Stores > Configuration > Advanced > Developer > JS Settings
  • Set “Yes” for both Merge JS Files and Minify JS Files Options

3.3 Enable Browser Caching

Every time a browser loads a webpage it has to download all the web files to properly display the page. This includes all the HTML, CSS, JavaScript, and images.
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.

4. Server Configuration

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

4.2 Activate Production Mode to Boost Magento 2 Speed

There are 3 modes are available to operate site namely, default, developer and production. default and developer mode are used for deubugging purpose. Prduction mode is used for deployment purpose on live site.Enable production mode for better performance. Ffollow the command given below to enable the Production mode:
php bin/magento deploy:mode:set production

4.3 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.
For example, if your page size is 128 KB, Gzip compression will compress your page and send it to the browser with size 30-40 KB.

4.4 Use HTTP2

HTTP2 is the new internet protocol which is more efficient & faster than HTTP1. It works in continuous streaming and speeds up your Magento 2 website. HTTP/2 uses a single TCP (Transmission Control Protocol) connection to asynchronously send numerous requests for data to your server. You can download multiple files from a server in ASync mode with no risks to site performance. To enable HTTP/2 all that is required is an SSL certificate (it requires TLS) and a server that supports HTTP/2.

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

4.6 Use Varnish Instead of Full Page Cache

Referring to Magento 2 Devdocs best practices guide we can see that they have stated that for the Live site we shall go with varnish and for the development site we shall use full page cache. This is very important and should be a must in a Magento 2 setup.

4.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.
  • 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.8 Upgrade to a higher Mysql version

Magento 2.4.x is now compatible with Mysql 8. Mysql 8 is known to be much faster hence its recommended to upgrade magento to 2.4.x and to use Mysql 8 or equivalent mariaDB database.

4.9 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

5. Render Blocking

5.1 Apply critical css

To keep minimum render blocking time Magento has introduced the critical css concept from Magento version 2.3.3.
This will result in User experience faster loading time.

6. Configuration setting that improves performance

Below techniques help for performance optimization of your Magento 2 sites.

6.1 Full Page Caching

Cahe is the best solution Magento provides for best performance. It responds very fast to the users requests. Caching improves server response time, reduces load on server, increases traffic. In Magento you can cache certain pages for faster response, not all the pages can be cached.

6.2 Set Indexers to “Update on Schedule”

Indexing helps to improve performance. Magento reindexes automatically whenever one or more items change. Magento reindexes in the background process. Reindexing data speeds up processing and reduces the customers waiting time.
The indexers can be set to either ‘Update On Save’ or ‘Update On Schedule’
‘Update On Save’: in this mode, magento starts reindexing on save actions.
‘Update On Schedule’: in this mode , reindex runs according to a schedule as a cron job.

6.3 Elasticsearch

Elasticsearch is a highly scalable distributed search engine, it includes both search suggestions and recommendations.
For Enable EAV Indexer, set if you want to enable or disable the Product EAV indexer. This feature improves indexation speed and restricts the indexer from use by 3rd party extensions.
This option only displays for Elasticsearch or Elasticsearch 5.0+ Search Engines.

6.4 Using a Flat Catalog

We would recommend enabling flat catalog for quick reindexing & speedup processing. Magento stores catalog data in multiple tables, based on the EAV (Entity attribute value) model, and due to this product attributes are stored in many tables, SQL queries are sometimes long & complex.
Flat catalog creates a new table, where each row contains all the necessary data about a product or category.
A flat catalog indexing can also speed up the processing of catalog. For example, A catalog with as many as 40000 sku’s can be indexed quickly using a flat catalog.

6.5 Content Delivery Network

CDN (Content Delivery Network)can be used to store media files. CDN delivers fast to the users requests as it delivers content from the nearest server of the users. 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.

Conclusion:

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.

Related Article

Contact Us

Dec 22nd, 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.