Skip to content
About Blog Learn Explore Patterns Case studies
On this page
  • What is TTFB?
    • What is a good TTFB score?
  • How to measure TTFB
    • Field tools
    • Lab tools
    • Measure TTFB in JavaScript
    • Measuring resource requests
  • How to improve TTFB

Time to First Byte (TTFB)

Oct 26, 2021 — Updated Jan 19, 2023
Available in: English and 中文
Appears in: Metrics
Jeremy Wagner
Jeremy Wagner
TwitterGitHubHomepage
Barry Pollard
Barry Pollard
TwitterGitHubHomepage
On this page
  • What is TTFB?
    • What is a good TTFB score?
  • How to measure TTFB
    • Field tools
    • Lab tools
    • Measure TTFB in JavaScript
    • Measuring resource requests
  • How to improve TTFB
Time to First Byte (TTFB) is a foundational metric for measuring connection setup time and web server responsiveness in both the lab and the field. It helps identify when a web server is too slow to respond to requests. In the case of navigation requests—that is, requests for an HTML document—it precedes every other meaningful loading performance metric.

What is TTFB? #

TTFB is a metric that measures the time between the request for a resource and when the first byte of a response begins to arrive.

A diagram of network request timings. The phases from left to right are Redirect (which overlaps with Prompt for Unload), Cache, DNS, TCP, Request, Response, Processing, and Load. The associated timings are redirectStart and redirectEnd (which overlap with the Prompt for Unload's unloadEventStart and unloadEventEnd), fetchStart, domainLookupStart, domainLookupEnd, connectStart, secureConnectionStart, connectEnd, requestStart, responseStart, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart, and loadEventEnd.
A diagram of network request phases and their associated timings. TTFB measures the elapsed time between startTime and responseStart.

TTFB is the sum of the following request phases:

  • Redirect time
  • Service worker startup time (if applicable)
  • DNS lookup
  • Connection and TLS negotiation
  • Request, up until the point at which the first byte of the response has arrived

Reducing latency in connection setup time and on the backend will contribute to a lower TTFB.

What is a good TTFB score? #

Because TTFB precedes user-centric metrics such as First Contentful Paint (FCP) and Largest Contentful Paint (LCP), it's recommended that your server responds to navigation requests quickly enough so that the 75th percentile of users experience an FCP within the "good" threshold. As a rough guide, most sites should strive to have Time To First Byte of 0.8 seconds or less.

Good TTFB values are 0.8 seconds or less, poor values are greater than 1.8 seconds, and anything in between needs improvement

Important

TTFB is not a Core Web Vitals metric, so it's not absolutely necessary that sites meet the "good" TTFB threshold, provided that it doesn't impede their ability to score well on the metrics that matter.

Websites vary in how they deliver content. A low TTFB is crucial for getting markup out to the client as soon as possible. However, if a website delivers the initial markup quickly, but that markup then requires JavaScript to populate it with meaningful content—as is the the case with Single Page Applications (SPAs)—then achieving the lowest possible TTFB is especially important so that the client-rendering of markup can occur sooner.

Conversely, a server-rendered site that does not require as much client-side work could have a higher TTFB, but better FCP and LCP values than an entirely client-rendered experience. This is why the TTFB thresholds are a “rough guide”, and will need to be weighed against how your site delivers its core content.

How to measure TTFB #

TTFB can be measured in the lab or in the field in the following ways.

Field tools #

  • Chrome User Experience Report
  • web-vitals JavaScript library

Lab tools #

  • In the network panel of Chrome's DevTools
  • WebPageTest

Measure TTFB in JavaScript #

Browser support chrome 43, Supported 43 firefox 31, Supported 31 edge 12, Supported 12 safari 11, Supported 11 Source

You can measure the TTFB of navigation requests in the browser with the Navigation Timing API. The following example shows how to create a PerformanceObserver that listens for a navigation entry and logs it to the console:

new PerformanceObserver((entryList) => {
const [pageNav] = entryList.getEntriesByType('navigation');

console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
type: 'navigation',
buffered: true
});

Caution

Not all browsers support PerformanceObserver or its buffered flag. To get the largest possible browser support, consider adopting the web-vitals package, which is discussed below.

The web-vitals JavaScript library can also measure TTFB in the browser with less complexity:

import {onTTFB} from 'web-vitals';

// Measure and log TTFB as soon as it's available.
onTTFB(console.log);

Measuring resource requests #

TTFB applies to all requests, not just navigation requests. In particular, resources hosted on cross-origin servers can introduce latency due to the need to set up connections to those servers. To measure TTFB for resources in the field, use the Resource Timing API within a PerformanceObserver:

new PerformanceObserver((entryList) => {
const entries = entryList.getEntries();

for (const entry of entries) {
// Some resources may have a responseStart value of 0, due
// to the resource being cached, or a cross-origin resource
// being served without a Timing-Allow-Origin header set.
if (entry.responseStart > 0) {
console.log(`TTFB: ${entry.responseStart}`, entry.name);
}
}
}).observe({
type: 'resource',
buffered: true
});

The above code snippet is similar to the one used to measure the TTFB for a navigation request, except instead of querying for 'navigation' entries, you query for 'resource' entries instead. It also accounts for the fact that some resources loaded from the primary origin may return a value of 0, since the connection is already open, or a resource is instantaneously retrieved from a cache.

Gotchas

TTFB for cross-origin requests will not be measurable in the field if cross-origin servers fail to set a Timing-Allow-Origin header.

How to improve TTFB #

An in-depth guide on optimizing TTFB has been published to give you more guidance on improving your website's TTFB.

PerformanceMetricsWeb Vitals
Last updated: Jan 19, 2023 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.