Como pré-carregar a imagem LCP sem competir com outros recursos

Preload pode antecipar recurso crítico, mas muitos preloads competem pela largura de banda inicial.

Antes de começar

Confirme no relatório que o LCP é imagem e que o navegador a descobre tarde.

Passo a passo

1. Se a auditoria confirmar que uma imagem LCP importante é descoberta tarde, adicione preload no <head> apontando para o mesmo arquivo responsivo que o img usará:

<link rel="preload" as="image"
      href="/img/hero-960.webp"
      imagesrcset="/img/hero-640.webp 640w, /img/hero-960.webp 960w, /img/hero-1440.webp 1440w"
      imagesizes="(max-width: 700px) 100vw, 960px"
      fetchpriority="high">

Os valores href, imagesrcset e imagesizes devem corresponder ao src/srcset/sizes reais; para uma imagem simples sem variantes, basta rel="preload" as="image" href="...". Não pré-carregue todas as alternativas nem imagens fora da primeira tela.

2. Compare waterfall e Web Vitals antes e depois em mais de um perfil de rede.

Limites e cuidados

Pré-carregamento excessivo pode atrasar CSS, fontes ou outros recursos críticos. Confira no Network que a mesma imagem não é baixada duas vezes por URLs/formatos diferentes, que o recurso LCP inicia mais cedo e que outras prioridades não pioraram; repita em rede/CPU simuladas e observe CrUX/campo depois. Veja preload de imagem responsiva.

Continue na biblioteca

Fonte oficial: Pré-carregar recursos críticos — web.dev.

Conteúdo da biblioteca de Diego Henrich. Confira as fontes citadas e valide orientações que dependem da versão de uma plataforma ou serviço.