Hoje eu vou falar de mais um atalho para desempenho de carregamento de sites e isso vai incluir Prefetch Preconnect e Preload, que respectivamente são: Pré-busca, pré-carregamento. É claro que eu não criei estes termos. Ele estão por toda a parte na web e eu vou apenas mostrar e citar as referências.
Quando falamos em desempenho de front-end, pensamos em coisas como concatenação, minificação e armazenamento em cache. Também, pensamos em ativar o gzip no servidor para que a página seja carregada mais rapidamente e os usuários possam concluir suas metas o mais rápido possível.
Os seguintes termos podem lha ajudar ainda mais, no carregamento mais rápido do site. E por isso, eu vou adicionar uma definição para cada um deles. Também vou mostrar alguns exemplos, para você utilizá-los.
Eu estudei em várias referências que vou citar e tentei resumir para você.
O que é Prefetch e para que serve?
Prefetch - ou pré-busca - é uma técnica de aprimoramento de desempenho. Podemos usá-lo para informar ao navegador quais recursos o usuário pode precisar no futuro, antes mesmo de precisar buscá-los.
Essa prática de adivinhar o que os usuários precisam antes deles precisarem foi chamada de pré-sessão. Não é apenas uma única técnica, porém, ele se decompõe em uma série de técnicas diferentes: dns-prefetch, sub-resource, o padrão prefetch, pre-conecte pre-render.
Eu vou citar a pré-busca sempre como Prefetch, porque é o termo usado globalmente em inglês.
Prefetch e alguns exemplos de uso
Se tivermos certeza de que um recurso específico será necessário no futuro, podemos pedir ao navegador para solicitar esse item e armazená-lo no cache para referência posterior.
Por exemplo, uma imagem ou um script, ou qualquer coisa que possa ser armazenada em cache pelo navegador:
<link rel="prefetch" href="image.png">
ou
<link rel="prefetch" as="style" href="/css/style.css">
Ao contrário da Prefetch de DNS, na verdade estamos solicitando e baixando esse recurso e armazenando-o no cache. No entanto, isso depende de várias condições, já que a Prefetch pode ser ignorada pelo navegador.
Digamos que um cliente pode abandonar a solicitação de um arquivo de fonte grande em uma rede lenta. O Firefox só irá buscar recursos quando o navegador estiver ocioso.
A Prefetch também tem um recurso de DNS, apenas para questão de latência. DNS-Prefetch!
Você pode forçar a pesquisa de nomes de host específicos sem fornecer âncoras específicas usando esse nome de host usando o atributo rel no elemento link com um tipo de link de dns-prefetch.
<link rel="dns-prefetch" href="http://www.umsite.com/">
Isso fará com que o navegador faça a conexão de DNS rapidamente quando o usuário clicar em um link da sua página web.
Então, quando solicitarmos um arquivo, não precisaremos mais esperar pela pesquisa de DNS. Isso é particularmente útil se estivermos usando código de terceiros ou recursos de redes sociais em que possamos estar carregando um widget de um <script>.
O que é Preconnect e o que ele faz?
Preconnect inicia uma conexão antecipada, que inclui a pesquisa de DNS, o handshake TCP e a negociação TLS opcional. Ele permite que o agente do usuário mascare os altos custos de latência do estabelecimento de uma conexão.
Assim como o método de prefetch de DNS, o preconnect resolverá o DNS, mas também fará o handshake TCP e a negociação TLS opcional. Pode ser usado assim:
<link rel="preconnect" href="https://wpfoco.com.br">
Veja esta referência em w3.org e leia o que eles dizem. O Google também faz referências com elogios ao preconnect mostra o... nesta página do Google Developers um artigo muito legal.
Sobre Preload
O pré-carregamento - Preload: Este atributo informa ao navegador que um recurso é parte necessária da navegação atual. Ele também informa que isso deve ser ativado o mais rápido possível.
Veja como usar o <link rel="preload">.
<link rel="preload" as="script" href="/site/scriptimportant.js"> <link rel="preload" as="style" href="/site/estilo.css">
Essa opção deve corresponder às suas expectativas, exceto talvez pelo atributo as. Com isso, você pode informar ao navegador que tipo de recurso tem prioridade no carregamento. Então o navegador web tenta organizar na medida do possível.
Isso sugere que às vezes é melhor sempre baixar um ativo, independentemente de o navegador achar que é uma boa ideia ou não. Ao contrário dos recursos de Prefetch, que podem ser ignorados, os recursos de Preconnect devem ser solicitados pelo navegador.
O navegador não usa os recursos pré-carregados, a menos que o tipo correto seja definido. O recurso é carregado com a prioridade aplicada normalmente. No entanto, agora o navegador tem a informação com antecedência, o que permite antecipar o processo de download.
No texto de Sérgio Gomes, um Developers Google, ele informa o seguinte: "o <link rel="preload"> é uma instrução obrigatória do navegador". E acrescenta, que o navegador precisa realizar essa instrução, já que ela não é só uma sugestão adicional. Por isso, é importante testá-lo com cuidado para garantir que você não busque algo duas vezes ou faça buscas desnecessárias.
Estas são minhas partilhas sobre o que eu aprendi com os especialistas sobre Prefetch Preconnect e Preload.
Tem uma resposta no site pt.stackoverflow.com que mostra um resumo bem inteligente e prático. Vale a pena ler.
