Pré-conectar às origens necessárias
Published on • Updated on
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>
:
![Uma captura de tela do Lighthouse Preconnect para auditoria de origens exigidas](https://wd.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/K5TLz5LOyRjffxJ6J9zl.png?auto=format)
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
Updated on • Improve article