Pré-carregar a imagem do Largest Contentful Paint

O que é pré-carregamento?

O pré-carregamento diz ao navegador para baixar algo antecipadamente, antes do rendering principal começar. O arquivo fica pronto mais cedo e não bloqueia o render da página. Em termos de timing do LCP, o pré-carregamento reduz o Resource Load Delay: o intervalo entre o navegador receber o HTML e começar a baixar a imagem do 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?

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 fazem o máximo para priorizar essas imagens para você e frequentemente fazem um bom trabalho. Ainda assim, os navegadores fazem uma estimativa da ordem de download e frequentemente priorizam outros recursos como JavaScript remoto ou outras imagens visíveis em vez da imagem do LCP.

Por causa desse comportamento, o download da imagem do LCP não começa tão cedo quanto você gostaria. Pré-carregar a imagem do Largest Contentful Paint resolve esse problema.

Os números confirmam isso. De acordo com o 2025 Web Almanac, 76% das páginas móveis têm uma imagem como seu elemento LCP. No entanto, apenas 2,1% das páginas realmente pré-carregam essa imagem. Essa é uma oportunidade enorme desperdiçada. Além disso, muitas imagens LCP não são descobertas no HTML inicial porque dependem de JavaScript ou CSS para serem renderizadas. O navegador não pode baixar o que não consegue encontrar. Uma tag de preload resolve isso.

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

Pré-carregar a imagem do LCP a torna disponível para rendering mais cedo. O resultado: um score 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 pré-carregada obtêm score 'bom', comparado com 88% sem pré-carregamento. O p75 do LCP para imagens pré-carregadas é aproximadamente 2x mais rápido do que para imagens sem pré-carregamento.

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

• Existem múltiplas imagens na viewport visível
• A imagem do LCP é uma imagem de fundo (imagens de fundo geralmente são baixadas mais tarde que imagens em primeiro plano)
• O elemento LCP depende de JavaScript. Por exemplo, com um script de slider ou se o seu site é construído sobre um framework JavaScript como React.

Ainda assim, 17% dos sites móveis aplicam lazy-load na sua imagem LCP de acordo com o 2025 Web Almanac. Apenas 62% das origins móveis passam no LCP. Esses dois factos não são independentes. Se você está aplicando lazy-load na sua imagem LCP, corrija isso primeiro e depois pré-carregue-a.

Use fetchpriority="high" na imagem do LCP

Além do pré-carregamento, você também deve adicionar fetchpriority="high" ao próprio elemento de imagem do LCP. Isso diz ao navegador para priorizar esta imagem sobre outros recursos. Um teste no Google Flights mostrou melhorias no 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, veja o guia completo de 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 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 define automaticamente, adicione-o você mesmo.

Como pré-carregar a imagem do Largest Contentful Paint

Pré-carregar a imagem do LCP é fácil. São apenas 3 passos a seguir:

1. Determine o elemento LCP: Execute uma auditoria do Lighthouse e verifique o elemento Largest Contentful Paint. Certifique-se de que o elemento LCP é realmente uma imagem!
2. Verifique os formatos de imagem responsiva. Se você está usando imagens responsivas, precisa adicionar todos esses tamanhos de imagem ao srcset da tag de preload. Caso contrário, vamos pré-carregar a imagem errada. Isso só vai tornar a página mais lenta.
3. Adicione a tag de preload. Tudo o que resta fazer é adicionar a tag de 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 é exibida com metade da largura da viewport, use imagesizes="50vw". Errar isso significa que o navegador pré-carrega a variante errada da imagem.

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

O pré-carregamento faz a imagem começar a ser baixada mais cedo, mas a imagem em si ainda precisa ser otimizada. Sirva-a num formato moderno como WebP ou AVIF e nas dimensões corretas. Veja otimizar imagens para Core Web Vitals para o guia completo.

O pré-carregamento só ajuda com uma parte do timing do LCP: o atraso antes da imagem começar a ser baixada. Se o seu Time to First Byte é lento, nenhuma quantidade de pré-carregamento vai compensar. A tag de preload está no HTML, então o navegador precisa receber o HTML primeiro. Verifique o seu TTFB antes de adicionar dicas 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. Normalmente, a imagem do Largest Contentful Paint é a imagem destacada de um post ou página do blog. Com apenas algumas linhas de código, podemos obter a URL da imagem destacada e o srcset e adicioná-los 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 } ?>