Magento 2 TTFB (Time To First Byte) Optimization Guide

TTFB can be checked using GTMetrix.

Go to https://gtmetrix.com/ enter the page URl you want to check.

Make sure that Page Settings on GTMetrix are taken care of.

Click on summary and you will find TTFB there as per screen shot

Once a user requests for the URL in their web browser, a server request is generated to access the information. The request gets processed by the server and the content of the page delivered to the user’s web browser. During this process the server may need to do a lot of work execution to return a page content which users requested.

TTFB begins with the HTTP request. The time it takes for a server to receive a request can vary based on the time it takes to perform a DNS lookup, the speed of the user’s network, the distance to the server, and any interruptions in the connection plus time taken by server.

So Keep your server in near proximity to your users.

Example if your maximum users are in UK then you should not have your server in US but the server should be in the UK.

Once a server receives a request, it has to generate a response. This involves starting processes, making database calls, reading cache and other server level activities.

Note : If varnish is in place then this can be delivered a bit faster.

Most of the catalog pages and CMS pages are cached in varnish and can be delivered from varnish cache.

Once a server generates a response, it needs to transmit it back to the user. This step is dependent on both the enterprise’s connection speed and the user’s connection speed. The TTFB is determined the moment the client begins receiving the response, literally when the client receives the first byte.

There are a number of things which are causing a higher TTFB. If you are noticing that your contents are taking a long time to first byte, then it is important to investigate the issue and make any necessary changes in order to optimize your site’s speed. Below given some of the common reasons why you have higher than normal TTFB:

• Page not delivered from Varnish Cache
• Varnish configured but due to improper coding varnish is by passed( some block cacheable set to false or cache life is less or almost 0 )
• Networking issues
• Poorly configured web server
• Database configuration/design
• Slow DNS response time
• Server to be in user Proximity
• Load balancing
• Crons consume too many resources so this would mean that the server does not have sufficient resources to efficiently handle requests.
• Backend activities that are resource heavy are being done during peak load time.
• Some modules are consuming resources due to improper coding.
• Huge collections to be displayed on a page.
• Call to very specific layered navigation that can’t be cached.
• Too much log creation.
• XHR and UI components not used effectively.
• Unwanted blocks and modules were called on the page.

• Users get a website response in less time, improved user experience.
• Higher customer retention.
• Increase conversion.
• Speed improvement.

As we see if TTFB is more then it will impact the SEO ranking, slowing your site speed. So you must improve the TTFB less than 200ms. Below given techniques are helpful to reduce the TTFB of your store.

Use of unnecessary extensions in your Magento store can slow down the TTFB. Extensions contain a number of js and css code which will generate more js/css requests, and due to this it will slow down the TTFB. So try to use a minimum useful extension only. You can disable the extension which is not more useful.

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

Both Redis and Varnish are one of the most popular upgrades for Magento stores. It’s a recommended caching option for Magento 2. Both solutions work great

Varnish is a challenging tool to configure, but when done right it offers good TTFB. Another advantage of Varnish ― it works on more web pages. While FPC doesn’t work for pages with a lot of dynamic content on them, Varnish offers better performance even for these challenging use cases.

Recommend to use the latest version of Magento. Magento released the new version with upgraded features, security patches, code standardization so always use the upgraded magento version for better website speed.

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 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 is future this data can download faster.

When a user opens a webpage, all the contents of the page are downloaded, including all images in it. Obviously, if the web page contains more images, then it will take more time to load. Lazy loading is a handy skill to help you prevent downloading of unnecessary images. Instead of loading all images at one time, the images are loaded only when the user accesses the part of the page that relates to these images. With lazy loading, on-screen images are loaded first, and the remaining images are gradually loaded as and when the user scrolls through the page. 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 page scrolling.

Recommended to check log files to track any signs that may indicate a system is being overloaded. If your website is receiving large amount of traffic, your current web stack may not be able to properly handle the amount of requests and thus will begin producing longer TTFB

We have attempted to show you the various techniques to improve TTFB. TTFB refers to the first byte of content on your website. If the first byte loads faster it automatically improves the website speed. Speed optimization is must for better conversion, increase in sales, and customer retention. So by using these techniques you can improve the TTFB of your Magento 2 website.