fetchpriority — Priorizando o Carregamento de Recursos

Nem toda imagem ou script numa página tem a mesma importância para a experiência do usuário. O navegador já tenta adivinhar isso sozinho, mas às vezes ele erra — carregando um ícone do rodapé antes da imagem principal do topo, por exemplo. O atributo fetchpriority permite corrigir esse palpite manualmente, dizendo ao navegador quais recursos merecem prioridade alta ou baixa no carregamento.

O problema que ele resolve

O navegador calcula uma prioridade interna para cada requisição com base no tipo de recurso e onde ele está no HTML. Uma imagem grande logo no topo da página (candidata a LCP — Largest Contentful Paint) costuma competir por banda com CSS, fontes e scripts que chegam antes dela no documento, mesmo sendo mais crítica para o usuário perceber a página carregada.

<link rel="stylesheet" href="estilo.css">
<script src="analytics.js"></script>

<img src="banner-principal.jpg" alt="Banner">

Sem nenhuma dica extra, o navegador pode demorar para começar a baixar o banner-principal.jpg, mesmo ele sendo o maior elemento visível assim que a página carrega.

Como funciona o atributo

Basta adicionar fetchpriority com um dos três valores: high, low ou auto (o padrão, que deixa a decisão a cargo do navegador):

<img src="banner-principal.jpg" alt="Banner" fetchpriority="high">

Isso sinaliza que essa imagem deve ser buscada antes de recursos com prioridade padrão, mesmo que apareça depois deles no HTML.

Rebaixando recursos pouco importantes

O mesmo atributo serve para o caminho inverso — despriorizar algo que está no HTML cedo, mas que não é urgente:

<img src="banner-principal.jpg" alt="Banner" fetchpriority="high">

<img src="icone-rodape.svg" alt="" fetchpriority="low">

Aqui o ícone do rodapé, mesmo carregado via <img> normal, cede espaço na fila de rede para a imagem principal.

Funciona em link e script também

Além de <img>, o atributo é aceito em <link> e <script>. Um caso comum é combinar com rel="preload" para garantir que uma fonte ou imagem crítica seja buscada o quanto antes:

<link rel="preload" href="fonte-titulo.woff2" as="font" type="font/woff2" crossorigin fetchpriority="high">

<script src="terceiros-nao-critico.js" fetchpriority="low"></script>

Ajustando via JavaScript

Também é possível ler e alterar a prioridade dinamicamente pela propriedade fetchPriority do elemento:

const banner = document.querySelector('img.banner');
console.log(banner.fetchPriority); // "high"

const imagemSecundaria = new Image();
imagemSecundaria.fetchPriority = 'low';
imagemSecundaria.src = 'produto-relacionado.jpg';

Quando usar

Na imagem principal do topo (hero) ou em qualquer candidata a LCP, com fetchpriority="high".
Em fontes críticas usadas no texto acima da dobra, combinado com rel="preload".
Para despriorizar imagens fora da área visível inicial, mas que ainda não valem um loading="lazy" completo.
Em scripts de terceiros (analytics, chat, anúncios) que não devem competir com o conteúdo principal, usando fetchpriority="low".

Cuidados

fetchpriority="high" é uma dica, não uma garantia — o navegador ainda pode ajustar o comportamento conforme a situação. Usar em excesso também anula o efeito: se tudo tem prioridade alta, nada tem. O ideal é reservar o atributo para o único (ou poucos) recurso que realmente define a percepção de carregamento da página, deixando o resto no auto padrão.

Compatibilidade

Suporte amplo nos navegadores baseados em Chromium, Firefox e Safari desde 2024. Ainda assim, por ser uma dica progressiva, um navegador que não reconhece o atributo simplesmente o ignora sem quebrar nada.

caniuse

Conclusão

O fetchpriority dá ao desenvolvedor uma palavra final sobre o que realmente importa carregar primeiro, sem precisar recorrer a truques como duplicar tags ou injetar preloads via JavaScript. É uma mudança pequena no HTML que pode ter impacto real em métricas como LCP.