Tempo até o primeiro byte (TTFB)

Jeremy wagner
Barry Pollard

Compatibilidade com navegadores

  • 43
  • 12
  • 31
  • 11

Origem

O que é TTFB?

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

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é o ponto em que o primeiro byte da resposta chegou

A redução da latência no tempo de configuração da conexão e no back-end contribuirá para um TTFB menor.

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

Como o TTFB precede as métricas centradas no usuário, como Primeira exibição de conteúdo (FCP) e Maior exibição de conteúdo (LCP), é recomendável que seu servidor responda às solicitações de navegação com rapidez suficiente para que o 75o percentil dos usuários tenha uma FCP dentro do limite "bom". Como guia, a maioria dos sites deve ter um tempo até o primeiro byte 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

Como medir o TTFB

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

Ferramentas de campo

Ferramentas de laboratório

Medir 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 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. Recursos hospedados em servidores de origem cruzada podem gerar latência devido à necessidade de configurar conexões com eles. 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 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 acima é semelhante ao usado para medir o TTFB para uma solicitação de navegação, exceto que, em vez de consultar entradas 'navigation', você consulta entradas 'resource'. Ela também considera o fato de que alguns recursos carregados da origem principal podem retornar um valor 0, já que a conexão já está aberta ou um recurso é recuperado instantaneamente de um cache.

Como melhorar o TTFB

Um guia detalhado sobre como otimizar o TTFB foi publicado com mais orientações sobre como melhorar a TTFB do seu site.