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.
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.
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
- No painel de rede do DevTools do Chrome
- WebPageTest
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.