Imagina que tu página tiene 20 imágenes, pero un visitante solo ve al principio las 2 primeras. ¿Por qué tendría el navegador que descargar las 20 a la vez? Ese es exactamente el problema que resuelve el lazy loading (carga diferida).
¿Qué pasa sin lazy loading?
El navegador descarga todas las imágenes en cuanto se carga la página. También las fotos de abajo del todo, que quizá el visitante no vea nunca. Resultado:
- Una carga inicial lenta (el visitante espera a que todo se haya cargado)
- Datos móviles desperdiciados (imágenes que nadie ve)
- Una mala puntuación en PageSpeed
¿Para qué sirve el lazy loading?
Con el lazy loading, el navegador solo carga las imágenes visibles (o a punto de serlo). En cuanto el visitante hace scroll hacia abajo, las siguientes imágenes se cargan «justo a tiempo».
Ventajas:
- Una carga inicial más rápida, porque se descarga menos
- Menos consumo de datos para los visitantes desde el móvil
- Mejores puntuaciones de PageSpeed y LCP
- Si un visitante deja de leer a mitad de página: todavía menos datos desperdiciados
Cuándo NO usar el lazy loading
Importante: NUNCA apliques carga diferida a la imagen principal de la parte superior de la página. Tiene que cargarse de inmediato, porque suele ser tu elemento LCP (Largest Contentful Paint, es decir, el elemento visible más grande al cargar). Si la cargas en diferido, tu puntuación LCP empeora en lugar de mejorar.
Regla sencilla: las 1 o 2 primeras imágenes en «eager» (inmediato), todas las demás en «lazy».
¿Cómo se activa el lazy loading?
Desde 2020 existe un atributo HTML nativo: loading="lazy". Tu diseñador web lo añade a la etiqueta de la imagen:
<img src="foto.jpg" alt="..." loading="lazy">
En WordPress: desde la versión 5.5 (2020), el lazy loading viene activado por defecto. Las imágenes nuevas reciben automáticamente el atributo loading="lazy". Para webs anteriores a 2020 puedes usar un plugin como a3 Lazy Load o WP Rocket.
¿Cómo comprobar que está activo?
Haz clic derecho en una imagen de tu página (que no sea la principal), elige «Inspeccionar» y mira en el código si la etiqueta img contiene loading="lazy". Si es así: perfecto. Si no: ponte en contacto con tu diseñador web.