Carregamentos de página mais rápidos usando o tempo de reflexão do servidor com dicas iniciais

Descubra como o servidor pode enviar dicas ao navegador sobre sub-recursos críticos.

O que são as dicas iniciais?

Os sites se tornaram mais sofisticados com o tempo. Assim, não é incomum um servidor precisar realizar 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 inativa enquanto o servidor levar 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, folha de estilo da 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 pensamento do servidor" realizando um trabalho com antecedência, acelerando o carregamento da página.

Em alguns casos, a melhoria de desempenho para a Maior exibição de conteúdo pode ir de várias centenas de milissegundos, conforme observado pelo Shopify e pela Cloudflare, e até um segundo mais rápido, como mostrado nesta comparação de antes/depois:

Como implementar as dicas iniciais

Antes de se aprofundar nesse assunto, saiba que as dicas iniciais não são úteis se o seu servidor consegue enviar uma resposta 200 (ou outras respostas finais) imediatamente. Em vez disso, use o link rel=preload ou link rel=preconnect normal na resposta principal (cabeçalho HTTP Link rel) ou na resposta principal (elementos <link>), nessas situações. Nos casos em que o servidor precisa de algum tempo para gerar a resposta principal, continue lendo.

O primeiro passo 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 vindo de outros sites. A razão pela qual esses pontos de entrada são mais importantes do que outras páginas é porque a utilidade das Dicas iniciais diminui à medida que o usuário navega pelo site (ou seja, é mais provável que o navegador tenha todos os sub-recursos necessários na segunda ou terceira navegação). Também é sempre uma boa ideia causar uma ótima primeira impressão!

Agora que você tem essa lista priorizada de páginas de destino, a próxima etapa consiste em identificar quais origens ou sub-recursos seriam bons candidatos para dicas de pré-conexão ou pré-carregamento, como primeira aproximação. Normalmente, são origens e 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 de bloqueio de 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 contribuem muito para as principais métricas do usuário. Observação: se seus principais recursos já estiverem usando <link rel=preconnect> ou <link rel=preload>, considere essas origens ou recursos entre os candidatos para o Early Hints. Consulte este artigo para mais detalhes.

A segunda etapa consiste em minimizar o risco de usar as Dicas iniciais em recursos ou origens que podem estar obsoletos ou não serem mais usados pelo recurso principal. Por exemplo, recursos atualizados e com controle de versões com frequência (como example.com/css/main.fa231e9c.css) podem não ser a melhor opção. Essa preocupação não é específica das Early Hints. Ela se aplica a qualquer link rel=preload ou rel=preconnect onde quer que estejam presentes. Esse é o tipo de detalhe mais adequado 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 link rel=preload e a tag HTML real que usa o recurso.

Por exemplo, considere o fluxo a seguir:

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 as dicas iniciais:

103 Early Hints
Link: </main.abcd100.css>; rel=preload; as=style
[...]

Momentos depois, a página da Web, incluindo o CSS vinculado, é exibida. Infelizmente, esse recurso CSS é atualizado com frequência, e o recurso principal já está cinco versões à frente (abcd105) do recurso CSS previsto (abcd100).

200 OK
[...]
<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.abcd105.css">

Em geral, procure recursos e origens bastante estáveis e, em grande parte, independentes do resultado do recurso principal. Se necessário, você pode dividir seus recursos principais em dois: uma parte estável projetada para ser usada com as dicas iniciais e uma parte mais dinâmica que pode ser buscada depois que o recurso principal for recebido pelo navegador:

<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.css">
   <link rel="stylesheet" href="/experimental.3eab3290.css">

Por fim, no lado do servidor, procure solicitações de recursos principais enviadas por navegadores conhecidos por dar suporte a Early Hints e responda imediatamente com 103 Early Hints. Na resposta 103, inclua as dicas de pré-conexão e pré-carregamento relevantes. Quando o recurso principal estiver pronto, envie a resposta normal (por exemplo, 200 OK se for bem-sucedido). Para compatibilidade com versões anteriores, é recomendável incluir também cabeçalhos HTTP Link na resposta final, talvez até incrementando os 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 "dividir em dois"). Veja como isso 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 Early Hints seja suportado em todos os principais navegadores, as diretivas que podem ser enviadas em uma Early Hint variam de acordo com o navegador:

Suporte de pré-conexão:

Suporte de pré-carregamento:

Suporte a servidor

Aqui está um resumo rápido do nível de suporte para dicas iniciais entre os softwares de servidor HTTP OSS mais conhecidos:

• Apache::compatível com mod_http2.
• H2O: compatível.
• NGINX:módulo experimental (em inglês).
• Nó:com suporte desde a versão 18.11.0 para http e http2.

Ativar as dicas iniciais, do jeito mais fácil

Se você estiver usando uma das CDNs ou plataformas a seguir, talvez não seja necessário implementar manualmente as Early Hints. Consulte a documentação on-line do seu provedor de soluções para descobrir se ela oferece suporte para dicas iniciais ou consulte a lista com alguns exemplos aqui:

• Dicas iniciais do Cloudflare
• Dicas iniciais do Fastly (em inglês).
• Dicas iniciais da Akamai (em inglês).

Como evitar problemas para clientes que não são compatíveis com as dicas iniciais

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 apenas de 103 Early Hints em resposta a clientes que enviam um cabeçalho de solicitação HTTP sec-fetch-mode: navigate garante que essas dicas sejam enviadas apenas para clientes mais novos que entendam que devem aguardar a resposta subsequente. Além disso, como as dicas iniciais são aceitas apenas em solicitações de navegação (consulte as limitações atuais), isso tem a vantagem adicional de evitar o envio desnecessário em outras solicitações.

Além disso, recomenda-se que as dicas iniciais sejam enviadas apenas por conexões HTTP/2 ou HTTP/3.

Padrão avançado

Se você tiver aplicado totalmente as dicas iniciais às suas principais páginas de destino e estiver procurando mais oportunidades, talvez se interesse pelo seguinte padrão avançado.

Para os visitantes que estão na na 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 é mais baixo e mais profunda na página, ou seja, usando Dicas iniciais em recursos de menor prioridade. Isso pode parecer pouco intuitivo, já que recomendamos focar em origens ou sub-recursos de alta prioridade e bloqueadores de renderização. No entanto, quando o visitante navega por algum 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 adicionais que são necessários apenas para interações menos comuns do usuário.

Limitações atuais

Estas são as limitações do Early Hints conforme implementado no Google 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 preconnect e preload, ou seja, prefetch não é compatível.
• O Early Hint seguido por um redirecionamento de origem cruzada na resposta final fará com que o Chrome descarte os recursos e as conexões obtidos por meio do Early Hints.

Outros navegadores têm limitações semelhantes e restringem ainda mais as 103 dicas iniciais para preconnect.

A seguir

Dependendo do interesse da comunidade, podemos aumentar nossa implementação das dicas iniciais com os seguintes recursos:

• Dicas antecipadas enviadas em solicitações de recursos secundários.
• Dicas antecipadas enviadas em solicitações de recursos principais do iframe.
• Suporte para pré-busca em Early Hints.

Agradecemos sua opinião sobre quais aspectos priorizar 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. Enquanto as dicas iniciais exigem uma ida e volta para o navegador começar a buscar sub-recursos críticos, com HTTP2/Push, o servidor pode 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. Em geral, os dados do Chrome mostraram que o HTTP2/Push foi, na verdade, um negativo líquido para o desempenho na Web.

Em contraste, as dicas iniciais se saem melhor na prática porque combinam a capacidade de enviar uma resposta preliminar com dicas que deixam o navegador responsável por buscar, ou se conectar, ao que ele realmente precisa. Embora Early Hints não abranja todos os casos de uso que o HTTP2/Push poderia abordar em teoria, acreditamos que Early Hints é uma solução mais prática para acelerar navegações.

Imagem em miniatura de Pierre Bamin.