Otimizando o desempenho com dicas de recursos

Publicados: 2022-03-10
Resumo rápido ↬ Muitas otimizações de desempenho podem ser feitas quando podemos prever o que os usuários podem fazer antes que eles realmente o façam. As dicas de recursos são uma maneira simples, mas eficaz, de os desenvolvedores da Web ajudarem o navegador a ficar um passo à frente do usuário e manter as páginas rápidas.

Os navegadores da Web modernos usam todos os tipos de técnicas para ajudar a melhorar o desempenho do carregamento da página, adivinhando o que o usuário provavelmente fará em seguida. No entanto, o navegador não sabe muito sobre nosso site ou aplicativo como um todo e, muitas vezes, as melhores informações sobre o que um usuário pode fazer vêm de nós, o desenvolvedor.

Veja o exemplo do conteúdo paginado, como um álbum de fotos. Sabemos que se o usuário estiver olhando uma foto em um álbum, a chance dele clicar no link 'próximo' para visualizar a imagem a seguir no álbum é bastante alta. O navegador, no entanto, não sabe realmente que, de todos os links da página, esse é o que o usuário tem mais probabilidade de clicar. Para um navegador, todos esses links têm o mesmo peso.

E se o navegador pudesse, de alguma forma, saber para onde o usuário está indo em seguida e buscar a próxima página com antecedência para que, quando o usuário clicar no link, o carregamento da página seja muito, muito mais rápido? Isso é basicamente o que são as Dicas de Recursos. Eles são uma maneira de o desenvolvedor informar ao navegador sobre o que provavelmente acontecerá no futuro , para que o navegador possa levar isso em consideração em suas escolhas de como carregar recursos.

Todas essas dicas de recursos usam o atributo rel do elemento <link> que você estará familiarizado com a localização no <head> de seus documentos HTML. Neste artigo vamos dar uma olhada nos principais tipos de Resource Hints e quando e onde podemos usá-los em nossas páginas. Iremos das pequenas e sutis dicas até as grandes armas no final.

Mais depois do salto! Continue lendo abaixo ↓

Pré-busca de DNS

Uma pesquisa de DNS é o processo de transformar um nome de domínio amigável para humanos, como example.com , no endereço IP amigável para máquina, como 123.54.92.4 que é realmente necessário para buscar um recurso.

Toda vez que você digita uma URL na barra de endereços do navegador, segue um link em uma página ou até mesmo carrega um recurso como uma imagem de um domínio diferente, o navegador precisa fazer uma pesquisa de DNS para encontrar o servidor que contém o recurso que temos Requeridos. Para uma página ocupada com muitos recursos externos (como talvez um site de notícias com muitos anúncios e rastreadores), pode haver dezenas de pesquisas de DNS necessárias por página.

O navegador armazena em cache os resultados dessas pesquisas, mas elas podem ser lentas. Uma técnica de otimização de desempenho é reduzir o número de pesquisas de DNS necessárias organizando recursos em menos domínios. Quando isso não for possível, você pode avisar o navegador sobre os domínios que ele precisará procurar com a dica de recurso dns-prefetch .

 <link rel="dns-prefetch" href="https://images.example.com">

Quando o navegador encontra essa dica, ele pode começar a resolver o nome de domínio images.example.com o mais rápido possível, mesmo que ainda não saiba como será usado. Isso permite que o navegador fique à frente do jogo e faça mais trabalho em paralelo, diminuindo o tempo de carregamento geral.

Quando devo usar dns-prefetch ?

Use dns-prefetch quando sua página usar recursos de um domínio diferente, para dar ao navegador uma vantagem inicial. O suporte do navegador é realmente ótimo, mas se um navegador não o suporta, não há problema - a pré-busca simplesmente não acontece.

Não faça a pré-busca de nenhum domínio que você não esteja usando e, se você quiser pré-buscar um grande número de domínios, talvez seja melhor verificar por que todos esses domínios são necessários e se algo pode ser feito para reduzir o número.

Pré-conexão

Uma etapa da pré-busca de DNS é a pré- conexão a um servidor. Estabelecer uma conexão com um servidor que hospeda um recurso requer várias etapas:

  • pesquisa de DNS (como acabamos de discutir);
  • Aperto de mão TCP
    Uma breve “conversa” entre o navegador e o servidor para criar a conexão.
  • Negociação TLS em sites HTTPS
    Isso verifica se as informações do certificado são válidas e corretas para a conexão.

Isso normalmente acontece uma vez por servidor e ocupa um tempo valioso — especialmente se o servidor estiver muito distante do navegador e a latência da rede for alta. (É aqui que as CDNs distribuídas globalmente realmente ajudam!) Da mesma forma que a pré-busca de DNS pode ajudar o navegador a se antecipar ao jogo antes de ver o que está por vir, a pré-conexão a um servidor pode garantir que, quando o navegador chegar à parte da página onde um recurso é necessário, o lento trabalho de estabelecer a conexão já ocorreu e a linha está aberta e pronta para ser usada.

 <link rel="preconnect" href="https://scripts.example.com">

Quando devo usar preconnect ?

Novamente, o suporte do navegador é forte e não há mal nenhum se um navegador não suportar a pré-conexão — o resultado será exatamente como era antes. Considere usar a pré-conexão quando tiver certeza de que acessará um recurso e quiser avançar.

Tenha cuidado para não pré-conectar e, em seguida, não usar a conexão, pois isso reduzirá a velocidade da sua página e comprometerá uma pequena quantidade de recursos no servidor ao qual você se conecta também.

Pré-buscando a próxima página

As duas dicas que vimos até agora estão focadas principalmente em recursos dentro da página que está sendo carregada. Eles podem ser úteis para ajudar o navegador a avançar em imagens, scripts ou fontes, por exemplo. As próximas dicas estão mais preocupadas com a navegação e a previsão para onde o usuário pode ir após a página que está sendo carregada no momento.

A primeira delas é a pré-busca, e sua tag de link pode ter esta aparência:

 <link rel="prefetch" href="https://example.com/news/?page=2" as="document">

Isso informa ao navegador que ele pode ir em frente e buscar uma página em segundo plano para que esteja pronta para ser usada quando solicitado. Há um pouco de aposta aqui porque você tem que antecipar onde você acha que o usuário navegará em seguida. Faça certo e a próxima página pode parecer carregar muito rapidamente. Se errar, você terá perdido tempo e recursos baixando algo que não será usado. Se o usuário estiver em uma conexão limitada, como um plano de telefone celular limitado, você pode realmente custar-lhe dinheiro real.

Quando ocorre uma pré-busca, o navegador faz a pesquisa de DNS e faz a conexão com o servidor que vimos nos dois tipos de dica anteriores, mas então dá um passo adiante e realmente solicita e baixa os arquivos. Ele para nesse ponto, no entanto, e os arquivos não são analisados ​​ou executados e de forma alguma são aplicados à página atual. Eles são apenas solicitados e mantidos prontos.

Você pode pensar em uma pré-busca como sendo um pouco como adicionar um arquivo ao cache do navegador. Em vez de precisar ir ao servidor e baixá-lo quando o usuário clicar no link, o arquivo pode ser retirado da memória e usado muito mais rapidamente.

O as atributo

No exemplo acima, você pode ver que estamos configurando as atributo as para as="document" . Este é um atributo opcional que informa ao navegador que o que estamos buscando deve ser tratado como um documento (ou seja, uma página da web). Isso permite que o navegador defina o mesmo tipo de cabeçalhos de solicitação e políticas de segurança como se tivéssemos acabado de seguir um link para uma nova página.

Existem muitos valores possíveis para as atributo as, permitindo que o navegador lide com diferentes tipos de pré-busca da maneira apropriada.

Valor de as Tipo de recurso
audio Arquivos de som e música
video Vídeo
Track Faixas de vídeo ou áudio WebVTT
script Arquivos JavaScript
style Folhas de estilo CSS
font Fontes da Web
image Imagens
fetch Solicitações de API XHR e Fetch
worker Trabalhadores da Web
embed Solicitações de <embed> multimídia
object Solicitações de <object> multimídia
document paginas web

Os diferentes valores que podem ser usados ​​para especificar tipos de recursos com as atributo as.

Quando devo usar prefetch ?

Novamente, a prefetch -busca tem um ótimo suporte ao navegador. Você deve usá-lo quando tiver uma certeza razoável de que o usuário poderá seguir seu site se acreditar que acelerar a navegação impactará positivamente a experiência do usuário. Isso deve ser ponderado em relação ao risco de desperdiçar recursos, possivelmente buscando um recurso que não é usado.

Pré-renderização da próxima página

Com o prefetch , vimos como o navegador pode baixar os arquivos em segundo plano prontos para uso, mas também notamos que nada mais foi feito com eles naquele momento. A pré-renderização vai um passo além e executa os arquivos, fazendo praticamente todo o trabalho necessário para exibir a página, exceto exibi-la de fato.

Isso pode incluir a análise do recurso para quaisquer sub -recursos, como arquivos e imagens JavaScript, e a pré-busca deles também.

 <link rel="prerender" href="https://example.com/news/?page=2">

Isso realmente pode fazer com que o carregamento da página a seguir pareça instantâneo, com o tipo de desempenho de carregamento rápido que você pode ver ao pressionar o botão Voltar do navegador. A aposta é ainda maior aqui, no entanto, pois você não está apenas gastando tempo solicitando e baixando os arquivos, mas executando-os junto com qualquer JavaScript e tal. Isso pode usar memória e CPU (e, portanto, bateria) que o usuário não verá o benefício se acabar não solicitando a página.

Quando devo usar prerender ?

Atualmente, o suporte do navegador para pré- prerender é muito restrito, com apenas o Chrome e o IE antigo (não o Edge) oferecendo suporte para a opção. Isso pode limitar sua utilidade, a menos que você esteja segmentando especificamente o Chrome. Novamente, é um caso de “sem dano, sem falta”, pois o usuário não verá o benefício, mas não causará nenhum problema para ele se não.

Colocando dicas de recursos em uso

Já vimos como as dicas de recursos podem ser usadas no <head> de um documento HTML usando a tag <link> . Essa é provavelmente a maneira mais conveniente de fazer isso, mas você também pode conseguir o mesmo com o cabeçalho Link: HTTP.

Por exemplo, para pré-buscar com um cabeçalho HTTP:

 Link: <https://example.com/logo.png>; rel=prefetch; as=image;

Você também pode usar JavaScript para aplicar dinamicamente dicas de recursos, talvez em resposta à interação de uso. Para usar um exemplo do documento de especificações do W3C:

 var hint = document.createElement("link"); hint.rel = "prefetch"; hint.as = "document"; hint.href = "/article/part3.html"; document.head.appendChild(hint);

Isso abre algumas possibilidades interessantes, pois é potencialmente mais fácil prever para onde o usuário pode navegar em seguida com base em como ele interage com a página.

Coisas a observar

Analisamos quatro maneiras progressivamente mais agressivas de pré-carregar recursos, desde o toque mais leve de apenas resolver o DNS até renderizar uma página completa pronta para ser usada em segundo plano. É importante lembrar que essas dicas são apenas isso; são dicas de como o navegador pode otimizar o desempenho . Não são diretivas. O navegador pode aceitar nossas sugestões e usar seu melhor julgamento para decidir como responder.

Isso pode significar que em um dispositivo ocupado ou sobrecarregado, o navegador não tenta responder às dicas. Se o navegador souber que está em uma conexão limitada, ele pode pré-buscar DNS, mas não recursos inteiros, por exemplo. Se a memória estiver baixa, o navegador pode decidir novamente que não vale a pena buscar a próxima página até que a atual seja descarregada.

A realidade é que em um navegador de desktop, as dicas provavelmente serão seguidas como o desenvolvedor sugere, mas esteja ciente de que depende do navegador em todos os casos.

A importância da manutenção

Se você trabalha com a web há mais de dois anos, estará familiarizado com o fato de que, se algo em uma página não é visto, muitas vezes pode ser negligenciado. Metadados ocultos (como descrições de página) são um bom exemplo disso. Se as pessoas que cuidam do site não puderem ver os dados prontamente, eles podem facilmente ser negligenciados e ficar desatualizados.

Este é um risco real com dicas de recursos. Como o código está escondido e praticamente não é detectado em uso, seria muito fácil para a página mudar e quaisquer dicas de recursos não serem atualizadas. A consequência de, digamos, pré-buscar uma página que você não usa, significa que as ferramentas que você implementou para melhorar o desempenho do seu site o estão prejudicando ativamente. Portanto, ter bons procedimentos para atualizar suas dicas de recursos se torna muito, muito importante.

Recursos

  • “Especificação de dicas de recursos”, W3C
  • “Acelere as navegações da próxima página com pré-busca”, Addy Osmani