Otimizar a prioridade da imagem

Os navegadores usam heurísticas para atribuir prioridades de carregamento às imagens, mas esses padrões nem sempre se alinham com a Largest Contentful Paint (LCP) da sua página.

Usar fetchpriority em um elemento <img> permite sinalizar explicitamente a importância de uma imagem para o navegador, garantindo que as imagens críticas sejam carregadas mais rapidamente, enquanto as não essenciais não competem por largura de banda.

O atributo loading=lazy impede que as imagens sejam baixadas quando estão fora da tela, o que pode ajudar a priorizar as imagens.

Como fazer a implementação

1. Identifique a imagem da LCP: determine qual imagem é a candidata mais provável para a Largest Contentful Paint (geralmente a imagem principal na parte de cima da página).
2. Aumente a prioridade da LCP: adicione fetchpriority="high" ao elemento <img> do candidato à LCP.
3. Remova a prioridade de imagens não críticas: para imagens que fazem parte de uma interface secundária ou que só são reveladas após a interação do usuário (como megamenus, modais ou slides de carrossel fora da tela), adicione fetchpriority="low".
4. Otimize o carregamento lento: nunca use loading="lazy" na imagem da LCP. Para imagens padrão abaixo da dobra, loading="lazy" é suficiente para adiar a solicitação até que o usuário role a página para perto delas. Evite adicionar fetchpriority="low" a essas imagens, porque elas precisam ser carregadas com prioridade normal quando o usuário rolar até elas. Reserve fetchpriority="low" para imagens que estão tecnicamente "acima da dobra", mas não estão visíveis inicialmente (por exemplo, slides de carrossel ocultos ou megamenus). Para essas imagens ocultas, também é aceitável usar loading="lazy". O navegador vai processar o tempo da solicitação respeitando a baixa prioridade.
5. Prefira as prioridades padrão: se uma imagem tiver prioridade de carregamento normal, omita o atributo fetchpriority em vez de defini-lo como auto. Essa é uma convenção estilística para manter o HTML mais limpo, usando as heurísticas nativas do navegador.

Exemplo de código

<!-- Elevate priority for the LCP image -->
<img src="/images/hero-lcp.jpg"
     alt="Main Banner"
     fetchpriority="high"
     width="800" height="400">

<!-- Deprioritize initially hidden images above the fold -->
<!-- Additionally use `loading="lazy"` if there are likely to be many images-->
 <div class="carousel">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 1"
          width="400" height="300">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 2"
          fetchpriority="low"
          loading="lazy"
          width="400" height="300">
<div>

<!-- Deprioritize images revealed only after user interaction -->
<img src="/images/mega-menu-promo.jpg"
     alt="Special Offer"
     fetchpriority="low"
     width="300" height="150">

<!-- Use lazy loading ALONE for standard below-the-fold images -->
<img src="/images/footer-logo.png"
     alt="Footer Logo"
     loading="lazy"
     width="120" height="60">

<!-- Omit fetchpriority for images with standard priority -->
<img src="/images/standard-image.jpg"
     alt="Standard Image"
     width="400" height="300">

Práticas recomendadas

• OBRIGATÓRIO: sempre aplique fetchpriority="high" à imagem LCP.
• OBRIGATÓRIO: use fetchpriority="high" em no máximo uma ou duas imagens críticas para evitar a contenção de rede e a diluição do aumento de prioridade.
• OBRIGATÓRIO: use fetchpriority="low" para imagens que estão tecnicamente "acima da dobra", mas inicialmente ocultas (por exemplo, slides de carrossel ocultos, imagens de megamenu).
• OBRIGATÓRIO: não use fetchpriority="low" em imagens padrão abaixo da dobra que já usam loading="lazy". Essas imagens precisam ser carregadas com prioridade normal quando entram na janela de visualização.
• RECOMENDADO: evite usar fetchpriority="auto". Se você quiser a prioridade padrão, omita o atributo para manter o HTML limpo.
• NÃO combine fetchpriority="high" com loading="lazy".
• NÃO use o atributo importance descontinuado. Ele foi substituído por fetchpriority e não é compatível com nenhum navegador.
• NÃO use o valor loading="auto" descontinuado. Ele era compatível com o Chrome, mas foi removido e não é mais compatível com nenhum navegador.

Estratégia de fallback

O atributo fetchpriority é um aprimoramento progressivo para o elemento <img>. Se um navegador não for compatível com ele, o atributo será ignorado, e o navegador vai usar as heurísticas de prioridade padrão.