Pré-carregamento, pré-conexão, pré-busca: melhore o desempenho do seu site com dicas de recursos

Os navegadores da Web modernos usam todos os tipos de técnicas diferentes para melhorar o desempenho geral do seu site - desde priorizar os recursos mais importantes e buscá-los primeiro até adivinhar qual página o usuário visitará em seguida.

No entanto, você não deve confiar em navegadores, por mais avançados que sejam, para tomar todas as decisões sobre o desempenho do seu site.

Como proprietário de um site, você é quem sabe quais recursos são mais importantes e qual é a jornada real do usuário em seu site. E para melhorar o desempenho geral, a velocidade percebida e a experiência do usuário do seu site, você pode usar esse conhecimento para ajudar os navegadores a carregar suas páginas mais rapidamente.

É aí que entram as dicas de recursos.

Nas linhas a seguir, vamos dar uma olhada neles e como utilizar suas vantagens da melhor forma possível.

Vamos mergulhar nele.

Como funcionam os navegadores (em poucas palavras)

Para entender melhor as dicas de recursos e onde elas são aplicáveis, vamos dar uma olhada rápida em como os navegadores realmente carregam o conteúdo.

Poderíamos dividir todo o processo de um navegador carregando uma página em três etapas:

• Estabelecendo conexão;
• Baixar, analisar e renderizar o código;
• Tornando a página interativa;

Durante a primeira etapa, o navegador precisa estabelecer uma conexão com o servidor para baixar os recursos. Isso inclui procurar o nome de domínio e resolvê-lo para um endereço IP, configurar uma conexão com o servidor e criptografar a conexão para segurança.

Depois que tudo estiver pronto, o navegador pode continuar baixando e analisando as informações, construindo o Document Object Model (DOM) e o CSS Object Model (CSSOM) e, em seguida, renderizando o conteúdo.

A última parte é tornar a página interativa. Todos os processos mencionados acima ocorrem no thread principal. Assim, depois que o encadeamento principal do navegador terminar de analisar, renderizar e pintar a página, é hora de cuidar dos arquivos JavaScript adiados para disponibilizar a página para rolagem, toque e outras interações.

Em poucas palavras, esse é o processo de bastidores toda vez que uma página é carregada.

Vamos ver como você pode impactar positivamente cada um desses estágios integrando as dicas de recursos.

Dicas de recursos: pré-busca, pré-conexão, pré-carregamento

Como o nome sugere, as dicas de recursos são dicas ou instruções que informam ao navegador como ele deve lidar com recursos ou páginas da Web específicos. Em outras palavras, este conjunto de instruções permite auxiliar o navegador a priorizar origens ou recursos que precisam ser buscados e renderizados.

Todas as dicas de recursos usam o atributo rel do elemento link que você encontrará no cabeçalho de seus documentos HTML.

A integração desses trechos de código HTML em seu site permitirá que o navegador comece a carregar os arquivos selecionados mais cedo do que se o navegador os encontrasse no curso normal de carregamento da página.

E agora que o básico já passou, vamos para a parte para a qual você está aqui - visão geral das dicas de recursos, seus benefícios e quando usá-los.

Pré-busca

link rel=prefetch é uma dica de recurso de baixa prioridade que permite ao navegador buscar recursos que podem ser necessários posteriormente e armazená-los no cache do navegador.

Como a pré -busca define uma prioridade muito baixa, não use essa dica para arquivos de alta importância .

Um dos grandes casos de uso é utilizar a pré -busca para melhorar o tempo de carregamento das páginas subsequentes. Por exemplo, você pode aplicar a diretiva de pré -busca durante a autenticação de um usuário. Dessa forma, você pode aproveitar o tempo que eles levam para inserir suas credenciais para pré-carregar os recursos necessários para a página que eles verão a seguir.

Ao antecipar os passos de seus visitantes em seu site e pré-buscar os recursos, você pode melhorar métricas como First Contentful Paint e Time to Interactive. Algo que a Netflix fez e reduziu seu tempo de interação em 30%.

Tudo o que mencionamos até agora está relacionado à pré-busca, também conhecida como pré-busca de link. Mas existem dois outros tipos de pré-busca que são igualmente importantes, e temos que mencionar:

1. Pré-busca de DNS
O navegador precisa realizar uma pesquisa de DNS para converter um nome de host (o URL) em um endereço IP antes de se conectar ao host (servidor de origem).

Embora isso geralmente leve apenas milissegundos, se um site carregar arquivos de um nome de domínio de terceiros, algo que a maioria dos sites faz, o navegador precisa realizar uma pesquisa de DNS para cada domínio. Alguns sites (por exemplo, sites de notícias) usam muitos recursos externos, o que significa que pode haver dezenas de pesquisas de DNS necessárias por página.

Nesses casos, usar a dica dns-prefetch pode economizar alguns milissegundos, pois a instrução informa ao navegador para iniciar esse processo imediatamente, em vez de descobrir a necessidade posteriormente no processo de carregamento.

Conforme sugerido no Web Almanac 2021, uma boa prática é combinar dns-prefetch com a dica de pré- conexão para obter resultados ideais. Você pode ver o porquê na seção onde falamos sobre pré- conexão .

2. Pré-renderização
A pré-renderização é muito semelhante à pré-busca, pois otimiza os recursos para os quais o usuário pode navegar em seguida. A diferença é que a pré-renderização realmente renderiza a página inteira em vez de recursos específicos.

Pré-conexão

Como dns-prefetch , a diretiva preconnect ajuda o navegador a estabelecer conexões antecipadas antes de enviar uma solicitação inicial ao servidor.

No entanto, a dica de pré -conexão leva um passo adiante. Enquanto realiza pesquisas de DNS, também inclui negociações TLS e handshakes TCP. Isso, por sua vez, elimina a latência de ida e volta e economiza ainda mais tempo.

Mas aí vem a pergunta:

Se o preconnect faz tudo o que o dns-prefetch faz, e acima, por que eu usaria o dns-prefetch em primeiro lugar?

Na maioria dos casos, pré- conexão é a opção preferível para dns-prefetch , mas o problema é que a pré -conexão não é suportada por alguns navegadores:

Fonte: caniuse.com

O bom é que você pode usá-los juntos para tirar o máximo proveito deles. Você pode se beneficiar da pré- conexão em navegadores compatíveis com um fallback para dns-prefetch :

De acordo com o Google:

Em 2019, o Chrome conseguiu melhorar seu Time To Interactive em quase 1s, pré-conectando-se a origens importantes.

Pré-carregar

Antes de explicar como a diretiva de pré -carregamento funciona, precisamos deixar algo claro.

Embora o pré -carregamento seja regularmente mencionado como uma “Dica de recurso”, não é. O pré-carregamento é uma busca declarativa e é obrigatório para os navegadores , tornando-o mais um comando do que uma dica.

Dito isto, o pré -carregamento é usado para forçar o navegador a baixar um recurso antes que o navegador o descubra porque é crucial para a página.

A diretiva de pré -carregamento funciona melhor em recursos que fazem parte do caminho de renderização crítico, mas não são facilmente descobertos pelo navegador. Por exemplo, fontes, CSS ou JavaScript crítico.

Outra diferença das dicas dns-prefetch e preconnect é que, embora precisem apenas dos atributos rel e href , o pré -carregamento é mais complicado. Você precisa adicionar o atributo as, que indica o tipo de conteúdo do recurso que você deseja pré-carregar.

De acordo com Addy Osmani, gerente de engenharia do Google, fornecer um atributo as quando o pré-carregamento é obrigatório:

Aqui está uma lista completa de valores as que você pode especificar:

Incluir o atributo as ajuda o navegador a definir a prioridade do recurso pré-buscado de acordo com seu tipo e determinar se o recurso já existe no cache.

Confira o documento Prioridades e agendamento de recursos do Chrome para saber mais sobre como os diferentes tipos de recursos são priorizados.

Para alguns recursos, como fontes, você também deve incluir o atributo crossorigin .

O atributo crossorigin configura o modo da solicitação para uma solicitação HTTP CORS. CORS (Cross-Origin Resource Sharing) é um mecanismo que permite que um servidor indique quaisquer origens diferentes da sua, a partir das quais um navegador deve permitir o carregamento de recursos. Não nos aprofundaremos nisso, pois não é o foco deste artigo, mas você pode encontrar mais informações aqui.

E semelhante ao atributo as, o pré-carregamento de fontes sem origem cruzada fará uma busca dupla. Aqui está outro trecho do artigo de Addy Osmani sobre o assunto:

Mais dicas de recursos, mais problemas

Lendo tudo até agora, você pode começar a pensar que usar o maior número possível de dicas de recursos só levaria os navegadores a carregar suas páginas rapidamente.

Infelizmente, esse não é o caso.

Aqui estão alguns dos contratempos que você deve levar em consideração ao integrar as dicas de recursos:

1. A pré-busca pode aumentar o consumo de dados

Embora a pré -busca defina uma baixa prioridade de download, isso não significa que seja inofensivo. Seu uso pode aumentar o consumo de dados em seu site, o que pode apresentar problemas tanto para você (aumento do tráfego em seu servidor) quanto para seus usuários (consumo desnecessário de recursos). Além disso, você pode acabar carregando bytes extras que podem não ser usados ​​eventualmente. Então pense duas vezes antes de integrá-lo.

2. A pré-renderização pode causar desperdício de largura de banda

A aposta com a pré- renderização é ainda maior do que a pré -busca , pois você baixa páginas inteiras com antecedência. Isso torna a dica pesada em recursos e pode causar desperdício de largura de banda, especialmente em dispositivos móveis. E a pior parte é que os usuários podem nem ver o efeito da dica se não solicitarem a página.

3. A pré-conexão pode levar ao uso extra da CPU

Embora a pré- conexão seja uma dica com baixa prioridade, ela ainda pode prejudicar o desempenho do seu site. Se uma conexão estabelecida não for usada rapidamente (dentro de 10 segundos no Chrome), a diretiva de pré -conexão apenas adicionará uso extra da CPU e será fechada automaticamente pelo navegador. Além disso, você deve usar a pré- conexão com moderação, pois o tamanho dos certificados de criptografia é de cerca de 3 KB, o que competiria com a largura de banda por outros recursos importantes.

4. O pré-carregamento substitui as prioridades definidas pelo analisador do navegador

preload é uma instrução poderosa, pois permite que você faça o navegador baixar imediatamente um recurso. No entanto, os navegadores modernos são muito bons em priorizar recursos, portanto, o uso excessivo de pré -carregamento pode levar a resultados negativos. Por exemplo, se você adicionar uma diretiva de pré -carregamento que corresponda a um URL de recurso assíncrono, o navegador irá buscá-lo mais rápido, então ele irá analisá-lo mais rápido, anulando o efeito do seu atributo assíncrono ao interromper o encadeamento principal muito cedo no carregamento da página.

Recapitular

Nós cobrimos muito terreno neste artigo, então vamos fazer uma rápida recapitulação dos pontos mais essenciais:

• dns-prefetch e preconnect são usados ​​para priorizar nomes de domínio (por exemplo, https://example.com).
• prefetch e preload são usados ​​para priorizar o carregamento de recursos. Embora a pré -busca seja usada para melhorar o tempo de carregamento das páginas subsequentes, o pré -carregamento funciona melhor em recursos críticos para a página atual.
• prerender faz referência a uma página inteira (por exemplo, blog.html).
• prefetch , prerender e preconnect são dicas de recursos e são executadas conforme o navegador achar adequado. A diretiva preload é um comando obrigatório para os navegadores.
• Ao usar preload , não se esqueça de fornecer os atributos as e crossorigin para evitar a busca dupla.
• Embora as dicas de recursos sejam instruções de baixa prioridade, elas ainda representam uma ameaça ao desempenho do seu site. Use-os com moderação e apenas quando necessário.
• preload é uma diretiva poderosa que pode substituir as prioridades do analisador do navegador. Não se esqueça de que os navegadores modernos são muito bons em priorizar recursos, portanto, use a “dica” de pré -carregamento com moderação.

Use o conhecimento recém-adquirido sobre as dicas de recursos para acelerar a entrega de conteúdo e ativos e melhorar o desempenho geral do seu site. E não se esqueça de testar seu site no mundo real (foco nos dados de campo) toda vez que fizer uma alteração.