Saiba mais sobre as dicas de recursos rel=preconnect e rel=dns-prefetch e como usá-las.
Antes de poder solicitar um recurso de um servidor, o navegador precisa estabelecer uma conexão. Estabelecer uma conexão segura envolve três etapas:
Procure o nome de domínio e resolva-o para um endereço IP.
Estabelecer uma conexão com o servidor.
Criptografe a conexão para fins de segurança.
Em cada uma dessas etapas, o navegador envia um pedaço de dado para um servidor, e o servidor envia uma resposta. Esse trajeto, da origem ao destino e depois de volta, é chamado de ida e volta.
Dependendo das condições da rede, uma única viagem de 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 fiquem muito mais rápidos. Esta postagem explica como fazer isso com duas dicas de recursos: <link rel=preconnect> e <link rel=dns-prefetch>.
Estabeleça conexões iniciais com o rel=preconnect
Os navegadores mais recentes tentam ao máximo antecipar de quais conexões uma página vai precisar, mas não é possível prever todas elas de modo confiável. 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 fosse iniciado o mais rápido possível. Os recursos serão carregados mais rapidamente porque o processo de configuração já estará concluído quando o navegador os solicitar.
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ê quer que aconteçam, 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 optar por ignorar dicas 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 o desempenho da página da Web.
Casos de uso da rel=preconnect
Saber de onde, mas não o que você está buscando
Devido às dependências com controle de versões, às vezes você acaba em uma situação em que sabe que vai solicitar um recurso de uma CDN específica, mas não o caminho exato para isso.
Outro caso comum é o carregamento de imagens de uma CDN de imagens, em que o caminho exato para uma imagem depende de consultas de mídia ou verificações de recursos de tempo de execução no navegador do usuário.
Nessas situações, se o recurso que você buscará for importante, é importante se conectar ao servidor para economizar o máximo de tempo possível. O navegador não fará o download do arquivo até que sua página o solicite, mas, pelo menos, ele pode lidar com os aspectos de conexão antecipadamente, evitando que o usuário espere várias viagens de ida e volta.
Streaming de mídia
Outro exemplo em que você pode querer economizar tempo na fase de conexão, mas sem necessariamente começar a recuperar o conteúdo imediatamente, é fazer streaming de mídia de uma origem diferente.
Dependendo de como sua página lida com o conteúdo transmitido, é recomendável aguardar até que os scripts sejam carregados e estejam prontos para processar o stream. A pré-conexão ajuda a reduzir o tempo de espera para uma única viagem de ida e volta, assim que você estiver pronto para começar a busca.
Como implementar o rel=preconnect
Uma maneira de iniciar um preconnect é adicionar uma tag <link> ao <head> do documento.
<head>
<link rel="preconnect" href="https://example.com">
</head>
A pré-conexão só funciona em domínios diferentes do domínio de origem. Por isso, você não deve usá-la no seu site.
Também é possível iniciar uma pré-conexão usando o cabeçalho HTTP Link:
Link: <https://example.com/>; rel=preconnect
Alguns tipos de recursos, como fontes, são carregados no modo anônimo. Para eles, é necessário 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 vai realizar apenas a busca DNS.
Resolva o nome de domínio antecipadamente com rel=dns-prefetch
Você se lembra dos sites pelos nomes, mas os servidores os lembram pelo endereço IP. É por isso que existe o Sistema de Nomes de Domínio (DNS). O navegador usa DNS para converter o nome do site em um endereço IP. Esse processo (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, pré-conectar todos eles é contraprodutivo. A dica preconnect é melhor usada apenas para as conexões mais críticas. Para todo o restante, use <link rel=dns-prefetch> para economizar tempo na primeira etapa, a busca DNS, que geralmente leva de 20 a 120 ms.
A resolução de DNS é iniciada de forma semelhante a preconnect: adicionando uma tag <link> ao <head> do documento.
<link rel="dns-prefetch" href="http://example.com">
O suporte para dns-prefetch é um pouco diferente do preconnect . Portanto, 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">Para implementar a técnica de substituição com segurança, use tags de link separadas.
<link rel="preconnect dns-prefetch" href="http://example.com">Implementar o substituto
dns-prefetch na mesma tag <link> causa um bug no Safari em que o preconnect é cancelado.
Efeito na Maior exibição de conteúdo (LCP, na sigla em inglês)
Usar 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.
No que diz respeito à Maior exibição de conteúdo (LCP), é melhor que os recursos sejam imediatamente detectáveis, já que os candidatos à LCP são partes cruciais da experiência do usuário. Um valor fetchpriority de "high" nos recursos de LCP pode melhorar ainda mais, sinalizando a importância desse recurso para o navegador, para que ele possa buscá-lo mais cedo.
Quando não é possível tornar os recursos de LCP imediatamente detectáveis, 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 não será conhecido até mais tarde no carregamento de página, use preconnect em recursos de origem cruzada para reduzir ao máximo o impacto da descoberta tardia do recurso.
Além disso, preconnect é mais barato que preload em termos de uso de largura de banda, mas ainda tem alguns riscos. Como acontece com o excesso de dicas preload, o excesso de dicas preconnect ainda consome largura de banda quando os certificados TLS estão envolvidos. Tenha cuidado para não pré-conectar a muitas origens, porque isso pode causar contenção de largura de banda.
Conclusão
Essas duas dicas de recursos são úteis para 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. Os exemplos incluem CDNs que distribuem bibliotecas, imagens ou fontes JavaScript. Atente-se às 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.