Tempo até o primeiro byte (TTFB)

Barry Pollard
Jeremy Wagner

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 11.

Source

O que é TTFB?

O TTFB é uma métrica que mede o tempo entre a solicitação de um recurso e o momento em que o primeiro byte de uma resposta começa a chegar.

Uma visualização dos tempos de solicitação de rede. Os tempos, da esquerda para a direita, são redirecionamento, inicialização do service worker, evento de busca do service worker, cache HTTP, DNS, TCP, solicitação, dicas antecipadas (103), resposta (que se sobrepõe ao prompt para remoção), processamento e carregamento. Os tempos associados são redirectStart e redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, secureConnectionStart, connectEnd, requestStart, interimResponseStart, responseStart, unloadEventStart, unloadEventEnd, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart e loadEventEnd.
Um diagrama das fases de solicitação de rede e os tempos associados. O TTFB mede o tempo decorrido entre startTime e responseStart.

O TTFB é a soma das seguintes fases de solicitação:

  • Tempo de redirecionamento
  • Tempo de inicialização do service worker (se aplicável)
  • busca DNS
  • Conexão e negociação do TLS
  • Solicitação, até o momento em que o primeiro byte da resposta chegou

Reduzir a latência no tempo de configuração da conexão e no back-end pode diminuir o TTFB.

TTFB e dicas iniciais

A introdução das 103 dicas iniciais causa alguma confusão sobre o que o "primeiro byte" do TTFB mede. Os 103 primeiros Hints são contados como "primeiros bytes". O finalResponseHeadersStart é uma entrada de tempo adicional para responseStart que mede o início da resposta final do documento (geralmente uma resposta HTTP 200) a ser medida.

As dicas antecipadas são apenas um exemplo mais recente de resposta antecipada. Alguns servidores permitem que a resposta do documento seja transmitida antes que o corpo principal esteja disponível, seja com apenas os cabeçalhos HTTP ou com o elemento <head>, que podem ter efeitos semelhantes aos Early Hints. Esse é outro motivo pelo qual todos esses são medidos como reponseStart e, portanto, TTFB.

É importante enviar os dados com antecedência se a resposta completa demorar mais. No entanto, isso dificulta a comparação do TTFB entre diferentes plataformas ou tecnologias, dependendo dos recursos usados e de como isso afeta a medição do TTFB. O mais importante é entender o que a ferramenta que você está usando mede e como isso é afetado pela plataforma.

Qual é uma boa pontuação de TTFB?

Como o TTFB precede as métricas centradas no usuário, como First Contentful Paint (FCP) e Largest Contentful Paint (LCP), é recomendável que o servidor responda às solicitações de navegação com rapidez suficiente para que o 75º percentil de usuários tenha uma FCP dentro do limite "bom". Como guia aproximado, a maioria dos sites precisa ter um TTFB de 0,8 segundos ou menos.

Bons valores de TTFB são de 0,8 segundo ou menos, valores ruins são maiores que 1,8 segundo, e qualquer valor entre esses dois extremos precisa ser melhorado.
Valores bons de TTFB são de 0,8 segundo ou menos, e valores ruins são maiores que 1,8 segundo.

Como medir o TTFB

O TTFB pode ser medido no laboratório ou no campo das seguintes maneiras.

Ferramentas de campo

Ferramentas de laboratório

Medir o TTFB em JavaScript

É possível medir o TTFB das solicitações de navegação no navegador com a API Navigation Timing. O exemplo a seguir mostra como criar um PerformanceObserver que detecta uma entrada navigation e a registra no console:

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

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

A biblioteca JavaScript web-vitals também pode medir o TTFB no navegador de forma mais sucinta:

import {onTTFB} from 'web-vitals';

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

Medir solicitações de recursos

O TTFB se aplica a todas as solicitações, não apenas às de navegação. Em particular, os recursos hospedados em servidores de origem cruzada podem causar latência devido à necessidade de configurar conexões com esses servidores. Para medir o TTFB dos recursos no campo, use a API Resource Timing em um 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
});

O snippet de código anterior é semelhante ao usado para medir o TTFB de uma solicitação de navegação, exceto que, em vez de consultar entradas 'navigation', você consulta entradas 'resource'. Também leva em conta o fato de que alguns recursos carregados da origem principal podem retornar um valor de 0, já que a conexão já está aberta ou um recurso é recuperado instantaneamente de um cache.

Como melhorar o TTFB

Para orientações sobre como melhorar o TTFB do seu site, consulte nosso guia detalhado sobre como otimizar o TTFB.