INP y optimización de imágenes: Guía 2025

Resumen rápido

• INP ahora es señal de ranking estable (2025).
• Procesos de decodificación y layout forzado por imágenes tardías elevan latencias de interacción.
• Estrategia: acotar bytes críticos + reducir trabajo en main thread antes de primera interacción significativa.

1. Relación entre INP y pipeline de imágenes

(Explicar: decode → raster → composición y cola de tareas).

2. Patrones que degradan INP

• Placeholders que reemplazan layout → reflow.
• Decodificación simultánea de múltiples hero variantes.
• Uso de quality excesivo → más bytes → mayor decode time.
• Carga diferida mal calibrada (primer scroll genera bursts).

3. Métricas para aislar impacto

• Long tasks >50ms cercanas a primeras interacciones.
• Tiempo de decodificación (Performance API experimental / profiling DevTools).
• Diferencia entre LCP y primera interacción.

4. Tácticas prioritarias

• Reducir dimensiones reales (evitar oversizing >2×).
• Limitar hero a AVIF/WebP optimizado <180KB.
• fetchpriority="high" solo para la imagen LCP final.
• Placeholder ligero (dominant color / tiny blur <1KB).
• Cargar diferido de galerías tras requestIdleCallback.

5. Secuenciación

1. Medir baseline (INP p75 + LCP p75).
2. Inventariar héroes y galerías interactivas.
3. Re-encode y right-size.
4. Aplicar lazy y scheduling de decode.
5. Medir delta.

6. Ejemplo de <picture> optimizado (placeholder color)

<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="Ejemplo de producto" width="1440" height="720" loading="lazy" decoding="async" />
  </picture>
</div>

7. Checklist final

• Hero <180KB
• Sin oversizing >2×
• Placeholder ligero
• Lazy en secundarios
• DPR limitado (1x/2x)
• Preload solo LCP final
• Validado INP p75 mejora

8. Próximos pasos

Añadir tabla de casos reales (antes/después) con tiempo de interacción.