How to Improve TTFB
The TTFB or Time To First Byte is the time it takes for your web server to respond to a user's request.
TTFB is critical to the success of your website.
Research has shown that if your page takes longer than 3 seconds to load you will start to lose users.
This is your bounce rate.
TTFB matters. The page stays blank during this time and the user has to wait.
If your site stays blank for longer than 3 seconds then you are losing users.
In this post, we are going to look at what is TTFB, why you should improve your TTFB and how to improve TTFB.
Let's get started.
What is TTFB?
TTFB is the time it takes for the web server to respond to a request.
This starts when the user clicks on a link to visit your site.
The first thing that happens is the browser sends a request to your web server. Your server then has to fetch the data for the page and send it back to the user.
This is a three-stage process:
- The web server receives the initial request.
- The web server then needs to fetch the HTML and content to display on the page.
- The time it takes to download the response from the server to the client.
TTFB is the metric to measure the time it takes to complete stage 2. During this stage, your web server is fetching the content needed to display the page.
Often the delay is due to fetching data. This could be data from a database a CMS or customer order history.
Google defines TTFB as:
Time spent waiting for the initial response, also known as the Time To First Byte. This time captures the latency of a round trip to the server in addition to the time spent waiting for the server to deliver the response.
To improve TTFB you are improving the speed your server fetches the data and returns the results.
Once stage 3 is complete the user will start to see the web page.
This is why TTFB is critical. While the server is fetching data the user is looking at an empty screen waiting for the page to load.
It makes sense that if you have a high TTFB then your bounce rate will increase.
Do you like looking at blank screens waiting for pages to load?
What is a slow TTFB?
Google recommends that your TTFB is under the average of 1.3 seconds.
Yet, I would say that even this is too long.
Google has a performance audit tool called Lighthouse. This allows you to audit your website for SEO and performance issues.
Lighthouse has a TTFB audit that looks at your servers TTFB time and alerts you if it is too long.
Your site fails the TTFB audit if the time is longer than 600ms.
You want to aim to keep your average TTFB for your site under 600ms.
How to check your TTFB
There are many tools you can use to check your TTFB. We are going to look at three options:
- Google Lighthouse - Google tool that runs a TTFB audit
- Chrome Developer Tools - You can check the TTFB from within the Google Chrome browser
- WebPageTest.org - A free site that will check your site and show the “First Byte” which is TTFB
Google Lighthouse
To check if your site has a slow TTFB according to Lighthouse you can use the PageSpeed Insights website.
Add a URL from your site into the search box and hit the analyze button.
Once the page audit is complete you will see the audit results.
If your site takes longer than 600ms for its TTFB you will see this error:
Chrome Developer Tools
You can also see the TTFB by using Chrome Developer Tools.
To do this open up Chrome Developer Tools. Right-click on your website and choosing Inspect.
Once the tools are open choose the network tab.
Refresh the page and you will see all the network requests that your page makes.
Click on the first result this will often be the HTML file returned from the server.
This will open a new window with a timing tab.
The timing tab gives a breakdown of the time it took to download the file:
You can see in the image above that the TTFB for PageDart.com was 132ms.
WebPageTest.org
To run a test on webpagetest.org visit the page and add your URL into the box.
Once you have added the URL hit the “Start Test” button.
It will take a few minutes to run the test but once it has finished you will see some results like this:
As you can see above the first byte is under 0.6 seconds. This is the same as the TTFB metric shown by Google.
These tools allow you to check your TTFB as a one-off task. Yet, you must track your TTFB with real users over time.
Let's look at a free tool that can do this next.
How to Track Your TTFB
You can track your TTFB for free by using Google Analytics.
To view your TTFB you need to look for the Average Server Response Time.
To get this graph you need to go to behavior -> Site Speed -> Overview and then click on Average Server Response Time.
This data comes from the users of your site showing you the TTFB experienced by your users.
If you find that the Average Server Response Time is greater than 600ms then you need to act.
Let's look at how to improve TTFB next.
How do I Improve TTFB?
Improving TTFB is a complex subject and there can be many reasons why a server is taking a long time to respond.
Here are some common reasons that a server may be slow:
- Improve server application logic.
- Optimize the database and the queries.
- Upgrade the web server resources (CPU, memory).
Work with your developers to address these issues. But, what can we do without the help of developers?
There are a few techniques we can use to improve things at the edge:
- Use a CDN
- Change hosting provider
These are quick wins that will improve your TTFB without the help of developers.
Yet, you still need to look at why your web server is slow in the first place. Even after implementing these improvements remember to address the cause of the issue.
Let's take a look at these quick wins in more detail next.
Use a CDN
A CDN is a content delivery network. This can have a dramatic improvement on your TTFB.
A CDN will cache your webpages around the world making them quicker to download to the user.
If your data is static such as blog posts then this is by far the best option to improve your website performance.
Instead of a user going to your web server each time it needs to make a request, like this:
They will go to their local CDN to get the files, which reduces the TTFB time.
I would recommend that you take a look at Cloudflare CDN as they have a free option to get started.
Your site may have content that is dynamic such as customer orders. In this case, caching will not help as you need to get the freshest data.
Let's look at how changing your hosting provider can help with dynamic data.
Change Hosting Provider
Depending on your hosting provider you may be on a shared web server.
Some cheaper hosting providers will put more than one webpage on a web server. If this is the case then you are sharing the CPU and memory of the web server.
If the other sites hosted on the web server are busy then you are competing for resources.
To fix this you can switch your hosting to a dedicated server.
This is a server that is all yours and only your website is on the web server.
This is more expensive but is a quick win for TTFB.
For example, if you are using Wordpress you can get a dedicated server for $80 a month from Bluehost.
The dedicated option is more expensive but gives you the best performance.
There is one more recommendation I give to new sites and that is to use a static site.
Let's look at this next.
Migrate to a Static Site
A static site is a site that is built once and then hosted on a server.
This is subtly different from how most web servers work.
Most web servers need to process the request and fetch the data to display.
A static site has been pre-built. This means that the server request is fast as it does not need to fetch any data. The HTML file is pre-built and ready.
I only recommend tools and techniques that I use myself. This site is a static site using a static generator called Hugo.
It is how I achieve 100 Lighthouse performance:
For more information have a look at the StaticGen site.
Final Thoughts
We have looked at how to improve TTFB. TTFB is the time it takes your server to process and respond to a user request.
To improve TTFB we need to address the server issue:
- Improving application logic
- Optimizing database queries
- Increase server resources
We have looked at how to improve TTFB with quick wins:
- Use a CDN to cache the files locally to the user
- Use a dedicated hosting server so that you are not sharing CPU and memory
If you can move your site then consider adopting a static site. This will be the fastest and cheapest of all the options and it is how I built PageDart, for speed.