Vejo em vários sites esses valores Preload, prefetch e preconnect no attr rel de certos links, porém não entendi exatamente a sua funcionalidade.
Para que exatamente eles servem? Quando utilizar?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadepreload: Especifica que o agente do navegador deve buscar e armazenar de forma previa o recurso destino atribuído pelo atributo:
Primeiro carrega o conteúdo do atributo;
<link rel="preload" href="/styles/style.css" as="style">
Obs: Vai carregar o conteúdo style.css na memoria, utilize quando for um arquivo pequeno, um arranjo de tema.
prefetch: Especifica que o navegador deve carregar e armazena em cache(disco) no navegador, para uso na próxima navegação ou quando for solicitado no futuro;
<link rel="prefetch" href="/styles/style.css" as="style">
Primeiro carrega o arquivo "style.css" armazena em cache, para uso na proxima navegação;
Referência: https://www.w3.org/TR/resource-hints/#dfn-prefetch
Obs: Vai carregar no cache(disco) seu arquivo css para uso futuro.
preconnect: Verifica se é possivel connectar a origem do conteúdo do atributo;
<link rel="preconnect" href="https://cdn.algumrecurso">
Obs: Iniciando uma conexão, que inclui a pesquisa de DNS, handshake TCP e negociação TLS opcional, permite que o agente do usuário mascarasse os altos custos de latência quando for estabelecer uma conexão.; Também tem o dns-prefetch que é similar ao preconnect
Referência: https://www.w3.org/TR/resource-hints/#preconnect
Enquanto o preload armazena em memoria do navegador o prefetch armazena no cache(disco), o preconnect verfica se é possivel conectar a origem dos recursos caso consiga, o User Agent do navegador deixa conexão pré estabelecida;
São três possíveis, entre tantos outros, para o atributo rel
do elemento link
.
<link rel="preload" href="style.css" as="style">
Indicar o valor preload
faz com que o cliente (navegador) busque por este recurso o mais rápido possível. No fluxo normal, o navegador iria somente requisitar este recurso quando renderizar a página, imediatamente antes, melhor dizendo, o que, dependendo do caso, pode bloquear a primeira renderização e aumentar o tempo de carregamento. Ao indicar o recurso como preload
, você estará indicando que este recurso será utilizado na página muito em breve e que ele deverá requisitá-lo o quanto antes possível, buscando o resultado de, quando o navegador for renderizar a página, o recurso já esteja disponível.
Outras vantagens são:
Accept
corretos para o recurso;Utilizando o atributo as
você aumenta a consistência da sua aplicação informando o tipo de recurso a ser solicitado. Isso é importante, inclusive, para o cliente determinar a ordem de preferência entre eles. Os tipos possíveis são:
audio
, arquivos de áudio;document
, arquivo HTML a ser carregado em um <frame>
;embed
, recurso a ser embarcado em um <embed>
;fetch
, recurso que será requisitado assíncronamente;font
, arquivo de fonte;image
, arquivo de imagem;object
, recurso a ser embarcado em um <embed>
;script
, arquivo JavaScript;style
, arquivo CSS;track
, arquivo WebVTT;worker
, arquivo web worker em JS;video
, arquivo de vídeo;Embora parecer uma boa ideia utilizar isso para todos os recursos do site, utilize com cautela. De maneira superficial, o recomendado é que você utilize o preload
apenas para recursos que serão utilizados para renderizar a página acima da borda, tais como CSS do topo da página, logotipo, banners, fontes, etc. Recursos que serão utilizados abaixo da borda podem ser requisitados de forma natural sem alterar a experiência do usuário.
Mais detalhes você pode ler em Preloading content with rel="preload".
<link rel="prefetch" href="/images/big.jpeg">
Com o prefetch
você informa ao cliente para requisitar o recurso de forma silenciosa após renderizar completamente a página atual. Ou seja, nenhum recurso que será utilizado pela página deverá ser requisitado com fetch
. O que o fetch
faz é simular o comportamento futuro do usuário, de modo que seja possível, durante o tempo ocioso do navegador, antecipar as requisições e armazenar em cachê. Por exemplo, se a página atual é a index, apresentando um menu, seria sensato você deduzir que futuramente o usuário irá acessar um link deste a fim de entrar em uma página interna. Com o fetch
você poderá fazer a requisição para essas páginas e armazenar o resultado em cachê e, quando o usuário acessar o link, o resultado cacheado será exibido.
O tempo ocioso do navegador é aquele em que ele já terminou de renderizar a página atual e fica aguardando alguma interação do usuário. O fetch
utiliza esse tempo para antecipar as requisições e melhorar a experiência do usuário nas interações futuras, pois, como o resultado estará em cachê, o tempo de carregamento será bem baixo.
Como qualquer recurso, utilize com cautela. Utilizar fetch
para recursos desnecessários poderá sobrecarregar seu servidor com requisições que poderiam ser evitadas.
Outras informações em Link prefetching FAQ.
<link rel="preconnect" href="https://cdnjs.cloudflare.com/ajax/libs">
Como o próprio nome sugere, é uma pré-conexão. O cliente irá requisitar do servidor do recurso uma conexão HTTP da qual nada será transmitido, isto é, o cliente não enviará previamente dados ao servidor bem como o servidor não enviará dados ao cliente. A ideia aqui é justamente antecipar a conexão entre cliente/servidor de modo que as requisições futuras sejam finalizadas em menos tempo.Se você utiliza um servidor de cachê, por exemplo, é uma boa ideia você utilizar o preconnect
com o servidor, assim todos os recursos que serão requisitados do cachê no servidor serão obtidos mais rapidamente, o que diminui o tempo de carregamento da página.
prefetch
é exatamente utilizar o tempo ocioso. Não entendi seu comentário. Em relação às referências, w3schools não deve ser considerada, use apenas a W3C, WHATWG ou MDN (prinicipais). Qual seria o comportamento diferente no Chrome?