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

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

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

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.

Recursos