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. O estabelecimento de uma conexão segura envolve três etapas:
Pesquisar o nome de domínio e resolvê-lo em um endereço IP.
Configurar uma conexão com o servidor.
Criptografar a conexão para segurança.
Em cada uma dessas etapas, o navegador envia um pedaço de dados para um servidor, e o servidor envia uma resposta. Essa jornada, da origem ao destino e de volta, é chamada de viagem de ida e volta.
Dependendo das condições da rede, uma única viagem de ida e volta pode levar um tempo significativo. 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. Neste post, explicamos como fazer isso com duas dicas de recursos: <link rel=preconnect> e <link rel=dns-prefetch>.
Estabelecer conexões antecipadas com rel=preconnect
Os navegadores modernos fazem o possível para antecipar quais conexões uma página vai precisar, mas não podem prever todas elas de forma confiável. A boa notícia é que você pode dar uma dica (de recurso 😉) a eles.
A adição de 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 serão carregados 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 informações sobre o que você gostaria que acontecesse, mas, em última análise, cabe ao navegador decidir se vai executá-las. Configurar e manter uma conexão aberta é muito trabalho, então o navegador pode optar por ignorar as dicas de recursos ou executá-las parcialmente, dependendo da situação.
Informar o navegador sobre sua intenção é 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 com origens importantes de terceiros. Esses números podem parecer pequenos, mas fazem a diferença na forma como os usuários percebem o desempenho da página da Web.
Casos de uso para rel=preconnect
Saber de onde, mas não o que você está buscando
Devido a dependências versionadas, à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 ele.
O 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ê vai buscar for importante, economize o máximo de tempo possível pré-conectando-se ao servidor. O navegador não vai fazer o download do arquivo até que sua página o solicite, mas pelo menos ele pode processar os aspectos de conexão com antecedência, evitando que o usuário espere várias viagens de ida e volta.
Streaming de mídia
Outro exemplo em que você pode economizar tempo na fase de conexão, mas não necessariamente começar a recuperar conteúdo imediatamente, é ao transmitir mídia de uma origem diferente.
Dependendo de como sua página processa o conteúdo transmitido, talvez você queira esperar 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 quando você estiver pronto para começar a buscar.
Como implementar rel=preconnect
Uma maneira 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 diferentes do domínio de origem. Portanto, não use para seu site.
Também é possível iniciar uma pré-conexão pelo Link cabeçalho HTTP:
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 só vai realizar a busca DNS.
Resolver o nome de domínio antecipadamente com rel=dns-prefetch
Você se lembra dos sites pelos nomes, mas os servidores se lembram deles por 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 nomes 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 dica preconnect é melhor usada apenas para as conexões mais críticas. Para todas as outras, use <link rel=dns-prefetch> para economizar tempo na primeira etapa, a busca DNS, que geralmente leva cerca de 20 a 120 ms.
A resolução de DNS é iniciada de maneira 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 suporte 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">
<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 no Largest Contentful Paint (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 é que o tempo para carregar um recurso de outra origem seja minimizado o máximo possível.
No que diz respeito a Largest Contentful Paint (LCP), é melhor que os recursos sejam imediatamente detectáveis, já que os candidatos a LCP são partes cruciais da experiência do usuário. Um fetchpriority valor de "high" em recursos LCP pode melhorar ainda mais isso, sinalizando a importância desse recurso para o navegador, para que ele possa buscá-lo antecipadamente.
Quando não for possível tornar os recursos LCP imediatamente detectáveis, um preload link, 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, você poderá usar preconnect em recursos de origem cruzada para reduzir o impacto da descoberta tardia do recurso o máximo possível.
Além disso, preconnect é menos caro que preload em termos de uso de largura de banda, mas ainda não está livre de riscos. Assim como acontece com dicas preload excessivas, dicas preconnect excessivas ainda consomem largura de banda quando se trata de certificados TLS. Tenha cuidado para não se conectar antecipadamente 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 de 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 JavaScript, imagens ou fontes. Esteja atento às restrições, use preconnect apenas para os recursos mais importantes, confie em dns-prefetch para o restante e sempre meça o impacto no mundo real.