Saiba mais sobre as dicas de recursos rel=preconnect e rel=dns-prefetch e como usá-las.
Antes que o navegador possa solicitar um recurso de um servidor, ele precisa estabelecer uma conexão. Estabelecer uma conexão segura envolve três etapas:
Procura o nome de domínio e o resolve para um endereço IP.
Configure uma conexão com o servidor.
Criptografe a conexão por segurança.
Em cada uma dessas etapas, o navegador envia uma parte dos dados para um servidor, e o servidor envia uma resposta. Esse percurso, da origem ao destino e volta, é chamado de viagem de ida e volta.
Dependendo das condições da rede, uma única ida e volta pode levar um tempo considerável. O processo de configuração da conexão pode envolver até três viagens de ida e volta, e mais em casos não otimizados.
Cuidar de tudo isso com antecedência faz com que os aplicativos pareçam muito mais rápidos. Esta postagem explica como fazer isso com duas dicas de recursos: <link rel=preconnect> e <link rel=dns-prefetch>.
Estabelecer conexões iniciais com rel=preconnect
Os navegadores modernos tentam ao máximo prever quais conexões uma página vai precisar, mas não conseguem prever todas com precisão. A boa notícia é que você pode dar uma dica (recurso 😉).
Adicionar rel=preconnect a um <link> informa ao navegador que sua página pretende estabelecer uma conexão com outro domínio e que você gostaria que o processo começasse o mais rápido possível. Os recursos vão carregar mais rapidamente porque o processo de configuração já foi concluído quando o navegador os solicita.
As dicas de recursos recebem esse nome porque não são instruções obrigatórias. Elas fornecem as informações sobre o que você gostaria que acontecesse, mas, em última análise, cabe ao navegador decidir se quer executá-las. Configurar e manter uma conexão aberta é muito trabalhoso. Por isso, o navegador pode ignorar as sugestões de recursos ou executá-las parcialmente, dependendo da situação.
Informar sua intenção ao navegador é tão simples quanto adicionar uma tag <link> à sua página:
<link rel="preconnect" href="https://example.com">
É possível acelerar o tempo de carregamento em 100 a 500 ms estabelecendo conexões antecipadas a origens importantes de terceiros. Esses números podem parecer pequenos, mas fazem diferença na forma como os usuários percebem a performance da página da Web.
Casos de uso de rel=preconnect
Saber de onde, mas não o que você está buscando.
Devido às dependências com controle de versão, às vezes você acaba solicitando um recurso de uma CDN específica, mas não o caminho exato para ele.
O outro caso comum é o carregamento de imagens de um CDN de imagens, em que o caminho exato de uma imagem depende de consultas de mídia ou da verificação de recursos do ambiente de execução no navegador do usuário.
Nessas situações, se o recurso que você buscará for importante, conecte-se previamente ao servidor para economizar o máximo de tempo possível. O navegador não vai fazer o download do arquivo até que a página solicite, mas pelo menos ele pode processar os aspectos da conexão com antecedência, poupando o usuário da espera de várias viagens de ida e volta.
Mídia de streaming
Outro exemplo em que você pode querer economizar tempo na fase de conexão, mas não necessariamente começar a recuperar o conteúdo imediatamente, é ao transmitir mídia de uma origem diferente.
Dependendo da forma como a página lida com o conteúdo de streaming, talvez você queira esperar até que os scripts sejam carregados e estejam prontos para processar a transmissão. A pré-conexão ajuda a reduzir o tempo de espera de uma única viagem de ida e volta quando você está pronto para iniciar a busca.
Como implementar rel=preconnect
Uma forma de iniciar uma preconnect é adicionar uma tag <link> ao <head> do documento.
<head>
<link rel="preconnect" href="https://example.com">
</head>
A pré-conexão só é eficaz para domínios que não são o de origem. Portanto, não use esse recurso no seu site.
Também é possível iniciar uma pré-conexão pelo cabeçalho HTTP Link:
Link: <https://example.com/>; rel=preconnect
Alguns tipos de recursos, como fontes, são carregados no modo anônimo. Para aqueles, você precisa definir o atributo crossorigin com a dica preconnect:
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
Se você omitir o atributo crossorigin, o navegador só vai realizar a pesquisa DNS.
Resolver o nome de domínio com antecedência usando rel=dns-prefetch
Você se lembra dos sites pelo nome, mas os servidores os lembram pelos endereços IP. É por isso que o Sistema de Nomes de Domínio (DNS) existe. O navegador usa o DNS para converter o nome do site em um endereço IP. Esse processo, a resolução de nome de domínio, é a primeira etapa para estabelecer uma conexão.
Se uma página precisar fazer conexões com muitos domínios de terceiros, a pré-conexão de todos eles será contraproducente. A sugestão preconnect é melhor usada apenas para as conexões mais importantes. Para o restante, use <link rel=dns-prefetch> para economizar tempo na primeira etapa, a pesquisa DNS, que geralmente leva cerca de 20 a 120 ms.
A resolução de DNS é iniciada de forma semelhante à preconnect: adicionando uma tag <link> ao <head> do documento.
<link rel="dns-prefetch" href="http://example.com">
O suporte do navegador para dns-prefetch é um pouco diferente do preconnect suporte, então dns-prefetch pode servir como um substituto para navegadores que não oferecem suporte a preconnect.
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">
<link rel="preconnect dns-prefetch" href="http://example.com">
dns-prefetch na mesma tag <link> causa um bug no Safari, em que preconnect é cancelado.
Efeito na maior exibição de conteúdo (LCP)
O uso de dns-prefetch e preconnect permite que os sites reduzam o tempo necessário para se conectar a outra origem. O objetivo final é minimizar o tempo de carregamento de um recurso de outra origem.
Em relação à Largest Contentful Paint (LCP), é melhor que os recursos sejam imediatamente detectáveis, já que os candidatos de LCP são partes cruciais da experiência do usuário. Um valor fetchpriority de "high" nos recursos de LCP pode melhorar ainda mais isso, sinalizando a importância desse recurso para o navegador para que ele possa buscá-lo o quanto antes.
Quando não é possível tornar os recursos LCP detectáveis imediatamente, um link preload, também com o valor fetchpriority de "high", ainda permite que o navegador carregue o recurso o mais rápido possível.
Se nenhuma dessas opções estiver disponível porque o recurso exato só será conhecido mais tarde no carregamento da página, use preconnect em recursos de origem cruzada para reduzir o impacto da descoberta tardia do recurso.
Além disso, o preconnect é menos caro que o preload em termos de uso de largura de banda, mas ainda tem riscos. Como acontece com o excesso de dicas preload, o excesso de dicas preconnect ainda consome a largura de banda quando os certificados TLS estão relacionados. Tenha cuidado para não se pré-conectar a muitas origens, porque isso pode causar contenção de largura de banda.
Conclusão
Essas duas dicas de recursos ajudam a melhorar a velocidade da página quando você sabe que vai fazer o download de algo de um domínio de terceiros em breve, mas não sabe o URL exato do recurso. Exemplos incluem CDNs que distribuem bibliotecas, imagens ou fontes JavaScript. Tenha cuidado com as restrições, use preconnect apenas para os recursos mais importantes, use dns-prefetch para o restante e sempre meça o impacto no mundo real.