Prioridades de imagens em 2025 — fetchpriority, preload

Resumo

O LCP afeta SEO/UX. Use fetchpriority, rel=preload e fontes corretas para manter LCP < 2,5 s.

Regras

• Uma imagem LCP; evite mudanças tardias de dimensão.
• fetchpriority="high" para LCP; low para fora de tela.
• preload deve usar a mesma URL da imagem.

Exemplo

Estabilize o LCP com: (1) fetchpriority na imagem LCP, (2) um único preload correto, (3) srcset/sizes fiéis ao layout, (4) dimensões explícitas para evitar CLS e (5) uma política de cache/CDN consistente.

Uma única imagem LCP; não mude dimensões tardiamente. fetchpriority="high" para a imagem LCP; low para fora de tela. O preload deve usar exatamente a mesma URL/conjunto que o <img> final.

Regra 1 — Prioridade explícita do LCP

• Em header fixo, considere loading="eager" e decoding="async" além de fetchpriority.
• Sempre defina width/height para evitar CLS.

Regra 2 — Um único preload, bem formado

• <link rel="preload" as="image" imagesrcset="…" imagesizes="…">.
• Evite excesso de preloads; HTTP/2/3 já é multiplexado.

Regra 3 — Tamanhos responsivos consistentes

• sizes deve refletir o CSS; evite superdistribuição.

• Use <picture> quando houver art‑direction.

• Home: LCP único, prioridade alta, fontes swap. Home: LCP único, prioridade alta, fontes swap. Artigo: capa com prioridade; galerias lazy. Listagem: miniaturas lazy; preloads progressivos.

Medir

Laboratório: Lighthouse/WebPageTest (LCP, CLS, TBT). Campo: CrUX/GA4 p75 LCP. DevTools: coluna Priority, consistência do preload, tamanhos pedidos.

Relacionados

• Responsivo: Imagens responsivas em 2025 — Guia prático de srcset/sizes
• Compressão: Estratégia Definitiva de Compressão de Imagens 2025 – Guia prático para otimizar velocidade preservando a qualidade