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:
Procure o nome de domínio e resolva-o 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, que retorna 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 viagem de ida e volta pode demorar bastante. 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 fazem o possível para prever quais conexões uma página precisará, mas não conseguem prever todas de modo confiável. A boa notícia é que você pode dar uma dica (com o recurso Energy ).
Ao adicionar rel=preconnect a um <link>, você informa ao navegador que sua página pretende estabelecer uma conexão com outro domínio e que você quer que o processo comece o mais rápido possível. Os recursos são carregados mais rapidamente porque o processo de configuração já foi concluído no momento em que 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 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">
Você pode acelerar o tempo de carregamento em 100 a 500 ms estabelecendo conexões iniciais com origens de terceiros importantes. Esses números podem parecer pequenos, mas fazem diferença na forma como os usuários percebem o desempenho de uma 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 é carregar imagens de uma CDN de imagem, em que o caminho exato de uma imagem depende de consultas de mídia ou verificações 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 fará o download do arquivo até que a página o solicite, mas pelo menos ele pode lidar com os aspectos de conexão com antecedência, evitando que o usuário tenha que esperar 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 não necessariamente começar a recuperar o conteúdo imediatamente, é ao transmitir mídia de uma origem diferente.
Dependendo de como sua página lida com o conteúdo transmitido, pode ser necessário 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 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ó funciona para domínios que não sejam o de origem, então não use esse recurso 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 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 busca DNS.
Resolva o nome de domínio antecipadamente com 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 se conectar a muitos domínios de terceiros, a pré-conexão de todos eles será contraprodutiva. A dica preconnect é melhor usada apenas para as conexões mais importantes. No restante, use <link rel=dns-prefetch> para poupar tempo na primeira etapa, a busca DNS, que geralmente leva de 20 a 120 ms.
A resolução de DNS é iniciada de maneira semelhante a preconnect: adicionando uma tag <link> ao <head> do documento.
<link rel="dns-prefetch" href="http://example.com">
A compatibilidade do navegador com dns-prefetch é um pouco diferente do preconnect suporte, por isso, dns-prefetch pode servir como substituto para navegadores que não são compatíveis com 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, onde 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 ao máximo o tempo de carregamento de um recurso de outra origem.
No caso da 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 isso, sinalizando a importância desse recurso para o navegador para que ele possa buscá-lo o quanto antes.
Quando não for possível tornar os recursos de LCP imediatamente detectáveis, um link preload, também com o valor fetchpriority de "high", permitirá 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 da página, use preconnect em recursos de origem cruzada para reduzir o máximo possível o impacto da descoberta posterior do recurso.
Além disso, o preconnect é mais barato que o preload em termos de uso de largura de banda, mas ainda há 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 recurso são úteis para aumentar a velocidade da página quando você sabe que fará 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. Não se esqueça das 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.