INP e otimização de imagens: Guia 2025

Resumo rápido

• Em 2025 o INP já é um sinal de ranking consolidado.
• Processos de decodificação e layouts forçados por imagens tardias elevam a latência de interação.
• Estratégia central: limitar bytes críticos e reduzir trabalho na main thread antes da primeira interação significativa.

1. Relação entre INP e pipeline de imagens

A cada interação o navegador pode estar ocupado com decodificação → rasterização → composição de imagens. Quando isso acontece em paralelo ao input do usuário, a fila de tarefas se acumula e o INP sobe. Minimizar bytes e priorizar apenas o que precisa ser renderizado evita que a main thread fique bloqueada.

2. Padrões que degradam o INP

• Placeholders que mudam o layout inteiro assim que carregam, gerando reflows.
• Decodificar simultaneamente múltiplas variantes hero.
• Usar quality exagerado, aumentando bytes e tempo de decode.
• Carregar imagens diferidas sem controle; primeiro scroll gera rajadas de requisições pesadas.

3. Métricas para isolar impacto

• Long tasks > 50 ms próximas às primeiras interações (Performance profiler).
• Tempo de decodificação (API experimental de Performance ou DevTools).
• Diferença entre LCP p75 e a primeira interação registradas em RUM.

4. Táticas prioritárias

• Reduza dimensões reais: evite oversizing acima de 2× do espaço renderizado.
• Limite o hero a AVIF/WebP otimizado < 180 KB.
• Use fetchpriority="high" apenas na imagem LCP definitiva.
• Placeholder leve (cor dominante ou blur compacto <1 KB).
• Carregue galerias secundárias após requestIdleCallback ou quando houver real intenção.

5. Sequência recomendada

1. Meça baseline (INP p75 + LCP p75).
2. Faça inventário de heróis e galerias interativas.
3. Reencode e ajuste dimensões.
4. Aplique lazy e agendamento de decode.
5. Meça o ganho e documente.

6. Exemplo de <picture> otimizado (placeholder por cor)

<div style="background:#0a0a0a;width:100%;aspect-ratio:2/1;">
  <picture>
    <source type="image/avif" srcset="hero-960.avif 960w, hero-1440.avif 1440w" sizes="(max-width: 900px) 95vw, 1440px" />
    <source type="image/webp" srcset="hero-960.webp 960w, hero-1440.webp 1440w" sizes="(max-width: 900px) 95vw, 1440px" />
    <img src="hero-960.jpg" alt="Exemplo de produto" width="1440" height="720" loading="lazy" decoding="async" />
  </picture>
</div>

7. Checklist final

• Hero < 180 KB
• Sem oversizing > 2×
• Placeholder leve
• Lazy em imagens secundárias
• DPR limitado (1x / 2x)
• Preload apenas do LCP final
• INP p75 monitorado após ajustes

8. Próximos passos

Monte uma tabela de casos reais (antes/depois) com tempo de interação para compartilhar com o time e manter as melhorias permanentes.