Pré-conectar às origens necessárias

Published on Updated on

Translated to: English, Español, 한국어, 中文, Pусский, 日本語

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

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

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.