Por qué las imágenes ralentizan tu web
En un sitio de contenido típico, las imágenes suman más bytes que los scripts, las hojas de estilo, las fuentes y el marcado juntos. Eso las convierte en el trabajo de rendimiento menos vistoso y más eficaz que tienes disponible.
La cuenta que nadie hace
Abre tu propio sitio en un móvil, con una conexión mediocre, y cuenta los segundos hasta que aparece la imagen principal. Ese número es lo que experimentan tus visitantes, y casi nunca es el que ves en tu portátil con el wifi de la oficina.
Una sola fotografía sin optimizar recién salida de un móvil pesa habitualmente entre 4 y 6 MB. Con una conexión móvil de 5 Mbps eso son unos ocho segundos para una imagen. Pon cuatro en una página y tendrás una página que nadie espera.
Esa misma fotografía, redimensionada al ancho al que realmente se muestra y comprimida con sensatez, ocupa entre 150 y 250 KB. La misma imagen, visualmente idéntica en pantalla, con una veinteava parte del peso.
Por qué le importa a Google
Largest Contentful Paint mide cuánto tarda en terminar de renderizarse el elemento visible más grande. En la mayoría de páginas ese elemento es una imagen: una cabecera, una foto de producto, la imagen de un artículo.
LCP forma parte de las Core Web Vitals, y estas influyen en el posicionamiento. Y algo crucial: Google lo mide sobre visitantes reales mediante el Chrome User Experience Report, no en laboratorio. Tu portátil rápido no cuenta. Cuenta la mediana de quienes visitaron de verdad.
El umbral de Google para un buen LCP son 2,5 segundos. Una cabecera de 4 MB no llegará ahí en móvil, hagas lo que hagas con el resto.
Las tres soluciones, por orden de impacto
1. Redimensiona a lo que se muestra. Es la mayor ganancia individual y la que más se omite. Si tu columna de contenido mide 800 píxeles, servir una imagen de 4000 significa que el navegador descarta el 96 % de los datos después de descargarlos. El número de píxeles escala con el área: reducir el ancho a la mitad deja la cuarta parte del archivo.
2. Usa un formato moderno. WebP es un 25–35 % más pequeño que JPEG con la misma calidad visual y lo admiten todos los navegadores actuales. Esto es prácticamente gratis.
3. Comprime con sensatez. Una calidad en torno a 75 es invisible en visualización normal y muchísimo más ligera que el 95 al que apuntan la mayoría de preajustes de exportación.
Haz las tres y 4 MB pasan a unos 120 KB. Haz solo la tercera y se quedan en 1,5 MB, que sigue siendo demasiado.
Los errores que echan por tierra el trabajo
- Cargar la cabecera en diferido.
loading="lazy"va en todo lo que está por debajo del pliegue y en ningún caso en tu elemento LCP. Ponerlo ahí empeora activamente la métrica. - Omitir width y height. Sin ellos el navegador no puede reservar espacio y el contenido salta al llegar las imágenes. Eso es Cumulative Layout Shift, y también es señal de posicionamiento.
- Dejar que el CMS regenere desde el original. Muchas plataformas construyen sus propias versiones a partir de lo que subes. Sube el archivo optimizado como origen, no el original de cámara.
- No poner cabeceras de caché. Una imagen perfectamente optimizada que se vuelve a descargar en cada visita sigue siendo ancho de banda desperdiciado.