Time to First Byte (TTFB) is the amount of time it takes to receive a response from the server. Having a quick TTFB is important because it can play a signifant role in perceived site speed and user happiness. IOW, if your site takes forever to load than your user is likely to bounce.

One way to measure TTFB is by looking at the Network Tab in Chrome Dev Tools (cmd+opt+j) and clicking on the network request.

The above screenshot tells me it takes about 259ms to receive the first byte.

There are essentially 3 components that make up TTFB:

1. Connection - The time it takes to establish a connection to the server
2. Request - The time it takes to send the request to the server
3. Processing / Response - The time it takes the server to process the request and send the browser data

Google recommends our TTFB to be under 200ms while Mozilla recommends it to be under 500ms.

Before we optimize performance on the frontend it’s a good idea to make sure we’re doing what we can on the backend.

Location

Something to consider when reviewing your server’s response speed is the location of your target audience. If the majority of your audience is on the West Coast while your server is on the East Coast there could be unnecessary latency. Tools such as Google Analytics can help you determine where your traffic is coming from. Also tools like webpagetest.org and tools.keycdn.com/speed can help you evalaute TTFB based on location.

East Coast - 58ms

West Coast - 425ms

CDN

Placing assets like JavaScript, CSS, and Images on a CDN (Content Delivery Network) is a great way to decrease the distance between your users and your application. CDNs help eliminate latency by serving assets to your users from servers closest to them. You can also serve cached HTML via CDN to help the initial TTFB.

Database

One of the main TTFB impediments is the time it takes to query a database and retrieve meaningful data. There are plenty of resources that talk about designing an efficient database. Many server-side frameworks come with debug tools to help you eliminate inefficent or unneccesary queries. Suffice it to say, if you see a pattern where your server is taking a substantial amount of time processing a request, the database is a good place to start.

Caching

There are many occasions where simply caching the DB response can reduce a substantial amount of time. IOW, instead of repetitively pinging the database for the same content over and over (slow), we could serve a cached version of this data from memory (fast). This is especially important for landing pages where start up speed is crucial to keeping the user engaged.

Avoid Landing Page Redirects

Redirects force the user to make a second round-trip; subsequently increasing TTFB. Many redirects are inevitable but should be applied with care and avoided on landing pages. Check this write-up by Google for more information.

Server Capacity

The CPU, memory, operating system, server type, programming language, code efficiency, and traffic can all play an effective role in improving or harming TTFB. Many servers provide built-in tools to help you understand your server load. There are also awesome solutions like newrelic.com to help make sense of it all.

---

For more information on the subject of Time to First Byte, I recommend these articles:

• moz.com - Improving Search Rank by Optimizing Your Time to First Byte
• keycdn.com - A Slow Website - Time to First Byte
• varvy.com - Time to First Byte

Thanks for reading!

-Andrew Del Prete