Otimização de performance com Priority Hints

Priority hints é uma nova propriedade aguardada para versão 101 do Google Chrome, que indica a prioridade de carregamento de recursos pelo navegador. Priority hints é uma importante ferramenta para melhorar os números do Core Web Vitals.

Caso queira conferir o vídeo que eu também publiquei sobre priority hints você pode conferir aqui:

Trabalhando com priority hints

Quando o navegador analisa a página e começa a descobrir e baixar os recursos como imagens, scripts e CSS. O navegador tenta priorizar os elementos baseados numa regra comum entre os sites na web.

Essa prioridade pode depender do tipo de recurso e de onde ele está no documento. Por exemplo, imagens na primeira dobra podem ter uma prioridade alta, enquanto a prioridade o carregamento do CSS principal pode ser uma prioridade muito alta. Os navegadores atualmente são muito bons e tentar achar a melhor ordem de carregamento, mas em alguns casos esse carregamento pode não ser o ideal para elementos importantes para métricas do core web vitals.

Nesse artigo vamos, abordar a propriedade “fetchpriority” responsável pela Priority Hint API, qual permite definir a ordem de carregamento entre alta e baixa.

Resumo sobre Priority Hints

O priority hints pode ajudar em alguns pontos chaves:

• Reduzir o tempo de carregamento da imagem que representa o LCP, definindo fetchpriority=”high”
• Aumente a prioridade dos scripts assíncronos usando uma semântica melhor do que o hack atual que é frequentemente usado (inserindo um para o script assíncrono)
• Diminuir a prioridade de scripts menos essenciais para aplicação, como scripts de rastreamento

Historicamente, desenvolvedores tiveram algum controle sobre o carregamento dos elementos, mas de forma bem limitada, a influência sobre a prioridade de recursos usando pré-carregamento e pré-conexão. As dicas de prioridade complementam priority hints.

O pre-carregamento permite que você informe ao navegador sobre recursos críticos que deseja carregar antes que sejam descobertos naturalmente. Isso é especialmente útil para recursos não facilmente detectáveis, como fontes incluídas em folhas de estilo, imagens de plano de fundo ou recursos carregados de um script.

Como funciona a prioridade de carregamento

A sequência de download de recursos depende da prioridade que é atribuída pelo navegador para cada recurso na página. Diferentes fatores podem afetar a lógica de priorização. Além disso, essas regras podem sofrer mudança entre diferentes navegadores.

Por exemplo, com o Google Chrome utiliza da seguinte lógica:

• CSS, fontes, scripts, imagens e recursos de terceiros recebem prioridades diferentes.
• O local ou a ordem em que você faz referência aos recursos no documento também afeta a prioridade dos recursos.
• A propriedade preload pode ajuda o navegador a descobrir um recurso mais rapidamente e, assim, carregá-lo antes que o documento o carregue e afete a prioridade.
• Alterações de cálculo de prioridade para scripts async ou defer.

A tabela a seguir considera esses fatores para mostrar como a maioria dos recursos é atualmente priorizada e sequenciada no Chrome.

Muito Alta	Alta	Média	Baixa	Muito baixa
CSS priorizado		CSS não-priorizado
	Script priorizado(preload)	Script(Async)
Fontes	Fontes(preload)
	Import
	Imagem(na primeira dobra)		Imagens em geral
			Mídia
			SVG
				Prefetch
XHR(Sync)	XHR(async)
		Favicon

O navegador baixa recursos com a mesma prioridade computada na ordem em que são descobertos. Você pode verificar a prioridade atribuída a diferentes recursos ao carregar uma página na guia Chrome Dev Tools Network. (Certifique-se de verificar a coluna de prioridade clicando com o botão direito do mouse nos títulos da tabela).

Quando você deve utilizar priority hints?

O conhecimento da lógica de priorização do navegador fornece algumas dicas de como você pode ajustar conteúdo existente para priorizar a ordem dos downloads. Mas de falarmos sobre a nova propriedade para priority hints vamos ver como podemos você pode fazer hoje:

• Coloque atributos nas tags script e link para controlar a ordem em que você deseja baixá-los. Os recursos com a mesma prioridade, são geralmente carregados na ordem em que são descobertos.
• Use o atributo “preload” para baixar os recursos importantes mais cedo, principalmente para recursos que não são facilmente descobertos antecipadamente pelo navegador.
• Use async ou defer para baixar scripts sem bloquear outros recursos.
• Adicione Lazy-load para conteúdo abaixo da primeira dobra para que o navegador possa usar a largura de banda disponível para recursos acima da dobra mais críticos.

Essas técnicas ajudam a controlar a computação de prioridade do navegador, melhorando assim o desempenho e os Core Web Vitals. Por exemplo, quando uma imagem de plano de fundo crítica é pré-carregada, ela pode ser descoberta muito antes, melhorando o Largest Contentful Paint (LCP).

Às vezes, esses identificadores podem não ser suficientes para priorizar recursos de maneira ideal para seu aplicativo. Aqui estão alguns dos cenários em que as dicas de prioridade podem ser úteis:

• Você tem várias imagens acima da dobra, mas nem todas precisam ter a mesma prioridade. Por exemplo, num carrossel de imagens, apenas a primeira imagem visível precisa de uma prioridade mais alta em relação às demais.
• As hero images adicionadas como background de um elemento. 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.
• Observe que o pré-carregamento ainda é necessário para a descoberta antecipada de imagens LCP incluídas como planos de fundo CSS e pode ser combinado com dicas de prioridade incluindo fetchpriority='high' no pré-carregamento, caso contrário, ele ainda começará com a prioridade padrão "Low" para imagens.
• Declarar scripts como async ou defer informa ao navegador para carregá-los de forma assíncrona. No entanto, como visto na figura acima, esses scripts também recebem uma prioridade "low". Você pode querer aumentar a 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.

Atributo fetchpriority

Você pode fornecer uma dica de prioridade usando o atributo HTML fetchpriority. Você pode usar o atributo com tags link, img, script e iframe. O atributo permite especificar a prioridade para tipos de recursos como CSS, fontes, scripts, imagens e iframe quando baixados usando as tags suportadas. O atributo fetchpriority aceita um dos três valores:

• high: você considera o recurso de alta prioridade e deseja que o navegador o priorize, desde que a heurística do navegador não impeça que isso aconteça.
• low: você considera o recurso de baixa prioridade e deseja que o navegador o despriorize se a heurística permitir.
• auto: Este é o valor padrão onde você não tem preferência e deixa o navegador decidir a prioridade apropriada.

Aqui estão alguns exemplos de uso do atributo fetchpriority na marcação e a propriedade de priority equivalente ao script.

<!-- Não priorize imagens depois da primeira dobra -->
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">

<!-- Queremos iniciar uma busca antecipada de um recurso, mas também despriorizá-lo -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">

<script>
  fetch('https://example.com/', {priority: 'low'})
  .then(data => {
    // Acionar uma busca de baixa prioridade
  });
</script>

<!-- O conteúdo de terceiros deste iframe pode ser carregado com baixa prioridade -->
<iframe src="https://example.com" width="600" height="400" fetchpriority="low"></iframe>Code language: HTML, XML (xml)

Quando uma dica de prioridade é definida em um iframe, a prioridade é aplicada apenas ao recurso principal do iframe. Todos os sub-recursos que o iframe carrega serão priorizados usando as mesmas regras que se aplicam a todos os outros recursos.

Exemplos

Você pode usar o atributo fetchpriority para abordar cenários em que pode precisar de dicas de prioridade de carregamento com a priority hints API.

Aumente a prioridade da imagem LCP

Você pode especificar fetchpriority="high" para aumentar a prioridade do LCP ou de outras imagens críticas. O aumento pode ser de até 30% no tempo de carregamento.

<img src="lcp-image.jpg" fetchpriority="high">Code language: HTML, XML (xml)

Priorizando o carregamento de elementos de um carrossel

Você pode usar o atributo fetchpriority para diminuir a prioridade de imagens que aparecem depois da dobra que podem não ser importantes, por exemplo, uma galeria de imagens ou um carrossel de imagens.

<ul class="carousel">
  <img alt="Priority hints personalização" src="img/carousel-1.jpg" fetchpriority="high">
  <img alt="Priority hints como utilizar" src="img/carousel-2.jpg" fetchpriority="low">
  <img alt="Priority hints personalização de carregamento" src="img/carousel-3.jpg" fetchpriority="low">
  <img src="img/carousel-4.jpg" fetchpriority="low">
</ul>Code language: HTML, XML (xml)

Controlando a prioridade de scripts

Os scripts necessários para tornar algumas partes da página interativas são essenciais, mas não devem bloquear outros recursos. Você pode marcá-los como assíncronos com alta prioridade.

<script src="async_but_important.js" async fetchpriority="high"></script>Code language: HTML, XML (xml)

Os scripts não podem ser marcados como assíncronos se dependerem de estados específicos do DOM. No entanto, se estiverem mais abaixo na página, poderão ser baixados com uma prioridade mais baixa, conforme mostrado.

<script src="blocking_but_unimportant.js" fetchpriority="low"></script>Code language: HTML, XML (xml)

Compatibilidade de navegadores

Até o momento, as dicas de prioridade estão disponíveis apenas em navegadores baseados no Chromium. Isso resulta num suporte total de 40% dos browsers, mas é bom ficar atento para quando essa funcionalidade tiver um apoio maior você está por dentro do assunto.

Se você gostou do post sobre Priority hints, confira mais tutoriais como esse confira a página da categoria tutoriais, e também confira o post sobre imagens responsivas.