Acelere o carregamento de recursos com dicas de prioridade e fetchpriority

Com que rapidez seus recursos mais críticos estão sendo carregados?

Esta pergunta exata tem os proprietários de sites (e especialistas experientes na web) em alfinetes e agulhas. E acontece que é o que faz ou quebra seu site nos primeiros milissegundos.

Quando se trata de otimizar o carregamento de recursos, você tem duas opções:

1. Confie inteiramente nos mecanismos dos navegadores para baixar e buscar recursos em uma ordem ideal.
2. Tente ajudá-los implementando dicas de recursos.

Infelizmente, por melhores que sejam os navegadores modernos, cada site/aplicativo difere em configuração e contexto. E embora eles sejam muito bons em atribuir prioridades de recursos, em alguns casos, isso não é suficiente.

Infelizmente, as dicas de recursos fornecem uma influência limitada sobre a priorização de recursos.

Felizmente, há uma nova dica que você pode adicionar à sua caixa de ferramentas de desempenho na web – Dicas de prioridade.

E neste artigo, você aprenderá mais sobre:

• Quais são as dicas de prioridade;
• Quando usá-los;
• Como implementá-los via fetchpriority;
• Como você pode testá-los em seu site.

Vamos começar!

O que são dicas de prioridade?

As dicas de prioridade são um sinal que permite que proprietários e desenvolvedores de sites indiquem a prioridade dos recursos (por exemplo, imagens, fontes, CSS, scripts e iframes) quando os navegadores os carregam.

O navegador precisa baixar todos os tipos de recursos no processo de construção de uma página da web. Como recurso prioritário, ele solicita e baixa o documento HTML primeiro.

Mas como um navegador determina o que carregar em seguida?

Bem, os navegadores têm um conjunto de prioridades predeterminadas para cada tipo de recurso:

Essas prioridades padrão geralmente funcionam muito bem, o que resulta em um bom desempenho da web.

No entanto, como Addy Osmani mencionou em seu artigo sobre dicas de prioridade, os navegadores podem fazer suposições muito bem informadas sobre o que buscar em seguida.

Mas eles não conhecem seu projeto tão bem quanto você.

Então, um pequeno ajuste fino pode ser necessário:

"Navegadores como o Chrome têm heurísticas para tentar buscar recursos com a prioridade apropriada com base em sinais como se eles estão na janela de visualização. Dito isso, sem dicas de prioridade, o Chrome só consegue aumentar a prioridade para imagens na janela de visualização uma vez que o layout foi concluído. Muitas vezes, isso é tarde demais e, neste momento, pode competir com todo o resto. Outro motivo para considerar o uso de dicas é que, como autor de página, você provavelmente sabe o que é mais importante para seus usuários verem primeiro e pode informar o navegador para que ele possa otimizar para seu caso de uso."

Anteriormente, a única coisa que você poderia fazer era usar pré-carregamento ou pré-conexão.

E embora o pré -carregamento seja uma diretiva obrigatória que os navegadores precisam cumprir, em alguns casos, o recurso pré-carregado ainda pode ter uma prioridade baixa.

Por exemplo, uma imagem Largest Contentful Paint (LCP) pré-carregada pode ter uma prioridade baixa e ser revertida por outros recursos de alta prioridade. Nesses casos, as dicas de prioridade podem complementar perfeitamente o pré-carregamento e ajudar em quanto tempo os recursos são carregados.

Aqui está um webinar sobre dicas de prioridade, onde Pat Meenan fala sobre dicas de prioridade no Chrome e até os chama de "um código de trapaça" para o LCP:

Este é um excelente exemplo do poder das Dicas de Prioridade.

Agora, vamos ver quando você deve implementar as dicas de prioridade em sua estratégia de desempenho da web.

Quando usar dicas de prioridade

Existem 5 cenários principais em que as dicas de prioridade podem ajudar, de acordo com o Google:

1. Você tem várias imagens acima da dobra, mas nem todas precisam ter a mesma prioridade. Por exemplo, em um carrossel de imagens, apenas a primeira imagem visível precisa de uma prioridade mais alta em relação às demais.
   
2. As imagens de herói dentro da janela de visualização começam com baixa prioridade. Após a conclusão do layout, o Chrome descobre que eles estão na janela de visualização e aumenta sua prioridade (infelizmente, as ferramentas de desenvolvimento mostram apenas a prioridade final - WebPageTest mostrará ambas). Isso geralmente adiciona um atraso significativo ao carregamento da imagem. Fornecer a dica de prioridade na marcação permite que a imagem comece com alta prioridade e comece a carregar muito mais cedo.

Observação: Declarar scripts como assíncronos ou adiados informa ao navegador para carregá-los de forma assíncrona. No entanto, como visto na figura acima, esses scripts também recebem uma prioridade "baixa". Você pode querer aumentar sua prioridade enquanto garante o download assíncrono, principalmente para quaisquer scripts que sejam críticos para a experiência do usuário.

Você pode usar a API JavaScript fetch() para buscar recursos ou dados de forma assíncrona. A busca é atribuída a uma alta prioridade pelo navegador. Pode haver situações em que você não queira que todas as suas buscas sejam executadas com alta prioridade e prefira usar dicas de prioridade diferentes. Isso pode ser útil ao executar chamadas de API em segundo plano e misturá-las com chamadas de API que estão respondendo à entrada do usuário, como no preenchimento automático. As chamadas de API em segundo plano podem ser marcadas como de baixa prioridade e as chamadas de API interativas marcadas como de alta prioridade.

O navegador atribui alta prioridade a CSS e fontes, mas todos esses recursos podem não ser igualmente importantes ou necessários para o LCP. Você pode usar dicas de prioridade para diminuir a prioridade de alguns desses recursos.

Quase todos os sites se enquadram nos dois primeiros cenários. Para determinar se você deve trabalhar em qualquer um dos outros, aprofunde-se em seu código (HTML/JS) ou procure ajuda de um desenvolvedor web.

Como implementar dicas de prioridade: o atributo fetchpriority

Você pode implementar dicas de prioridade usando o atributo HTML fetchpriority.

Você pode usar o atributo com:

• link
• imagem
• roteiro
• tags iframe

O atributo fetchpriority aceita um dos três valores:

• alto: indicando que você considera o recurso crítico e deseja que o navegador o priorize.
• baixo: sinalizando que você considera o recurso menos importante e deseja que o navegador o despriorize.
• auto: um valor padrão quando você não tem uma preferência e deixa o navegador decidir a prioridade apropriada.

Como alternativa, você pode usar a API JavaScript Fetch:

Algumas coisas a serem lembradas ao usar o atributo fetchpriority :

• fetchpriority não garante que um recurso de maior prioridade seja carregado antes de outros recursos (de menor prioridade) do mesmo tipo.
• fetchpriority não deve ser usado para controlar a própria ordem de carregamento.
• fetchpriority não é uma diretiva obrigatória e não pode forçar o navegador a buscar um recurso ou impedi-lo de buscar. Cabe ao navegador se ele vai buscar o recurso ou não.

Importante: Semelhante às dicas de recursos, as dicas de prioridade devem ser usadas com cautela, pois o uso excessivo pode resultar em lentidão em vez de melhorias de desempenho.

Como testar seu site com dicas de prioridade

Antes de executar seus testes, você deve saber que as dicas de prioridade estão disponíveis apenas no Chrome 101 (ou posterior) e no Edge 101 (ou posterior):

Agora a questão em mãos:

A maneira mais fácil seria usar uma ferramenta, para que você não precise alterar seu código manualmente.

Felizmente, o recurso Experiments do WebPageTest permite testar recursos de desempenho como dicas de prioridade sem alterar seu código.

No entanto, o recurso Experiment do WebPageTest faz parte de sua assinatura paga, portanto, você precisa planejar algumas despesas extras.

Ao contrário, se você tiver habilidades técnicas, poderá ajustar o código do seu site por conta própria e testar o impacto das dicas de prioridade.

Certifique-se de executar testes após cada alteração que fizer.

Recapitular

Cobrimos muito terreno, então aqui está uma rápida recapitulação dos pontos mais importantes:

• As dicas de prioridade permitem que você indique a prioridade dos recursos do seu site.
• As dicas de prioridade podem ajudá-lo a acelerar o carregamento de imagens acima da dobra, imagens hero (elemento LCP), scripts assíncronos e adiados, CSS e arquivos de fonte.
• As dicas de prioridade podem ser implementadas por meio do atributo fetchpriority.
• Você pode usar o atributo fetchpriority com as tags link, img, script e iframe.
• O atributo fetchpriority aceita um dos três valores: alto, baixo e automático.
• Cuidado: as dicas de prioridade devem ser implementadas com moderação, pois seu uso excessivo pode levar a uma diminuição do desempenho em vez de melhorias de velocidade.
• fetchpriority não é uma diretiva obrigatória e não pode forçar o navegador a buscar um recurso ou impedi-lo de buscar. Cabe ao navegador se ele vai buscar o recurso ou não.
• As dicas de prioridade estão disponíveis no Chrome 101 ou posterior.

Para medir o impacto das dicas de prioridade em seu site, execute testes após cada alteração.

Ferramentas de teste populares:

• Informações do PageSpeed
• GTMetrix
• Teste de página da Web
• Farol
• Pingdom