Cómo optimizar imágenes para Google PageSpeed

Registra un punto de partida útil

Abre PageSpeed Insights, introduce la URL pública de la página que quieres analizar y ejecuta una prueba para móvil u ordenador.

1. Prueba la URL publicada con su ruta exacta.
2. Anota si es móvil u ordenador.
3. Identifica la imagen señalada y su URL.
4. Guarda dimensiones y peso junto al informe.
5. Define qué mejorar: peso, descubrimiento, estabilidad u otro aspecto.

Elige una página representativa antes de cambiar todo el sitio: un producto con galería habitual o un artículo con portada típica. La página inicial no representa automáticamente todas las plantillas.

Elige una corrección para el problema detectado

Si la imagen excede su espacio, prepara variantes adecuadas. Si falla la codificación, compara WebP mediante JPG a WebP o PNG a WebP.

Si el diseño salta al aparecer la imagen, reserva espacio. Si la imagen inicial empieza tarde, investiga cómo se descubre. La guía Core Web Vitals explica las diferencias.

Comprende los dos tipos de medición

PageSpeed Insights combina Lighthouse en laboratorio con datos de usuarios reales cuando existen. Estos abarcan los últimos 28 días y pueden abarcar todas las páginas con el mismo protocolo, nombre de host y puerto, en lugar de una sola página. Un sitio pequeño puede carecer de suficientes datos; no significa que falle la prueba. Consulta la documentación PageSpeed.

Una nueva imagen puede afectar al siguiente ensayo de laboratorio; los datos históricos no reflejan inmediatamente solo la página actualizada. Anota qué parte comparas para no confundir la mejora inmediata con la experiencia de todos los usuarios.

Comprueba si los datos reales representan esta URL o todo el origen. Un origen agrupa páginas con el mismo protocolo, nombre de host y puerto; sus datos no confirman la mejora de una página de producto concreta. Separa las comparaciones de laboratorio de esa visión general. Distingue también el ahorro estimado de bytes de una mejora medida de LCP: una imagen puede pesar menos sin aparecer antes.

Confirma que el cambio llegó a la página

Publica el archivo y actualiza la referencia si hace falta. Comprueba la petición del navegador. La exportación local no cambia nada para los visitantes. Si sigue la versión antigua, investiga caché y variantes generadas.

Repite con la misma URL y categoría de dispositivo. Si varía inesperadamente, mide de nuevo y compara el problema concreto, no solo los puntos. Evita cambiar alojamiento, scripts y todas las imágenes a la vez si quieres saber qué ayudó.

Cuándo pasar a otros problemas

Tras corregir las imágenes, revisa los cuellos de botella restantes. Respuestas lentas, scripts pesados o renderizado tardío pueden dominar. Más compresión puede empeorar las fotos sin resolver la causa.

Registra página, original, sustituto y resultado observado. Así el proceso se puede repetir y detectar retrocesos tras cambiar tema o diseño.

Ejemplo: de un aviso a una corrección

Supón que el informe móvil señala una foto de producto sobredimensionada. Guarda informe, URL de página e imagen y dimensiones visibles. Publica una copia menor con el mismo recorte en una página de prueba y confirma la petición antes de medir. Es un ejemplo de procedimiento, no una mejora de puntuación medida.

Registra fecha, dispositivo, dimensiones, peso, LCP, desplazamientos y calidad. Repite pruebas comparables y considera la variación, sin enfrentar el mejor resultado nuevo al peor antiguo. Si baja el peso pero LCP no cambia, otra fase puede dominar.

Decide si conservar el cambio

Conserva la corrección si resuelve el problema sin perjudicar detalles, texto o diseño. Si la petición sigue empezando tarde, revisa descubrimiento y carga. Si el archivo llega pero no aparece, examina renderizado y efectos de entrada. La compresión por sí sola no arregla estos retrasos.