TTFB is the amount of time your browser waits after requesting a resource to receive the first byte from the server.
 |
|---|
| In Google Chrome, you can see TTFB being measured in Dev Tools -> Network tab, under each resource's Timing tab. |
Frontend developers tend to ignore TTFB because of how much influence the backend has on it, but that's not the whole story. We can split the time the browser spends waiting into two main chunks:
Time spent on the server
Your backend server does have some influence on TTFB, with the main contributors being server-side rendering, database queries, API calls, load balancing, your actual app's code, the server's load itself (particularly if you're using cheap shared hosting).
Time spent being transmitted
The time spent moving data from the server to the browser is often overlooked, but there are some easy wins here.
If you're not using a CDN, every request to your website (including images, CSS and JavaScript), gets routed across the world to your server. Using a CDN effectively gives you hundreds of little servers across the world that massively reduce the time it takes to fetch your assets.
Be sure to check you've configured your CDN correctly - cache misses in your CDN mean the CDN has to ask your origin server for the resource, which kind of defeats the purpose of using a CDN in the first place!
Why is TTFB important?
TTFB is important because it affects every resource referenced in your HTML, not just the HTML file itself. Not every resource will have the same TTFB, as the time it takes to query data in your database is different to the time it takes to fetch images. However if your page contains 20 images, and your average image TTFB is 500ms, every single one of those images will be waiting the 500ms!
It's worth mentioning: A low TTFB doesn't guarantee your website will be fast, but a high TTFB guarantees your website will be slow.
What is a good TTFB?
According to Patrick Hulce (a Google Lighthouse contributor), Google Lighthouse's TTFB audit looks for anything less than 600ms, but a good TTFB is in the range of <200ms, ideally <100ms.
TTFB gets magnified by unreliable 3G connections, so if you care about your mobile users, or users in far away lands like Australia (👋), you'll want this number as low as physically possible.
How do you improve TTFB?
TTFB can be impacted by lots of things, the first thing you want is for your content to be as close to your users as possible. This means a CDN or edge servers caching your content.
One caveat with measuring TTFB is that while you might be improving TTFB by adding more and more CDN locations, if your CDN is not closer to the server that runs your test, you won't be able to measure the difference effectively.
There's also room to improve on the server, which you can do with a bit of observability. I'd monitor TTFB across several pages using PerfBeacon, then use an Observability tool like Honeycomb to dig deeper and find the code that takes the most time to run. I've tracked down long running database queries due to missing indexes, and inefficient 3rd party API calls in this way.
Shameless plug
Tired of manually testing your web performance? I'd love to help!
Hi! I'm Max, the developer, designer, and customer support of PerfBeacon.com - a service that automatically runs Google Lighthouse for you (both on a schedule, and via API calls).
Top comments (0)