Why is Time to First Byte (TTFB) Important?

Time To First Byte (or TTFB as it is acronymised) is a measurement of how long it takes for a server to send the first byte of a visitor's requested page. When speed plays such a large (arguably the biggest) factor in search engine ranking, and is an oft‑cited metric when determining how "good" or "successful" a website is, it is not hard to see why TTFB is an important piece of the puzzle in having a speedy (and successful) site.

Arguably, this single piece of the puzzle may become less of a sensitive subject as Google rolls out their Page Experience Metric ‑ potentially diluting the TTFB signal's importance ‑ but nevertheless, it is a dominant consideration in any online development and one that is all but impossible to control strictly from the development side.

What is Time to First Byte?

When a user visits your website, their browser makes a request to your server for the page and its content so that it can then display it to the visitor. This is all very much 'Web Development 101', and while it might seem simple, plenty of developers and website owners overlook how important the actual server and infrastructure their application sits upon is when it comes to speed.

Time To First Byte plays an especially big role in websites that run on CMS', or display dynamic content via back‑end and database queries. This is because before your server can even send the first byte, it has to make all the necessary checks (for things like authentication) and queries and run all of the logic to fetch and assemble the content from your database (or databases). Obviously, this takes time ‑ time that delays that the first byte being delivered.

It is worth mentioning here that using a client‑side approach to dynamic content (such as using hydration or rehydration) offers a different set of performance concerns but does not impact TTFB specifically because the process of fetching and transforming data happens on the client side (via JavaScript), and after the page has already been delivered to the visitor's browser. The key differentiation is that with server‑side or back‑end data processing, it all has to occur before the browser receives any data.

Essentially the whole point of TTFB is that the quicker your server starts to respond to a request, the faster your website will load, and the sooner your visitor will be getting on with their day rather than waiting or ‑ worse ‑ abandoning your site to visit a competing one.

How Important is Time to First Byte?

Time To First Byte is an absolutely key metric. It makes up a big part of Google's Largest Contentful Paint Core Web Vital*, which essentially measures how quickly the bulk of your content gets to your user.

If you've got this far, then we all already know how important speed is when it comes to the web, and building for the web. Beyond being a significant ranking factor, it is a huge part of the user experience and each second that a website spends loading instead of displaying to the visitor makes an enormous difference. In simplest terms: the longer a page takes the load, the more likely a customer is to leave, and the less likely they are to make a purchase.

When I worked with John Lewis, one of our key performance indicators was loading time. When we became involved, the platform was significantly bloated, particularly by unnecessary third‑party extensions, which meant the pages loaded slowly. Aside from many other things, our work reduced the average page loading time by more than 75%, which in turn showed a reduction in bounce rates and a pronounced upsurgence in sales.

Google provides some specific guidance when it comes to optimising Time To First Byte on particular stacks. For instance, when it comes to WordPress, the recommendation is to select a good optimisation plugin and to pick (or build) a well‑optimised theme. You should also look to strip back and use as few plugins as possible (as each plugin has its own bits of logic that will need to run before that first byte can be delivered), as well as utilise the cache.

When it comes to React applications, the advice is to server‑side render components where possible and use renderToNodeStream() or renderToStaticNodeStream() so that different parts of the markup can be hydrated individually rather than all at once.

Caching (on both the server and client sides) obviously really cuts down on Time To First Byte. We already know that TTFB is influenced by all of the logic and queries that have to be made to load a dynamic site, so setting a level of caching in‑between server and end‑user allows the server to generate less and less frequently. Alongside this, the cache can serve the content statically (even improving this further by the use of a CDN), drastically cutting down on response times. The team over at Kinsta managed to reduce TTFB by 90% for the WordPress sites that they host by leveraging a combination of caching and distributed CDN. Of course ‑ and without dismissing what an amazing achievement that is ‑ it does also say an awful lot about the (poor) state of your average WordPress website!

Fortunately, if you're using a static site generator like Gatsby, then a lot of this is already taken care of for you out of the box, although there are any number of further community plugins that can be used to optimise performance even further.

I intend to delve a little more in‑depth into how you can take steps to reduce the Time To First Byte of your website in a future article, but for now, it's worth checking your site with Pagespeed Insights to get an idea of how your site is performing at the moment. When it comes to Largest Contentful Paint ‑ the Core Web Vital most affected by Time To First Byte ‑ Google recommends that it is less than 2.5 seconds.

* I realise that I've been very narrow in my definitions here today, namely only focusing on Google and their metrics for search engine performance/rankings. The fact is that at the time of writing, Google makes up more than 92% of the Worldwide Market Share, and has been consistently above 90% for the past decade. What this means is that if you are going to expend time and effort into improving TTFB for SEO purposes (rather than just for your users, although the two often go hand‑in‑hand), then Google is really where your focus has to be placed.