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.
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 tenha chegado
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 marcação de tempo adicional para o responseStart para diferenciá-los, 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 iniciais são apenas um exemplo mais recente de como responder cedo. 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 para o 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 levar mais tempo. 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 em dados de campo. Os testes de laboratório normalmente são menos afetados por esses fatores, pois o URL final geralmente é testado e, muitas vezes, nega repetidamente alterações em cache. O Lighthouse informa o tempo de resposta do servidor em vez do TTFB para deixar essa informação mais clara, mas outras ferramentas de laboratório talvez não.
Qual é uma boa pontuação de TTFB?
Como o TTFB antecede as métricas centradas no usuário, como First Contentful Paint (FCP) e Largest Contentful Paint (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 aproximado, a maioria dos sites precisa ter um TTFB de 0,8 segundos ou menos.
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
- No painel de rede do Chrome DevTools
- WebPageTest (em inglês)
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 as 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.