103 Early Hints: Faça o Preload de Recursos Críticos Durante o Tempo de Processamento do Servidor

Última revisão por Arjen Karel em março de 2026

O que são 103 Early Hints?

Early Hints é um código de status HTTP (103) enviado antes que o servidor web envie a resposta final. Ele permite que o servidor informe ao navegador, no início do processo de carregamento, que certos recursos como uma imagem ou folha de estilo são críticos para a renderização da página.

A maioria das páginas dinâmicas leva tempo para ser gerada. O servidor consulta um banco de dados, executa a lógica da aplicação e monta o HTML. Durante esse tempo de processamento, o navegador apenas espera. 103 Early Hints preenchem essa lacuna dizendo ao navegador o que buscar enquanto ele espera pela resposta real.

Early Hints substituem o obsoleto HTTP/2 Server Push, que o Chrome removeu na versão 106. O Server Push agrupava recursos com a resposta final e frequentemente empurrava bytes que o navegador já tinha em cache. Early Hints evitam esse problema porque são apenas dicas; o navegador decide se deve agir sobre elas.

Suporte dos navegadores

103 Early Hints são suportados por 93% dos navegadores globalmente:

• Chrome 103+ e Edge 103+: suporte total para preconnect e preload (desde junho de 2022)
• Firefox 123+: suporte total para preconnect e preload (desde fevereiro de 2024)
• Safari 17+: apenas preconnect. O Safari não suporta preload em respostas 103

A limitação do Safari é importante. Se sua estratégia de Early Hints depende inteiramente de preload de imagens ou fontes, os usuários do Safari não serão beneficiados. Inclua dicas de preconnect junto com dicas de preload para que o Safari ao menos aqueça a conexão com as origens de seus recursos.

Early Hints funcionam apenas em HTTP/2 ou HTTP/3. Eles não funcionam em HTTP/1.1, a partir de iframes ou para solicitações que não são de navegação. O navegador processa dicas para preload e preconnect apenas; dns-prefetch e prefetch não são suportados em respostas 103.

Como são os 103 Early Hints?

Quando um navegador solicita uma página, o servidor retorna imediatamente uma resposta 103 antes de terminar de gerar o HTML. Essa resposta diz ao navegador para começar a buscar a imagem LCP e a folha de estilo:

HTTP/2 103 Early Hints
Link: </image.webp>; rel=preload; as=image
Link: </style.css>; rel=preload; as=style

Enquanto isso, o servidor gera a página. Uma vez pronta, ele envia a resposta final:

HTTP/2 200 OK
Content-Length: 1234
[o restante da resposta]

Quando o navegador recebe a resposta 200, ele já começou a baixar a imagem e a folha de estilo. Essa vantagem inicial é o que torna o Largest Contentful Paint mais rápido.

Como enviar 103 Early Hints

Você tem três opções principais, da mais fácil à de maior controle.

Cloudflare (mais fácil)

Se você já usa o Cloudflare para performance, habilitar Early Hints é apenas uma chave. Navegue até Speed > Settings > Content Optimization e ative Early Hints. Está disponível em todos os planos, incluindo o gratuito.

O Cloudflare armazena em cache os cabeçalhos Link das respostas 200 da sua origem. Nas solicitações subsequentes, ele envia esses cabeçalhos em cache como uma resposta 103 antes de encaminhar a solicitação para sua origem. Você fornece as dicas enviando cabeçalhos Link a partir da sua aplicação:

header("Link: </image.webp>; rel=preload; as=image", false);
header("Link: </style.css>; rel=preload; as=style", false);

NGINX (nativo desde 1.29.0)

O NGINX adicionou suporte nativo a 103 Early Hints na versão 1.29.0 (junho de 2025). A diretiva early_hints encaminha respostas 103 do seu backend para o cliente:

map $http_sec_fetch_mode $early_hints {
    navigate $http2$http3;
}

server {
    location / {
        early_hints $early_hints;
        proxy_pass http://backend.example.com;
    }
}

O mapa sec-fetch-mode garante que as dicas sejam enviadas apenas para solicitações de navegação em HTTP/2 ou HTTP/3. Sua aplicação de backend deve gerar a resposta 103; o NGINX simplesmente a repassa.

Apache (2.4.58+)

O Apache pode gerar respostas 103 por conta própria usando o mod_http2. Habilite-o com a diretiva H2EarlyHints e defina os recursos para as dicas:

H2EarlyHints on
H2EarlyHint Link "</style.css>;rel=preload;as=style"
H2EarlyHint Link "</image.webp>;rel=preload;as=image"

Diferente do NGINX, o Apache gera a resposta 103 no nível do servidor sem precisar que sua aplicação a produza.

Quando Early Hints ajudam (e quando não ajudam)

103 Early Hints são mais eficazes quando seu servidor leva um tempo perceptível para responder: páginas dinâmicas que consultam bancos de dados, chamam APIs ou renderizam templates. Quanto mais lento o Time to First Byte, mais tempo o navegador tem para agir sobre as dicas.

Early Hints oferecem menos benefícios quando:

• Seu servidor responde em menos de 100ms. Se o TTFB já é rápido, não há lacuna para o navegador preencher. Foque na priorização de recursos no seu HTML em vez disso.
• As páginas são servidas do cache. Uma resposta HTML totalmente em cache carrega tão rápido que a resposta 103 mal tem vantagem inicial.
• Você dá dicas de muitos recursos. Dar dicas de 10 ou mais recursos satura a conexão e pode desacelerar as coisas. A Shopify descobriu que, em dispositivos móveis, o uso agressivo de dicas levou à degradação de desempenho em TTFB, FCP e LCP. Limite-se a 2 a 4 recursos críticos.

Apesar de 93% de suporte dos navegadores, a adoção continua baixa. De acordo com o Web Almanac de 2025, apenas cerca de 5% dos principais sites usam 103 Early Hints. A principal barreira é saber de quais recursos dar dicas para cada página, algo que a maioria dos CMSs não lida automaticamente.

Como verificar se Early Hints estão funcionando

Abra o Chrome DevTools, vá para o painel Network e recarregue a página. Clique na solicitação do documento e verifique os cabeçalhos de resposta. Se Early Hints estiverem funcionando, você verá um status 103 antes do 200 na análise de tempo.

Pela linha de comando, você pode verificar com curl:

curl -v --http2 https://example.com 2>&1 | grep "< HTTP"

Você deve ver tanto uma resposta 103 quanto uma 200.

Resultados dos testes

Eu testei dois cenários para medir o impacto no First Contentful Paint e no Largest Contentful Paint.

1. Early Hints apenas na imagem LCP

A imagem LCP apareceu na tela 35% mais cedo com 103 Early Hints em comparação com um preload regular no HTML.

HTTP/2 103 Early Hints
Link: </image.webp>; rel=preload; as=image

2. Early Hints com uma folha de estilo grande e a imagem LCP

Adicionar um arquivo CSS de 85kb às dicas tornou a diferença ainda mais notável. O FCP melhorou de 1,8 segundos para 1,4 segundos, e o LCP melhorou de 3,2 segundos para 2,0 segundos.

HTTP/2 103 Early Hints
Link: </image.webp>; rel=preload; as=image
Link: </style.css>; rel=preload; as=style

Esses números se alinham com o que o Cloudflare mediu em mais de 100.000 clientes: uma melhoria no LCP de 6% no 50º percentil e de 16% no 75º percentil no desktop. A Shopify viu uma melhoria de 500ms no LCP no p50 durante a Black Friday e a Cyber Monday. Os maiores ganhos vêm em páginas com tempos lentos de resposta do servidor, que é exatamente quando Early Hints têm mais tempo para funcionar.

Early Hints e TTFB

Há uma nuance de medição a ser observada. Desde o Chrome 133, a métrica responseStart do navegador (usada pela maioria das ferramentas para relatar o TTFB) inclui a resposta 103. Isso significa que o TTFB relatado cairá após habilitar Early Hints, mesmo que o tempo real de processamento do seu servidor não tenha mudado.

Se você precisar medir o tempo de processamento do servidor separadamente, o Chrome 133 introduziu um novo registro de data e hora firstResponseHeadersStart que relata quando os cabeçalhos da resposta final 200 chegam. Ferramentas de Real User Monitoring que rastreiam ambos os valores dão a você a visão completa: quanto tempo os Early Hints economizaram para o navegador e quanto tempo o servidor realmente levou para responder.