Pré-conexão às origens necessárias

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>:

Uma captura de tela da auditoria de pré-conexão do Lighthouse com as origens necessárias

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.

Recursos