Tempo até o primeiro byte (TTFB)

Jeremy Wagner
Barry Pollard

Compatibilidade com navegadores

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

Origem

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 de 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 ponto 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.

Outras definições de TTFB

A definição anterior é a definição convencional, mas com a introdução das Early Hints, o que é considerado o "primeiro byte" está em debate. O firstInterimResponseStart é uma nova entrada de tempo adicional para responseStart para diferenciar entre eles, mas isso só é compatível com o Chrome e navegadores baseados no Chromium. Portanto, alguns navegadores e ferramentas (incluindo o CrUX) medem até que os primeiros bytes sejam recebidos, incluindo os Early Hints.

As dicas antecipadas são apenas um exemplo mais recente de resposta antecipada. Alguns servidores permitem que a resposta do documento seja enviada antes que o corpo principal esteja disponível, seja com apenas os cabeçalhos HTTP ou com o elemento <head>. Ambos podem ter um efeito semelhante aos Early Hints e, portanto, também podem obscurecer a definição do que o TTFB mede.

Como uma medida de quando os "primeiros bytes" de dados úteis do documento são recebidos pelo navegador, todas essas definições podem ser consideradas válidas. Há um valor real em enviar dados antecipadamente se a resposta completa for demorar um pouco mais. O mais importante é entender o que a ferramenta que você está usando mede e como isso é afetado pela plataforma. 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 TTFB também é considerado um indicador do tempo de resposta do servidor ou do host. No entanto, ela será afetada por fatores fora desse controle direto, como o tempo de redirecionamento, se for veiculado de uma ocorrência de cache por um CDN ou se precisar fazer um caminho potencialmente mais longo de volta para um servidor de origem. Isso é particularmente aparente nos dados de campo. Os testes de laboratório geralmente são menos afetados por esses fatores, já que o URL final geralmente é testado e, muitas vezes, nega repetidamente as mudanças de armazenamento em cache. O Lighthouse informa o tempo de resposta do servidor em vez do TTFB para deixar isso mais claro, mas outras ferramentas de laboratório podem não fazer isso.

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 a percentila 75 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.

Valores de TTFB bons 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 apresentar 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'. Ele também considera 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.