Pré-conectar às origens necessárias
A seção Oportunidades de seu relatório Lighthouse lista todas as solicitações principais que ainda não estão priorizando solicitações de busca com <link rel=preconnect>:
Compatibilidade do navegador #
<link rel=preconnect> é compatível com a maioria dos navegadores. Consulte Compatibilidade do navegador.
Melhore a velocidade de carregamento da página com pré-conexão #
Considere adicionar preconnect ou dns-prefetch para estabelecer conexões antecipadas 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 deseja que o processo seja iniciado o mais rápido possível.
O estabelecimento de conexões geralmente envolve um tempo significativo em redes lentas, especialmente quando se trata de conexões seguras, pois pode envolver pesquisas de 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 tornar seu aplicativo muito mais ágil para o usuário, sem afetar negativamente o uso da largura de banda. A maior parte do tempo para estabelecer uma conexão é gasta em espera, em vez de troca de dados.
Informar o navegador da sua intenção é tão simples quanto adicionar uma tag de link à sua 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 o conteúdo de lá.
Lembre-se de que, embora <link rel="preconnect"> seja muito barato, ele ainda pode consumir um tempo valioso da CPU, principalmente em conexões seguras. Isso é especialmente ruim se a conexão não for usada em 10 segundos, quando o navegador a fecha, desperdiçando todo o trabalho de conexão anterior.
Em geral, tente usar <link rel="preload">, pois é um ajuste de desempenho mais abrangente, mas mantenha <link rel="preconnect"> em seu cinto de ferramentas para casos extremos como:
<link rel="dns-prefetch"> é outro <link> relacionado a conexões. Ele lida apenas com a pesquisa de DNS, mas tem suporte para navegador mais amplo, então pode servir como um bom substituto. Você o usa exatamente da mesma maneira:
<link rel="dns-prefetch" href="https://example.com">.Orientação específica para pilha #
Drupal #
Use um módulo que ofereça suporte a dicas de recursos do agente do usuário para que você possa instalar e configurar dicas de pré-conexão ou pré-busca de recursos DNS.
Magento #
Modifique o layout dos seus temas e adicione dicas de recursos de pré-conexão ou pré-busca de DNS.
Recursos #
- Código-fonte para pré-conexão à auditoria de origens exigida
- Priorização de recursos - Obtendo o navegador para ajudá-lo
- Estabeleça conexões de rede com antecedência para melhorar a velocidade percebida da página
- Tipos de link: pré-conexão