Tempo até o primeiro byte (TTFB)

Compatibilidade com navegadores

  • 43
  • 12
  • 31
  • 11

Origem

O tempo até o primeiro byte (TTFB, na sigla em inglês) é uma métrica fundamental para medir o tempo de configuração da conexão e a capacidade de resposta do servidor da Web no laboratório e no campo. 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. Isso é útil para identificar quando um servidor da Web está lento demais para responder às solicitações. No caso de solicitações de navegação, ou seja, solicitações de um documento HTML, ela precede todas as outras métricas de desempenho de carregamento significativas.

Um diagrama dos tempos de solicitação de rede. As fases da esquerda para a direita são Redirecionar (que se sobrepõe à solicitação de descarregamento), cache, DNS, TCP, solicitação, resposta, processamento e carregamento. Os tempos associados são redirecionadosStart eredirectEnd (que se sobrepõem ao prompt de unloadEventStart e unloadEventEnd), fetchStart, domainLookupStart, domainLookupEnd, connectStart, secureConnectionStart, connectEnd, requestStart, responseStart, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart e loadEventEnd.
Um diagrama das fases de solicitação de rede e os tempos associados a elas. O TTFB mede o tempo decorrido entre startTime e responseStart.

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 de TLS
  • Solicitação, até que o primeiro byte da resposta chegue

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

O que é uma boa pontuação de TTFB?

Como a TTFB acontece antes das métricas centradas no usuário, como Primeira exibição de conteúdo (FCP) e Maior exibição de conteúdo (LCP, na sigla em inglês), recomendamos que seu servidor responda às solicitações de navegação com rapidez suficiente para que o 75o percentil dos usuários apresente uma FCP dentro do limite "bom". Como orientação geral, a maioria dos sites precisa ter um TTFB de 0,8 segundo ou menos.

Os valores de TTFB bons são de 0,8 segundo ou menos, os valores ruins são maiores do que 1,8 segundo e qualquer valor entre eles precisa ser melhorado
Os valores de TTFB bons são de 0,8 segundo ou menos, e valores ruins são maiores do que 1,8 segundo.

Importante: como o TTFB não é uma métrica das Core Web Vitals, não é absolutamente necessário que os sites tenham um excelente TTFB, desde que o TTFB maior não dificulte a pontuação do site nas métricas importantes. Ao otimizar os tempos de carregamento, pense em como seu site exibe conteúdo. Um TTFB baixo é importante principalmente se um site entrega a marcação inicial rapidamente e precisa esperar que os scripts o preencham com conteúdo significativo, como geralmente acontece com aplicativos de página única (SPAs). Por outro lado, um site renderizado pelo servidor que não exige muito trabalho do lado do cliente pode ter valores de FCP e LCP melhores do que um site renderizado pelo cliente, mesmo que o TTFB seja maior.

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 TTFB em JavaScript

Você pode medir o TTFB das solicitações de navegação no navegador usando 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 com menos complexidade:

import {onTTFB} from 'web-vitals';

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

Medir as solicitações de recursos

O TTFB se aplica a todas as solicitações, não apenas às de navegação. Em especial, recursos hospedados em servidores de origem cruzada podem introduzir latência ao configurar conexões com esses servidores. Para medir o TTFB para recursos no campo, use a API Resource Timing em uma PerformanceObserver:

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

  for (const entry of entries) {
    // Some resources might have a responseStart value of 0 if they're being
    // cached, or if a cross-origin resource is 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 para uma solicitação de navegação, exceto que, em vez de consultar entradas de 'navigation', você consulta entradas de 'resource'. Ela também considera o fato de que alguns recursos carregados da origem principal podem retornar um valor 0 se a conexão já estiver aberta ou se um recurso for 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.