Descubra como o servidor pode enviar dicas ao navegador sobre sub-recursos críticos.
O que são Early Hints?
Os sites se tornaram mais sofisticados com o tempo. Dessa forma, não é incomum um servidor precisar executar um trabalho não trivial (por exemplo, acesso a bancos de dados ou CDNs que acessam o servidor de origem) para produzir o HTML da página solicitada. Infelizmente, esse "tempo de reflexão do servidor" resulta em latência extra antes que o navegador possa começar a renderizar a página. De fato, a conexão fica ociosa enquanto o servidor estiver preparado para preparar a resposta.
Early Hints é um código de status HTTP (103 Early Hints) usado para enviar uma resposta HTTP preliminar antes de uma resposta final. Isso permite que um servidor envie dicas ao navegador sobre sub-recursos críticos (por exemplo, folhas de estilo para a página, JavaScript crítico) ou origens que provavelmente serão usadas pela página, enquanto o servidor está ocupado gerando o recurso principal. O navegador pode usar essas dicas para aquecer conexões e solicitar sub-recursos enquanto aguarda o recurso principal. Em outras palavras, as Early Hints ajudam o navegador a aproveitar esse "tempo de reflexão do servidor" realizando algum trabalho com antecedência, acelerando o carregamento das páginas.
Em alguns casos, a melhoria de desempenho para a Maior exibição de conteúdo pode ir de várias centenas de milissegundos, como observado pela Shopify e pelo Cloudflare, e até um segundo mais rápido, como mostrado nesta comparação de antes e depois:
Como usar as dicas iniciais
A primeira etapa para aproveitar as dicas iniciais consiste em identificar as principais páginas de destino, ou seja, as páginas que os usuários geralmente começam quando acessam seu site. Pode ser a página inicial ou páginas populares de informações do produto, se você tiver muitos usuários provenientes de outros sites. A razão pela qual esses pontos de entrada são mais importantes do que outras páginas é porque a utilidade de Early Hints diminui à medida que o usuário navega pelo site (ou seja, é mais provável que o navegador tenha todos os sub-recursos de que precisa na segunda ou terceira navegação). Também é sempre uma boa ideia passar uma ótima primeira impressão!
Agora que você tem essa lista priorizada de páginas de destino, a próxima etapa é identificar quais origens ou sub-recursos seriam bons candidatos para dicas preconnect ou preload. Normalmente, são as origens e os sub-recursos que mais contribuem para as principais métricas do usuário, como Maior exibição de conteúdo ou Primeira exibição de conteúdo. De forma mais concreta, procure sub-recursos que bloqueiam a renderização, como JavaScript síncrono, folhas de estilo ou até mesmo fontes da web. Da mesma forma, procure origens que hospedam sub-recursos que contribuam muito para as principais métricas do usuário.
Observe também que, se seus recursos principais já estiverem usando preconnect ou preload, essas origens ou recursos podem ser consideradas como candidatos para o Early Hints. Saiba como otimizar a LCP para mais detalhes. No entanto, copiar de forma simples as diretivas preconnect e preload do HTML para as Early Hints pode não ser ideal.
Ao usar esses elementos em HTML, você normalmente quer preconnect ou preload recursos que o verificador de pré-carregamento não descobrirá no HTML, por exemplo, fontes ou imagens de plano de fundo que, de outra forma, seriam descobertas tardiamente. Para Early Hints, você não terá o HTML, em vez de preconnect para domínios ou preload recursos críticos que talvez seriam descobertos no início do HTML, por exemplo, o pré-carregamento de main.css ou app.js. Além disso, nem todos os navegadores são compatíveis com preload para Dicas iniciais. Consulte Suporte a navegadores.
A segunda etapa consiste em minimizar o risco de usar as Dicas iniciais em recursos ou origens que possam estar obsoletos ou não sejam mais usados pelo recurso principal. Por exemplo, recursos que são atualizados com frequência e com controle de versões (por exemplo, example.com/css/main.fa231e9c.css) podem não ser a melhor escolha. Essa preocupação não é específica para Early Hints e se aplica a qualquer preload ou preconnect, onde quer que eles estejam presentes. Esse é o tipo de detalhe que melhor lida com automação ou modelos. Por exemplo, um processo manual tem mais probabilidade de levar a URLs de versão ou hash incompatíveis entre preload e a tag HTML real que usa o recurso.
Por exemplo, considere este fluxo:
GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]
O servidor prevê que main.abcd100.css será necessário e sugere o pré-carregamento usando o Early Hints:
103 Early Hints
Link: </main.abcd100.css>; rel=preload; as=style
[...]
Poucos minutos depois, a página da Web, incluindo o CSS vinculado, é exibida. Infelizmente, esse recurso de CSS é atualizado com frequência, e o recurso principal já está cinco versões à frente (abcd105) do recurso de CSS previsto (abcd100).
200 OK
[...]
<HTML>
<head>
<title>Example</title>
<link rel="stylesheet" href="/main.abcd105.css">
Em geral, busque recursos e origens que sejam bastante estáveis e, em grande parte, independentes do resultado do recurso principal. Se necessário, divida seus recursos principais em dois: uma parte estável projetada para ser usada com as Early Hints e uma parte mais dinâmica que pode ser buscada depois que o recurso principal é recebido pelo navegador:
<HTML>
<head>
<title>Example</title>
<link rel="stylesheet" href="/main.css">
<link rel="stylesheet" href="/experimental.3eab3290.css">
Finalmente, no lado do servidor, procure as principais solicitações de recursos enviadas por navegadores conhecidos por dar suporte a Early Hints e responder imediatamente com 103 Early Hints. Na resposta 103, inclua as dicas relevantes de pré-conexão e pré-carregamento. Quando o recurso principal estiver pronto, envie a resposta habitual (por exemplo, 200 OK se for bem-sucedido). Para compatibilidade com versões anteriores, é uma prática recomendada incluir também cabeçalhos HTTP Link na resposta final, talvez até mesmo aumentando recursos críticos que se tornaram evidentes como parte da geração do recurso principal (por exemplo, a parte dinâmica de um recurso chave se você seguiu a sugestão "split in two"). Veja como ficaria:
GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]
103 Early Hints
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script
Alguns instantes depois:
200 OK
Content-Length: 7531
Content-Type: text/html; charset=UTF-8
Content-encoding: br
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script
Link: </experimental.3eab3290.css>; rel=preload; as=style
<HTML>
<head>
<title>Example</title>
<link rel="stylesheet" href="/main.css">
<link rel="stylesheet" href="/experimental.3eab3290.css">
<script src="/common.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
Suporte ao navegador
Embora 103 Dicas iniciais sejam compatíveis com todos os principais navegadores, as diretivas que podem ser enviadas em uma dica básica diferem de acordo com o navegador:
Suporte de pré-conexão:
Compatibilidade com navegadores
- 103
- 103
- 120
- 17
Suporte de pré-carregamento:
Compatibilidade com navegadores
- 103
- 103
- 123
- x
O Chrome DevTools também tem suporte a 103 Early Hints.
Suporte a servidor
Aqui está um breve resumo do nível de suporte para Dicas iniciais entre softwares servidor HTTP de código aberto populares:
- Apache::compatível com mod_http2.
- H2O: compatível.
- NGINX:módulo experimental (em inglês).
- Nó: com suporte desde 18.11.0 para http e http2
Ative as dicas iniciais de forma mais fácil
Se você estiver usando uma das CDNs ou plataformas a seguir, talvez não precise implementar as dicas iniciais manualmente. Consulte a documentação on-line do seu provedor de soluções para descobrir se ele oferece suporte para Early Hints ou consulte a lista com alguns exemplos aqui:
- Dicas iniciais do Cloudflare
- Dicas iniciais do Fastly (link em inglês).
- Dicas iniciais da Akamai.
Como evitar problemas para clientes que não oferecem suporte ao Early Hints
As respostas HTTP informativas no intervalo 100 fazem parte do padrão HTTP, mas alguns clientes ou bots mais antigos podem ter dificuldades com elas porque, antes do lançamento do 103 Early Hints, eles raramente eram usados para navegação geral na Web.
A emissão de 103 Early Hints apenas em resposta a clientes que enviam um cabeçalho de solicitação HTTP sec-fetch-mode: navigate deve garantir que essas dicas sejam enviadas somente para clientes mais novos que entendam que devem aguardar a resposta subsequente. Além disso, como as Early Hints são compatíveis apenas com solicitações de navegação (consulte as limitações atuais), isso tem a vantagem de evitar o envio desnecessário dessas informações em outras solicitações.
Além disso, recomendamos que as primeiras dicas sejam enviadas somente por conexões HTTP/2 ou HTTP/3.
Padrão avançado
Se você tiver aplicado totalmente as dicas iniciais às principais páginas de destino e estiver procurando mais oportunidades, talvez se interesse pelo padrão avançado a seguir.
Para visitantes que estão na nth solicitação de página como parte de uma jornada típica do usuário, convém adaptar a resposta "Dicas iniciais" ao conteúdo que está mais abaixo na página, ou seja, usando "Dicas iniciais" em recursos de menor prioridade. Isso pode parecer pouco intuitivo, já que recomendamos o foco em origens ou sub-recursos de alta prioridade e bloqueadores de renderização. No entanto, depois que o visitante navegar por um tempo, é muito provável que o navegador já tenha todos os recursos essenciais. A partir daí, pode fazer sentido mudar sua atenção para recursos de menor prioridade. Por exemplo, isso pode significar usar dicas iniciais para carregar imagens de produtos ou JS/CSS adicional que é necessário apenas para interações menos comuns do usuário.
Limitações atuais
Estas são as limitações do Early Hints conforme implementado no Chrome:
- Disponível apenas para solicitações de navegação, ou seja, o recurso principal para o documento de nível superior.
- Compatível apenas com
preconnectepreload, ou seja,prefetchnão é compatível. - Dica inicial seguida por um redirecionamento de origem cruzada na resposta final fará com que o Chrome descarte os recursos e conexões obtidos usando Early Hints.
Outros navegadores têm limitações semelhantes, e alguns restringem 103 dicas iniciais somente a preconnect.
Qual é a próxima etapa?
Dependendo do interesse da comunidade, podemos ampliar nossa implementação do Early Hints com os seguintes recursos:
- Dicas iniciais enviadas em solicitações de sub-recursos.
- Dicas iniciais enviadas nas solicitações do recurso principal do iframe.
- Suporte para pré-busca em Early Hints.
Agradecemos sua opinião sobre quais aspectos devem ser priorizados e como melhorar ainda mais o Early Hints.
Relação com H2/Push
Se você já conhece o recurso HTTP2/Push descontinuado, talvez se pergunte qual é a diferença entre as dicas iniciais. Embora o Early Hints exija uma viagem de ida e volta para o navegador começar a buscar sub-recursos críticos, com HTTP2/Push o servidor pode começar a enviar sub-recursos junto com a resposta. Embora pareça incrível, isso resultou em uma desvantagem estrutural importante: com o HTTP2/Push, era extremamente difícil evitar o envio de sub-recursos que o navegador já tinha. Esse efeito de "excesso de pressão" resultou em um uso menos eficiente da largura de banda da rede, o que prejudicava significativamente os benefícios de desempenho. No geral, os dados do Chrome mostraram que o HTTP2/Push foi, na verdade, um negativo líquido para o desempenho na Web.
Em contrapartida, o Early Hints tem um desempenho melhor na prática porque combina a capacidade de enviar uma resposta preliminar com dicas que deixam o navegador responsável por buscar, ou se conectar ao, o que ele realmente precisa. Embora Early Hints não aborde todos os casos de uso que o HTTP2/Push poderia abordar na teoria, acreditamos que as Early Hints são uma solução mais prática para acelerar as navegações.
Imagem em miniatura por Pierre Bamin.