Estabeleça conexões de rede com antecedência para melhorar a velocidade percebida da página
Saiba mais sobre dicas de recursos rel = preconnect e rel = dns-prefetch e como usá-los.
Antes que o navegador possa solicitar um recurso de um servidor, ele deve estabelecer uma conexão. Estabelecer uma conexão segura envolve três etapas:
Procurar o nome de domínio e resolvê-lo para um endereço IP.
Configurar uma conexão com o servidor.
Criptografar a conexão para ter segurança.
Em cada uma dessas etapas, o navegador envia uma parte dos dados a um servidor e o servidor envia de volta uma resposta. Essa viagem, da origem ao destino e de volta, é chamada 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 até mais em casos não otimizados.
Cuidar de tudo isso com antecedência torna os aplicativos muito mais rápidos. Esta postagem explica como conseguir isso com duas dicas de recursos: <link rel=preconnect> e <link rel=dns-prefetch> .
Estabeleça conexões iniciais com rel=preconnect #
Os navegadores modernos fazem o melhor que podem para prever quais conexões uma página precisará, mas não podem prever todas com segurança. A boa notícia é que você pode dar a eles uma dica do (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á 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. Eles fornecem as informações sobre o que você gostaria que acontecesse, mas, em última análise, cabe ao navegador decidir se deseja executá-los. Configurar e manter uma conexão aberta dá muito trabalho, então o navegador pode escolher ignorar dicas de recursos ou executá-las parcialmente, dependendo da situação.
Informar o navegador da sua intenção é tão simples quanto adicionar uma <link> à sua página:
<link rel="preconnect" href="https://example.com">
Você pode acelerar o tempo de carregamento em 100–500 ms estabelecendo conexões antecipadas com origens de terceiros importantes. Esses números podem parecer pequenos, mas fazem diferença na forma como os usuários percebem o desempenho da página web.
Casos de uso para rel=preconnect #
Saber de onde, mas não o que você está buscando #
Devido às dependências com versão, às vezes você acaba em uma situação em que sabe que estará solicitando um recurso de um CDN específico, mas não o caminho exato até ele.
O outro caso comum é carregar imagens de um CDN de imagem, em que o caminho exato para uma imagem depende de consultas de mídia ou verificações de recurso de tempo de execução no navegador do usuário.
Nessas situações, se o recurso que você busca for importante, você deseja economizar o máximo de tempo possível conectando-se previamente ao servidor. O navegador não fará o download do arquivo até que sua página o solicite, mas pelo menos pode lidar com 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 querer economizar algum tempo na fase de conexão, mas não necessariamente começar a recuperar o conteúdo imediatamente, é ao fazer streaming de mídia de uma origem diferente.
Dependendo de como sua página lida com o conteúdo transmitido, você pode esperar até que seus scripts sejam carregados e estejam prontos para processar o fluxo. 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 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 diferentes do domínio de origem, portanto, você não deve usá-la em seu site.
Você também pode iniciar uma pré-conexão por meio do 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ê deve definir o crossorigin com a dica de preconnect
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>Se você omitir o crossorigin, o navegador executará apenas a consulta DNS.
Resolva o nome de domínio antecipadamente com rel=dns-prefetch #
Você se lembra dos sites por seus nomes, mas os servidores se lembram deles por endereços 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 precisa fazer conexões com muitos domínios de terceiros, pré-conectar todos eles é contraproducente. A dica preconnect é melhor usada apenas para as conexões mais críticas. Para todo o resto, use <link rel=dns-prefetch> para economizar tempo na primeira etapa, a pesquisa de DNS, que geralmente leva cerca de 20-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 Faça Não façadns-prefetch é um pouco diferente do suporte preconnect, então dns-prefetch pode servir como um substituto para navegadores que não oferecem suporte para 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">
Conclusão #
Essas duas dicas de recursos são úteis para melhorar 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. Esteja atento às restrições, use a preconnect apenas para os recursos mais importantes, conte com dns-prefetch para o resto e sempre meça o impacto no mundo real.