Pré-carregar a imagem do Largest Contentful Paint

O que é Preloading?

Pré-carregar (preloading) um recurso fará com que o navegador baixe um recurso logo no início, mesmo antes que a renderização principal do navegador comece. Isso garante que um recurso esteja disponível mais cedo e seja menos provável que bloqueie a renderização da página, o que melhorará o desempenho na maioria dos casos. Em termos de tempo do 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 pré-carregar a imagem do largest contentful paint?

As imagens que estão visíveis e na viewport terão alta prioridade e serão baixadas relativamente cedo em todo o processo de carregamento da página. Navegadores como o Chrome farão o 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, em detrimento da imagem LCP.

Devido a esse comportamento, o download da imagem LCP não começará tão cedo quanto você gostaria. Pré-carregar a imagem do Largest Contentful Paint resolverá esse problema.

Os números comprovam isso. De acordo com o Web Almanac de 2025, 76% das páginas móveis têm uma imagem como elemento LCP. No entanto, apenas 2,1% das páginas realmente pré-carregam essa imagem. Essa é uma enorme 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 preload resolve isso.

Como o pré-carregamento da imagem do Largest Contentful Paint afeta o desempenho da página?

Pré-carregar a imagem do Largest Contentful Paint tornará a imagem disponível para renderização mais cedo no processo de renderização. Isso geralmente leva a uma melhor pontuação LCP. Em quase todos os casos, pré-carregar o elemento LCP lhe dará melhores pontuações no Lighthouse e nos dados de campo.

Nos sites monitorados pelo CoreDash, 98% dos carregamentos de página com uma imagem LCP pré-carregada têm pontuação 'good' (boa), em comparação com 88% sem pré-carregamento. O LCP p75 para imagens pré-carregadas é cerca de 2x mais rápido do que para as não pré-carregadas.

Pré-carregar o elemento LCP pode ser ainda mais benéfico quando, por algum motivo, a imagem LCP não for a primeira imagem a ser baixada. Isso pode acontecer 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 em primeiro plano)
• O elemento LCP depende de JavaScript. Por exemplo, com um script de slider ou se o seu site for construído em um framework JavaScript como React.

Ainda assim, 17% dos sites móveis usam lazy-load em sua imagem LCP de acordo com o Web Almanac de 2025. Apenas 62% das origens móveis passam no LCP. Esses dois fatos não estão não relacionados. Se você está carregando de forma preguiçosa (lazy-loading) sua imagem LCP, corrija isso primeiro e, em seguida, pré-carregue-a.

Use fetchpriority="high" na imagem LCP

Além do pré-carregamento, você também deve adicionar fetchpriority="high" ao próprio elemento de imagem LCP. Isso diz ao navegador para priorizar esta imagem em relação a 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 pré-carregada 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, consulte o guia completo para priorização de recursos.

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

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

Como pré-carregar a Imagem do Largest Contentful Paint

Pré-carregar a imagem LCP é fácil. Existem apenas 3 passos a seguir:

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

<link
   <!-- indicate preload -->
   rel="preload"
   <!-- as is required and indicates we are preloading an image -->
   as="image"
   <!-- image src -->
   href="wolf.jpg"
   <!-- boost priority -->
   fetchpriority="high"
   <!-- optional: the responsive image srcset -->
   imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w"
   <!-- must match the sizes attribute on your img element -->
   imagesizes="100vw">

O valor de imagesizes deve corresponder ao atributo sizes no seu elemento <img>. Se a sua imagem for exibida na metade da largura da viewport, use imagesizes="50vw". Entender isso errado significa que o navegador pré-carrega a variante de imagem incorreta.

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

O preloading faz com que a imagem seja baixada mais cedo, mas a própria imagem ainda precisa ser otimizada. Sirva-a em um formato moderno como WebP ou AVIF e nas dimensões certas. Consulte otimizar imagens para Core Web Vitals para um 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 compensará. A tag preload vive no HTML, então o navegador precisa receber o HTML primeiro. Verifique o seu TTFB antes de adicionar as hints de preload.

Como pré-carregar a Imagem do Largest Contentful Paint no WordPress

Pré-carregar a 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 de blog ou página. Com apenas algumas linhas de código, podemos obter o URL da imagem destacada e o srcset e adicioná-lo ao head da página.

Basta adicionar este código logo 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 } ?>