Imágenes y Core Web Vitals: diagnostica antes de comprimir

Una imagen más pequeña no arregla automáticamente una página lenta. Empieza con una grabación de rendimiento e identifica el elemento y la espera que afectan al visitante.

LCP: identifica el elemento y la espera

El contenido visible más grande puede ser una imagen, un vídeo o un bloque de texto. Si es una imagen, comprueba cuándo empieza la petición, cuándo terminan de llegar los bytes y cuándo se dibuja. Comprimir actúa sobre la transferencia; no elimina respuestas lentas del servidor, descubrimiento tardío o retrasos de renderizado. La explicación de LCP de Google define la métrica.

Si la imagen es realmente el elemento LCP, evita cargarla con lazy loading. Incluye su URL en el HTML inicial y valora fetchpriority="high". Ajusta las dimensiones a su uso; la guía de imágenes adaptables explica srcset y sizes. Vuelve a medir en las mismas condiciones, sin prometer un ahorro fijo de milisegundos.

CLS: reserva espacio y revisa otras causas

Añade los atributos width y height correctos y CSS adaptable como max-width:100%; height:auto. Así el navegador puede reservar la proporción antes de cargar la imagen. La falta de espacio reservado es una causa de desplazamientos; también pueden provocarlos anuncios, fuentes y contenido insertado. La guía CLS de Google explica esos casos.

INP: revisa la interacción

Una imagen que pesa poco puede requerir mucho procesamiento. Graba el clic, arrastre o conversión lento y busca tareas largas, lienzos grandes o actualizaciones repetidas. Considera workers o ceder tiempo de ejecución cuando proceda. Cambiar el formato no demuestra por sí solo una mejora de respuesta. Consulta la definición de INP.

Un cálculo de tamaño verificable

Nuestro original sintético ocupa 272855 bytes y la salida WebP q80, 40808. La diferencia es 232047 bytes. A una velocidad hipotética constante de 5 millones de bits/segundo, 232047 × 8 / 5000000 equivale a unos 0,37 segundos de transferencia. Es un cálculo, no una mejora medida de carga o LCP: excluye conexión, competencia de red, caché, decodificación y diferencias de calidad.

Usa Comprimir imagen con tu original, descarga e inspecciona la salida y después mide la página que la utiliza. Conserva una versión de comparación y anota viewport, limitación de red, caché y versión de la herramienta. Repite para observar variabilidad. El laboratorio ayuda a diagnosticar; los datos de campo describen visitas reales y necesitan cobertura suficiente. Una ejecución local no demuestra una mejora para todos los usuarios.