A seção "Oportunidades" do seu relatório do Lighthouse lista todas as solicitações principais
que ainda não priorizam as solicitações de busca com <link rel=preconnect>:
Compatibilidade com navegadores
O <link rel=preconnect> é compatível com a maioria dos navegadores. Consulte
Compatibilidade de navegadores.
Melhorar a velocidade de carregamento da página com a pré-conexão
Adicione dicas de recursos 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
estabelecer uma conexão com outra origem
e que você gostaria que o processo começasse o mais rápido possível.
Estabelecer conexões costuma envolver um tempo significativo em redes lentas, principalmente no caso de conexões seguras. Isso acontece porque elas envolvem buscas DNS, redirecionamentos e várias viagens de ida e volta até o servidor final, que processa a solicitação do usuário.
Organizar 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 maioria das vezes vale a pena aguardar até que a conexão seja estabelecida, em vez de fazer a troca de dados.
Informar sua intenção ao navegador é tão simples quanto adicionar uma tag de link à página:
<link rel="preconnect" href="https://example.com">
Isso permite que o navegador saiba que a página pretende
se conectar a example.com e recuperar conteúdo dela.
Embora a <link rel="preconnect"> seja bastante leve,
ela ainda pode consumir um tempo de CPU valioso, principalmente em conexões seguras.
Isso é especialmente ruim se a conexão não for usada em até 10 segundos,
já que o navegador a fechará, desperdiçando todo o trabalho da conexão anterior.
Em geral,
tente usar <link rel="preload">,
já que é um ajuste de desempenho mais abrangente,
mas mantenha <link rel="preconnect"> como opção para casos extremos, como:
<link rel="dns-prefetch"> é outro tipo de <link> relacionado a conexões.
Esse recurso gerencia somente as buscas DNS,
mas tem ampla compatibilidade com navegadores e pode servir como um bom fallback.
Você pode usá-lo da mesma forma:
<link rel="dns-prefetch" href="https://example.com" />.
Orientações específicas para a pilha
Drupal
As dicas de recursos Preconnect ou dns-prefetch podem ser adicionadas instalando e configurando um módulo que oferece recursos para as dicas de recursos do user agent.
Magento
Modifique o layout dos seus temas e adicione hints de recursos preconnect ou dns-prefetch.