103 Early hints

Acelere recursos críticos com 103 Early hints

Arjen Karel - linkedin

Last update: 2024-11-27

"103 early hints" em resumo

O 103 Early hints é um HTTP header de servidor leve e 'não final' com o código de status 103 e o nome early hints. Este header é especial porque é enviado antes que a 'verdadeira' resposta do servidor seja enviada. O seu navegador pode usar este header para buscar recursos críticos antes que a página seja recebida e renderizada.

Testes mostram que sem os resource hints 103 uma imagem LCP aparece 45% mais devagar na tela. A melhoria foi ainda maior quando o header 103 também incluiu folhas de estilo

O que são 103 - early hints?

Early hints é um HTTP header enviado antes que o servidor da web envie a resposta HTTP final. Os HTTP headers permitem que o cliente e o servidor passem informações adicionais com uma solicitação ou resposta HTTP.
Este HTTP header permite ao servidor dar uma dica (hint) ao navegador do cliente, num estágio inicial durante o processo de carregamento, de que certos recursos, como uma imagem ou um stylesheet, são 'críticos' para a renderização da página.

Os early resource hints são uma melhoria em relação ao obsoleto server push do HTTP/2, onde os resource hints eram agrupados com a resposta final do servidor. A diferença com o server push é que os resource hints podem ser recebidos muito antes, de modo que o navegador também possa começar o download mais cedo.

Como um navegador usa os 103 - early hints?

Atualmente, os early hints são suportados apenas pelo Google Chrome a partir da versão 94. Como os early hints ainda são uma função experimental, você precisará iniciar o Chrome com uma chamada Chrome Browser Flag através da linha de comando. No meu caso, tenho que iniciar o Chrome pelo terminal com o comando:

google-chrome --enable-features=EarlyHintsPreloadForNavigation

Os early hints não funcionam quando:

Early hints de uma origem diferente do assunto principal (o HTML) são enviados
Early hints são enviados de um iframe
Early hints são enviados usando HTTP/1.1 ou anterior
Early hints contêm um dns-prefetch ou prefetch hint

Os early hints só funcionarão para resource hints de preload e preconnect quando enviados do documento principal sobre HTTP/2 ou HTTP/3. Não é permitido passar o header de early hints a partir de, por exemplo, uma imagem ou um iframe.

Como se parecem os 103 early hints?

Após implementar os 103 early hints, assim que um navegador solicita uma página da web, um header de 103 early hints é retornado imediatamente. Por exemplo, este header indica que image.webp e style.css devem ter o preload feito.

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

Enquanto isso, o servidor pode começar a gerar a 'verdadeira' resposta HTTP. Para páginas dinâmicas, isso pode levar um pouco de tempo. Depois que o servidor estiver pronto para enviá-la, a resposta final é enviada.

HTTP/1.1 200 OK
Date: Thurs, 16 Sept 2021 11:30:00 GMT
Content-Length: 1234
[o resto da resposta]

Enviar 103 early hints

Em termos de PageSpeed, a abordagem mais rápida para enviar 103 early hints é através do seu próprio servidor. Use este guia para configurar você mesmo os 103 early hints no servidor web Apache ou através do módulo NGINX experimental. Habilitar os 103 early hints não é fácil de fazer e eles ainda não se integram bem com CMSs populares como o WordPress.

É por isso que a maneira mais fácil de ativar os early hints agora é através da Cloudflare. Inscreva-se para obter os early hints. Assim que for admitido, navegue até 'Speed' -> 'Optimization' e ative Early Hints

early hints cloudflare

A Cloudflare aceitará os headers de resource hint e os traduzirá em um header 103 early resource. Você pode simplesmente enviar um early hint enviando um header de preload ou preconnect. A Cloudflare então traduz isso em um header de 103 early hint.
Com PHP e Cloudflare, os 103 early hints podem ser enviados com este código:

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

Resultados do Lighthouse para os 103 early hints

A pergunta mais importante é, claro: "O que 103 early resource significa para os meus Core Web Vitals?" Eu testei 2 cenários comuns.

1. Early resource hint no elemento LCP

Imediatamente após o primeiro teste, notei o quão eficazes os early hints podem ser. O elemento LCP (uma imagem) apareceu na tela 35% mais cedo do que sem a presença do header 103 early hints.

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

Apenas preloading

103 Early hints

2. Early resource hint com um stylesheet grande e o elemento LCP

Para o segundo teste, adicionei um arquivo CSS de 85kb à página. A diferença nos resultados do Core Web Vitals é ainda mais notável. A First Contentful Paint (FCP) melhorou de 1.8 segundos para 1.4 segundos e a Largest Contentful Paint (LCP) melhorou de 3.2 segundos para meros 2 segundos.

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

Apenas preloading

103 Early hints

Find out what is actually slow.

I map your critical rendering path using real field data. You get a clear answer on what blocks LCP, what causes INP spikes, and where layout shifts originate.

Book a Deep Dive