Google mide tu velocidad y la usa para rankearte
Los Core Web Vitals son las métricas con las que Google evalúa la experiencia real de tus visitantes. No son un capricho técnico: forman parte de las señales de posicionamiento y, sobre todo, se correlacionan con que la gente se quede o se vaya.
De las tres métricas, dos dependen casi por completo de las imágenes.
| Métrica | Qué mide | Objetivo | Culpable habitual |
|---|---|---|---|
| LCP | Cuándo aparece el elemento más grande de la pantalla inicial | Menos de 2.5 s | Una imagen pesada o cargada tarde |
| CLS | Cuánto se mueve el contenido mientras carga | Menos de 0.1 | Imágenes sin dimensiones declaradas |
| INP | Cuánto tarda la página en responder a un clic | Menos de 200 ms | JavaScript, no imágenes |
LCP: la imagen candidata
En la mayoría de páginas, el elemento más grande de la primera pantalla es una imagen: el banner de portada, la foto del producto, la cabecera del artículo. Esa es tu imagen candidata a LCP, y todo el trabajo consiste en que aparezca cuanto antes.
Tres reglas que resuelven casi todos los casos:
1. Nunca pongas loading="lazy" en la imagen candidata. Es el error más común y el más contraproducente: la carga diferida existe para las imágenes que están más abajo. Aplicarla a la primera imagen retrasa deliberadamente tu propia métrica.
2. Dale prioridad explícita.
<!-- La primera imagen visible: prioridad alta, sin lazy -->
<img src="portada.webp" alt="..." width="1200" height="630"
loading="eager" decoding="async" fetchpriority="high">
<!-- Todas las demás: diferidas -->
<img src="otra.webp" alt="..." width="800" height="600"
loading="lazy" decoding="async">
3. Que pese poco. Ninguna optimización de carga compensa un archivo de 3 MB. Si aún no has decidido el formato, empieza por WebP, AVIF o JPG: qué formato usar.
CLS: el salto que enfurece al usuario
Estás leyendo, carga una imagen que no tenía espacio reservado, y todo el texto salta hacia abajo. Eso es CLS, y se arregla con dos atributos:
<!-- MAL: el navegador no sabe cuánto espacio reservar -->
<img src="foto.webp" alt="...">
<!-- BIEN: reserva el espacio antes de descargar -->
<img src="foto.webp" alt="..." width="1200" height="800">
/* Y en el CSS, para que siga siendo responsive: */
img { max-width: 100%; height: auto; }
Con width y height declarados, el navegador calcula la proporción y reserva el hueco desde el primer instante. Los atributos no fijan el tamaño final —el CSS manda—, solo comunican la relación de aspecto.
No sirvas la misma imagen a todos los dispositivos
Enviar una imagen de 2000 px de ancho a un móvil de 390 px es desperdiciar unos cuantos cientos de kilobytes en cada visita. srcset deja que el navegador elija:
<img src="producto-800.webp"
srcset="producto-400.webp 400w,
producto-800.webp 800w,
producto-1600.webp 1600w"
sizes="(max-width: 768px) 100vw, 800px"
alt="Descripción real del producto"
width="800" height="600" loading="lazy" decoding="async">
sizes le dice al navegador qué ancho ocupará la imagen en el diseño; con eso y la densidad de pantalla, escoge el archivo más adecuado antes de descargar nada.
Auditoría rápida en diez minutos
- Abre tu página en una ventana de incógnito y pulsa F12.
- Ve a la pestaña Red, filtra por Img y ordena por tamaño de mayor a menor.
- Anota las cinco imágenes más pesadas. Ahí está tu problema.
- En la pestaña Rendimiento, busca cuál es el elemento LCP.
- Revisa en el código si esa imagen tiene
loading="lazy". Si lo tiene, quítalo. - Comprueba que todas tus etiquetas
<img>tenganwidthyheight. - Vuelve a medir con PageSpeed Insights y compara.
Un orden de prioridades honesto
| Acción | Esfuerzo | Impacto |
|---|---|---|
Quitar lazy de la imagen LCP | Un minuto | Alto |
Añadir width y height a todas | Una hora | Alto en CLS |
| Convertir a WebP las 10 imágenes más pesadas | Una tarde | Muy alto |
Implementar srcset | Un día | Alto en móvil |
| Añadir AVIF con respaldo | Un día | Medio |
| Rediseñar la portada entera | Semanas | Impredecible |
Las tres primeras filas resuelven, en nuestra experiencia, la mayor parte de los problemas de Core Web Vitals de un sitio corporativo típico.
Conclusión
Optimizar imágenes para Core Web Vitals no es un proyecto: son cuatro decisiones bien tomadas. Formato moderno, una sola imagen con prioridad alta, dimensiones siempre declaradas y variantes por dispositivo. Con eso, la mayoría de webs pasa de rojo a verde sin tocar el diseño.
Si necesitas generar las variantes por lotes, ChasquImage convierte y redimensiona en el navegador y permite fijar un peso objetivo por archivo.