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 de 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 convencional, mas com a introdução das Early Hints, o que é considerado o "primeiro byte" está pronto para o debate. O firstInterimResponseStart é uma nova entrada de marcação de tempo adicional para a 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 as dicas iniciais.
As dicas iniciais são apenas um exemplo mais recente de como responder cedo. Alguns servidores permitem a limpeza da resposta do documento antes que o corpo principal esteja disponível, seja com apenas os cabeçalhos HTTP ou com o elemento <head>, os quais podem ser considerados semelhantes em efeito às dicas iniciais e, portanto, também atrapalham a definição do que o TTFB mede.
Como medida de quando os "primeiros bytes" de dados acionáveis do documento são recebidos pelo navegador, todas essas definições podem ser consideradas válidas. Há um valor real em retornar dados com antecedência se a resposta completa demorar um pouco mais. O mais importante é entender qual medida a ferramenta que você está usando mede e como isso é afetado pela plataforma que está sendo medida. Isso dificulta a comparação do TTFB entre diferentes plataformas ou tecnologias, dependendo de quais recursos eles usam e como isso afeta a medição do TTFB usada.
O TTFB também é frequentemente considerado um indicador do tempo de resposta do servidor ou do host. No entanto, ele será afetado por fatores fora desse controle direto, como o tempo de redirecionamento, se for veiculado de uma ocorrência em cache por uma CDN ou se terá que fazer uma jornada possivelmente mais longa de volta a 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 no TTFB?
Como o TTFB antecede as métricas centradas no usuário, como First Contentful Paint (FCP) e Largest Contentful Paint (LCP), é recomendado que seu servidor responda às solicitações de navegação com rapidez suficiente para que o 75o percentil dos usuários tenha uma FCP na classificação "boa" limite. Em termos gerais, a maioria dos sites deve ter um TTFB de 0,8 segundos ou menos.
Como medir o TTFB
O TTFB pode ser medido no laboratório ou em campo das seguintes maneiras.
Ferramentas de campo
Ferramentas do laboratório
- No painel rede do DevTools do Chrome
- WebPageTest
Medir o TTFB em JavaScript
Você pode medir o TTFB de 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 introduzir latência devido à necessidade de configurar conexões com esses servidores. Para medir o TTFB para 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 para uma solicitação de navegação, exceto que, em vez de consultar entradas 'navigation', você consulta entradas 'resource'. Isso também considera que alguns recursos carregados da origem primária podem retornar um valor 0, porque 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.