Priority hints é uma nova propriedade aguardada para a versão 101 do Google Chrome, que indica a prioridade de carregamento de recursos pelo navegador. Priority Hints é uma ferramenta importante para melhorar os indicadores 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 recursos, como imagens, scripts e CSS. O navegador tenta priorizar os elementos com base numa regra comum entre os sites na web.

Essa prioridade pode depender do tipo de recurso e de onde ele se encontra no documento. Por exemplo, imagens na primeira dobra podem ter prioridade alta, enquanto o carregamento do CSS principal pode ter prioridade muito alta. Os navegadores atualmente são muito bons em 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-chave:

• 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 as priority hints.

O pré-carregamento permite que você informe ao navegador quais recursos críticos deseja carregar antes que sejam carregados 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 a partir de um script.

Como funciona a prioridade de carregamento

A sequência de download de recursos depende da prioridade atribuída pelo navegador a cada recurso na página. Diferentes fatores podem afetar a lógica de priorização. Além disso, essas regras podem variar 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 ajudar 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 Network do Chrome DevTools. (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 sobre como ajustar o conteúdo existente para priorizar a ordem de download. 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 carregada muito antes, o que melhora o Largest Contentful Paint (LCP).

Às vezes, esses identificadores podem não ser suficientes para priorizar os recursos de maneira ideal para o 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 prioridade mais alta do que as demais.
• As hero images são adicionadas como background de um elemento. Isso geralmente acarreta um atraso significativo no carregamento da imagem. Fornecer a dica de prioridade na marcação permite que a imagem comece com alta prioridade e carregue 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 prioridade enquanto garante o download assíncrono, principalmente para scripts críticos à 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 prioridades diferentes. Isso pode ser útil ao executar chamadas de API em segundo plano e combiná-las com chamadas de API que respondem à 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 podem ser 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 de tipos de recursos, como CSS, fontes, scripts, imagens e iframes, ao baixá-los 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 ocorra.
• 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 em que 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 chegar a 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 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ê estará 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.