A seção "Oportunidades" do relatório do Lighthouse lista todas as solicitações principais
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.
Aumentar a velocidade de carregamento da página com a pré-conexão
Adicione dicas de recurso preconnect ou dns-prefetch
para estabelecer conexões iniciais com origens de terceiros importantes.
<link rel="preconnect"> informa ao navegador que sua página pretende
para estabelecer uma conexão com outra origem,
e que você gostaria que o processo fosse iniciado o mais rápido possível.
Estabelecer conexões costuma envolver um tempo significativo em redes lentas, principalmente no que diz respeito a conexões seguras, já que isso pode envolver buscas DNS, redirecionamentos e várias viagens de ida e volta ao servidor final que lida com a solicitação do usuário.
Cuidar de tudo isso com antecedência pode fazer seu aplicativo parecer muito mais rápido para o usuário sem afetar negativamente o uso da largura de banda. Na maior parte do tempo 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
para se conectar a example.com e recuperar conteúdo de lá.
Tenha em mente que, embora <link rel="preconnect"> seja bem barato,
isso ainda pode consumir um tempo de CPU valioso, especialmente em conexões seguras.
Isso é especialmente ruim se a conexão não é usada em 10 segundos,
enquanto o navegador fecha, desperdiçando todo o trabalho de conexão inicial.
Em geral,
tente usar <link rel="preload">,
por ser um ajuste de desempenho mais abrangente,
mas mantenha <link rel="preconnect"> em seu cinto de ferramentas para os casos extremos como:
<link rel="dns-prefetch"> é outro tipo de <link> relacionado a conexões.
Ele lida apenas com a busca DNS,
mas possui um suporte mais amplo a navegadores, de modo que pode servir como um bom substituto.
Você usa exatamente da mesma forma:
<link rel="dns-prefetch" href="https://example.com" />.
Orientação específica da pilha
Drupal
Usar um módulo que ofereça suporte a dicas de recursos do user agent para que você possa instalar e configurar dicas de recursos de pré-conexão ou de pré-busca de DNS.
Magento
Modificar o layout dos temas e adicionar dicas de recursos de pré-conexão ou pré-busca de DNS.