Fazer preload da imagem do Largest Contentful Paint

O que é Preloading?

O preloading diz ao navegador para baixar algo antecipadamente, antes que a renderização principal comece. O arquivo fica pronto mais cedo e não bloqueia a renderização da página. Em termos de tempo de LCP, o preloading reduz o Resource Load Delay: a lacuna entre o navegador receber o HTML e começar a baixar a imagem LCP.

<link rel="preload"
as="image"
href="image.jpg"
fetchpriority="high"
imagesrcset="image_400px.jpg 400w, image_800px.jpg 800w"
imagesizes="100vw">

Por que devo fazer o preload da imagem do Largest Contentful Paint?

Imagens que estão visíveis e na viewport terão uma alta prioridade e serão baixadas relativamente cedo em todo o processo de carregamento da página. Navegadores como o Chrome farão o melhor possível para priorizar essas imagens para você e muitas vezes farão um bom trabalho. Ainda assim, os navegadores farão uma suposição fundamentada na ordem de download e frequentemente priorizarão outros recursos, como JavaScript remoto ou outras imagens visíveis, sobre a imagem LCP.

Por causa desse comportamento, o download da imagem LCP não começará tão cedo quanto você gostaria. Fazer o preload da imagem do Largest Contentful Paint resolverá esse problema.

Os números confirmam isso. De acordo com o Web Almanac de 2025, 76% das páginas mobile têm uma imagem como seu elemento LCP. No entanto, apenas 2,1% das páginas realmente fazem o preload dessa imagem. Essa é uma grande oportunidade perdida. Além disso, muitas imagens LCP não são detectáveis no HTML inicial porque dependem de JavaScript ou CSS para renderizar. O navegador não pode baixar o que não consegue encontrar. Uma tag de preload resolve isso.

Como o preload da imagem do Largest Contentful Paint afeta o desempenho da página?

Fazer o preload da imagem LCP a torna disponível para renderização mais cedo. O resultado: uma pontuação de LCP melhor tanto no Lighthouse quanto nos dados de campo.

Nos sites monitorados pelo CoreDash, 98% dos carregamentos de página com uma imagem LCP com preload pontuam como 'bom', em comparação com 88% sem o preload. O p75 do LCP para imagens com preload é aproximadamente 2x mais rápido do que para aquelas sem preload.

O preloading é ainda mais importante quando a imagem LCP não é a primeira imagem que o navegador baixa. Isso acontece quando:

• Existem várias imagens na viewport visível
• A imagem LCP é uma imagem de fundo (imagens de fundo geralmente são baixadas depois das imagens de primeiro plano)
• O elemento LCP depende de JavaScript. Por exemplo, com um script de slider ou se o seu site for construído sobre um framework JavaScript como o React.

Ainda assim, 17% dos sites mobile usam lazy-load em sua imagem LCP, de acordo com o Web Almanac de 2025. Apenas 62% das origens mobile passam no LCP. Esses dois fatos não são independentes. Se você está usando lazy-load na sua imagem LCP, corrija isso primeiro e, em seguida, faça o preload dela.

Use fetchpriority="high" na imagem LCP

Além do preloading, você também deve adicionar fetchpriority="high" ao próprio elemento de imagem LCP. Isso diz ao navegador para priorizar essa imagem sobre outros recursos. Um teste no Google Flights mostrou melhorias de LCP de 2,6 segundos para 1,9 segundos apenas adicionando este atributo.

<img src="hero.jpg"
     fetchpriority="high"
     width="800"
     height="400"
     alt="Hero image">

Uma imagem com preload ainda recebe prioridade padrão a menos que você a aumente explicitamente. Combinar rel="preload" com fetchpriority="high" tanto na tag link quanto no elemento img dá ao navegador o sinal mais claro possível. Para saber mais sobre como os navegadores decidem o que baixar primeiro, veja o guia completo sobre priorização de recursos.

<link rel="preload"
      as="image"
      href="hero.jpg"
      fetchpriority="high">

A adoção de fetchpriority="high" cresceu de 0,03% dos sites mobile em 2022 para 17,3% em 2025, em grande parte graças ao WordPress adicioná-lo ao seu núcleo. Se o seu CMS não o define automaticamente, adicione-o você mesmo.

Como fazer o preload da imagem do Largest Contentful Paint

Fazer o preload da imagem LCP é fácil. Existem apenas 3 passos a seguir:

1. Determine o elemento LCP: Execute uma auditoria no Lighthouse e verifique o elemento de Largest Contentful Paint. Certifique-se de que o elemento LCP é realmente uma imagem!
2. Verifique formatos de imagem responsivos. Se você estiver usando imagens responsivas, você precisa adicionar todos esses tamanhos de imagem ao srcset da tag de preload. Caso contrário, faremos o preload da imagem errada. Isso apenas deixará a página mais lenta.
3. Adicione a tag de preload. Tudo o que resta fazer é adicionar a tag de preload.

<link
   <!-- indicar preload -->
   rel="preload"
   <!-- as é necessário e indica que estamos fazendo o preload de uma imagem -->
   as="image"
   <!-- src da imagem -->
   href="wolf.jpg"
   <!-- aumentar a prioridade -->
   fetchpriority="high"
   <!-- opcional: o srcset da imagem responsiva -->
   imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w"
   <!-- deve corresponder ao atributo sizes no seu elemento img -->
   imagesizes="100vw">

O valor de imagesizes deve corresponder ao atributo sizes no seu elemento <img>. Se a sua imagem é exibida com metade da largura da viewport, use imagesizes="50vw". Fazer isso incorretamente significa que o navegador fará o preload da variante de imagem errada.

Faça o preload apenas da imagem LCP. Se você fizer o preload de muitos recursos, você diluirá o aumento de prioridade e o navegador não conseguirá distinguir o que mais importa. Um preload para a imagem LCP é tudo o que você precisa. Para uma abordagem ainda mais agressiva, você pode combinar o preloading com 103 Early Hints para iniciar o download antes mesmo que o HTML chegue.

O preloading faz com que a imagem seja baixada mais cedo, mas a imagem em si ainda precisa ser otimizada. Sirva-a em um formato moderno como WebP ou AVIF e nas dimensões certas. Veja otimizar imagens para os Core Web Vitals para o resumo completo.

O preloading ajuda apenas com uma parte do tempo do LCP: o atraso antes que a imagem comece a ser baixada. Se o seu Time to First Byte for lento, nenhuma quantidade de preloading irá compensar. A tag de preload vive no HTML, então o navegador tem que receber o HTML primeiro. Verifique seu TTFB antes de adicionar dicas de preload.

Como fazer o preload da imagem do Largest Contentful Paint no WordPress

Fazer o preload da imagem do Largest Contentful Paint no WordPress não é nada difícil. Geralmente, a imagem do Largest Contentful Paint é a imagem destacada de um post ou página de blog. Com apenas algumas linhas de código, podemos capturar o url e o srcset da imagem destacada e adicionar isso ao head da página.

Basta adicionar este código diretamente após o elemento title no arquivo header.php do seu template atual.

<?php if((int)get_post_thumbnail_id() > 0){
 $imgurl = get_the_post_thumbnail_url();
 $srcset = wp_get_attachment_image_srcset(get_post_thumbnail_id());
 $sizes = wp_get_attachment_image_sizes(get_post_thumbnail_id());
?>
 <link rel="preload"
       as="image"
       href="<?php echo $imgurl;?>"
       fetchpriority="high"
       imagesrcset="<?php echo $srcset;?>"
       imagesizes="<?php echo $sizes;?>">
<?php } ?>