A seção "Oportunidades" do relatório do Lighthouse lista todas as principais solicitações
que ainda não estão priorizando solicitações de busca com <link rel=preconnect>:
Compatibilidade com navegadores
<link rel=preconnect> é compatível com a maioria dos navegadores. Consulte
Compatibilidade do navegador.
Melhore a velocidade de carregamento da página com a pré-conexão
Adicione dicas de recursos preconnect ou dns-prefetch
para estabelecer conexões antecipadas com origens importantes de terceiros.
<link rel="preconnect"> informa ao navegador que sua página pretende
estabelecer uma conexão com outra origem
e que você quer que o processo comece o mais rápido possível.
Estabelecer conexões geralmente envolve um tempo significativo em redes lentas, principalmente quando se trata de conexões seguras, porque pode envolver buscas DNS, redirecionamentos e várias idas e voltas ao servidor final que processa a solicitação do usuário.
Organizar tudo isso com antecedência pode fazer com que seu aplicativo pareça muito mais rápido para o usuário sem afetar negativamente o uso da largura de banda. Na maioria das vezes, ao estabelecer uma conexão, é necessário aguardar, em vez de trocar dados.
Informar sua intenção ao navegador é tão simples quanto adicionar uma tag de link à sua página:
<link rel="preconnect" href="https://example.com">
Isso informa ao navegador que a página pretende
se conectar a example.com e extrair conteúdo de lá.
Não esqueça que, embora <link rel="preconnect"> seja muito barato,
ele ainda pode consumir um tempo de CPU valioso, principalmente em conexões seguras.
Isso é especialmente ruim quando a conexão não é usada em até 10 segundos,
quando o navegador a fecha, desperdiçando todo o trabalho da conexão inicial.
Em geral,
tente usar <link rel="preload">,
já que é um ajuste de desempenho mais abrangente,
mas mantenha <link rel="preconnect"> no seu cinto de ferramentas para casos extremos como:
- Caso de uso: saber de onde você está, mas não o que você está buscando
- Caso de uso: streaming de mídia
O <link rel="dns-prefetch"> é outro tipo de <link> relacionado a conexões.
Ele lida apenas com a busca DNS, mas tem maior compatibilidade com navegadores e, por isso, pode servir como um bom substituto.
Use-o exatamente da mesma maneira:
<link rel="dns-prefetch" href="https://example.com" />.
Orientações específicas para a pilha
Drupal
Use um módulo que ofereça suporte a dicas de recursos do user agent para instalar e configurar dicas de recursos de pré-conexão ou pré-busca de DNS.
Magento
Modifique o layout dos temas e adicione dicas de recursos de pré-conexão ou pré-busca de DNS.