Cómo afecta el tamaño de las imágenes a Core Web Vitals

¿Qué Core Web Vitals pueden verse afectados?

Largest Contentful Paint (LCP) mide cuándo se representa la imagen o bloque de texto visible más grande. Puede ser una fotografía destacada, pero no es automáticamente el logo ni el archivo más pesado. Identifica el elemento medido. La guía LCP de Google explica los retrasos de descubrimiento, descarga y representación.

Cumulative Layout Shift (CLS) mide movimientos inesperados. Sin espacio reservado, una imagen puede desplazar el contenido al llegar. La guía CLS recomienda dimensiones para reservar su proporción.

Interaction to Next Paint (INP) trata la respuesta a interacciones. Comprimir una foto no arregla automáticamente un menú lento o un controlador de clic costoso. Investígalos con la documentación INP.

¿Qué se considera un buen resultado de Core Web Vitals?

La tabla muestra los umbrales de buen rendimiento de la guía Core Web Vitals de Google. Las tres métricas deben cumplir sus objetivos en el percentil 75 de las visitas reales, evaluando móvil y ordenador por separado. Una imagen menor o una sola prueba de laboratorio favorable no demuestra que la página apruebe. Si falla INP, investiga los retrasos de interacción en lugar de volver a comprimir la foto.

Empieza por la imagen principal visible

En un producto, revisa la foto principal; en un artículo, la portada o título identificado por el informe. Anota peso, dimensiones en píxeles y tamaño mostrado antes de crear la copia para poder comparar.

Si la foto excede mucho lo necesario, prepara una versión menor con el redimensionador. Compara después WebP mediante JPG a WebP. Evalúa los detalles y textos que necesita el visitante, no solo los kilobytes ahorrados.

Permite que el navegador cargue pronto la imagen principal

No apliques carga diferida a la imagen LCP. Un archivo pequeño puede aparecer tarde si los scripts retrasan su descubrimiento. Pide al desarrollador del tema o sitio que revise la solicitud real si comprimir ayuda poco.

Usa carga diferida selectivamente en imágenes inferiores. La primera foto visible de una galería se necesita enseguida; las posteriores pueden llegar al aproximarse el visitante.

Identifica la imagen LCP medida en la página publicada. Debe descubrirse pronto y no cargarse de forma diferida. Un desarrollador puede considerar fetchpriority="high" para esa imagen concreta; aplicarlo a toda la galería elimina la utilidad de priorizar. Revisa después las peticiones.

Mantén estable el diseño

Indica anchura y altura en el código y conserva las proporciones con estilos adaptables. Revisa un móvil estrecho y un escritorio ancho. Si hay recorte intencionado, reserva su área de visualización de forma coherente.

Si sigue habiendo movimiento, comprueba banners, elementos incrustados y fuentes. Cambiar una imagen no arregla un aviso que se inserta encima del artículo después de aparecer la página.

Dimensiones HTML como width="1200" y height="800" indican la proporción. CSS puede mostrar una imagen menor con max-width: 100% y height: auto. Comprueba que el tema no imponga una altura fija incompatible. Una tarjeta recortada requiere un espacio reservado coherente con su recorte.

Si el párrafo sigue saltando cuando aparece un archivo menor, quizá falte espacio reservado. Corrige dimensiones o contenedor y vuelve a medir. Un marco estable también puede contener una imagen lenta: reservar espacio no reduce el archivo.

Verifica un cambio cada vez

1. Anota URL, dispositivo y elemento problemático.
2. Cambia una imagen o ajuste de entrega.
3. Confirma que la página solicita el archivo nuevo y no el anterior en caché.
4. Repite la misma prueba e inspecciona la pantalla inicial.
5. Conserva el cambio si calidad y medición lo respaldan.

Exportar es solo una parte del rendimiento. Continúa con el proceso PageSpeed para imágenes.