El lazy loading (carga diferida) es una técnica que retrasa la carga de recursos no críticos hasta que realmente son necesarios. En lugar de descargar todas las imágenes, iframes y vídeos de una página en el momento en que se analiza el HTML, el navegador espera hasta que esos elementos están a punto de aparecer en la zona visible. Esto significa que la carga inicial de la página es más rápida y ligera, porque el navegador concentra su ancho de banda en lo que el visitante ve primero.
Cómo funciona el Lazy Loading por dentro
Hay dos enfoques principales para implementar el lazy loading. El primero es el enfoque nativo del navegador, que se basa en el atributo HTML loading="lazy". Cuando el navegador encuentra un elemento con este atributo, retrasa la obtención del recurso hasta que el elemento alcanza una distancia calculada respecto a la zona visible. Cada navegador determina este umbral de forma ligeramente distinta, pero el objetivo es el mismo: iniciar la descarga justo antes de que el usuario llegue a él, para que el contenido aparezca sin saltos.
El segundo enfoque utiliza JavaScript, normalmente a través de la API Intersection Observer. Un pequeño script vigila la página y detecta cuándo los elementos marcadores de posición entran en la zona visible. Cuando lo hacen, el script intercambia la fuente real de la imagen o la URL del iframe, activando la descarga. Antes de que existiera la API Intersection Observer, los desarrolladores recurrían a listeners del evento scroll, que eran menos eficientes y podían provocar tirones en dispositivos lentos.
Qué se puede cargar de forma diferida
El lazy loading se aplica a varios tipos de recursos:
- Imágenes: el caso de uso más habitual. Cada etiqueta
<img>que esté por debajo del pliegue es una buena candidata para el lazy loading. - Iframes: los vídeos de YouTube incrustados, Google Maps y otros widgets de terceros pueden ser pesados. Cargar de forma diferida los iframes evita que bloqueen el renderizado inicial de la página.
- Vídeos: los vídeos autoalojados con la etiqueta
<video>pueden usarpreload="none"o lazy loading basado en JavaScript para aplazar la descarga. - Imágenes de fondo: las imágenes de fondo CSS cargadas mediante
background-imageno pueden usar el atributo nativoloading, por lo que requieren soluciones JavaScript o una estructura CSS cuidadosa.
Lazy Loading nativo del navegador frente a librerías JavaScript
El lazy loading nativo es la opción más sencilla. Añades loading="lazy" a tu etiqueta <img> o <iframe> y el navegador se encarga de todo. Sin JavaScript, sin tamaño de archivo extra, sin configuración. Funciona en todos los navegadores modernos, incluidos Chrome, Firefox, Safari y Edge.
<img src="photo.jpg" loading="lazy" width="800" height="600" alt="Descripción" />
<iframe src="https://www.youtube.com/embed/xyz" loading="lazy"></iframe>Las librerías JavaScript como lazysizes, lozad.js o vanilla-lazyload ofrecen más control. Admiten imágenes de fondo, pueden añadir animaciones de aparición y te permiten personalizar el umbral de carga. Sin embargo, añaden JavaScript extra a tu página y requieren una inicialización adecuada. Para la mayoría de los sitios WordPress, el lazy loading nativo es la mejor opción por su simplicidad y por no añadir sobrecarga de rendimiento.
WordPress y el Lazy Loading nativo desde la versión 5.5
WordPress añade automáticamente loading="lazy" a las imágenes desde la versión 5.5, publicada en agosto de 2020. Esto se aplica a las imágenes en el contenido de las entradas, las imágenes destacadas y otras imágenes generadas por funciones del núcleo. WordPress también añade loading="lazy" a los iframes incrustados en el contenido. Desde WordPress 5.9, la primera imagen del contenido (la que con más probabilidad está sobre el pliegue) se excluye automáticamente del lazy loading para no perjudicar las puntuaciones de LCP.
Impacto en los Core Web Vitals y consideraciones sobre LCP
El lazy loading tiene una relación directa con los Core Web Vitals, especialmente con Largest Contentful Paint (LCP). Bien aplicado, el lazy loading mejora el LCP porque el navegador puede priorizar la descarga del elemento visible más grande sin competir por el ancho de banda con imágenes situadas por debajo del pliegue. Sin embargo, si por error cargas de forma diferida el propio elemento LCP (a menudo la imagen hero o un banner grande sobre el pliegue), empeorarás el LCP. El navegador esperará para obtener esa imagen hasta calcular la proximidad a la zona visible, añadiendo un retraso innecesario.
Para imágenes que no están en lazy loading pero son críticas, considera añadir fetchpriority="high" para indicar al navegador que priorice esa descarga:
<img src="hero.jpg" fetchpriority="high" width="1200" height="600" alt="Banner principal" />Cuándo NO usar Lazy Loading
No todas las imágenes deberían cargarse de forma diferida. Hay excepciones claras:
- Imágenes hero: el banner principal o la imagen destacada que aparece nada más cargar la página nunca debe estar en lazy loading.
- Logo e imágenes de identidad del sitio: suelen estar en la cabecera y son visibles sin desplazarse.
- Primera imagen visible del contenido: cualquier imagen que aparezca dentro de la zona visible inicial debe cargarse de forma inmediata.
- Candidatas a LCP: si una imagen es el elemento visible más grande cuando la página se renderiza por primera vez, cargarla de forma diferida perjudicará directamente tu puntuación de LCP.
Para estas imágenes, usa loading="eager" (el comportamiento por defecto) o añade explícitamente fetchpriority="high" para que el navegador las descargue lo más rápido posible.
Plugins de WordPress para Lazy Loading
Aunque WordPress gestiona el lazy loading básico de forma nativa, varios plugins ofrecen funcionalidades ampliadas:
- WP Rocket: incluye lazy loading para imágenes, iframes y vídeos como parte de su suite más amplia de optimización del rendimiento. También puede sustituir los vídeos incrustados de YouTube por una miniatura ligera que carga el reproductor real solo al hacer clic.
- Autoptimize: principalmente un plugin de optimización de CSS/JS, pero incluye lazy loading para imágenes mediante el atributo nativo o una alternativa JavaScript.
- a3 Lazy Load: un plugin específico de lazy loading con control granular sobre qué elementos se cargan de forma diferida, incluido el soporte para imágenes de fondo y selectores personalizados.
- Perfmatters: un plugin ligero de rendimiento que incluye lazy loading junto con otras optimizaciones como la gestión de scripts y la limpieza de la base de datos.
Lazy Loading y SEO
El rastreador de Google (Googlebot) ejecuta JavaScript, así que puede ver imágenes con lazy loading siempre que se carguen durante el renderizado. Sin embargo, depender del lazy loading basado en JavaScript significa que Googlebot necesita ejecutar tus scripts para descubrir esas imágenes. El lazy loading nativo con loading="lazy" es más seguro para el SEO porque el atributo src real está presente en el HTML desde el principio. Los buscadores pueden encontrar la URL de la imagen sin ejecutar JavaScript. Asegúrate siempre de que tus imágenes tienen atributos alt adecuados, sea cual sea el método de lazy loading que elijas.
Qué comprueba InspectWP
InspectWP analiza las imágenes de tu página e informa de si el atributo loading="lazy" está presente en cada imagen. Esto te ayuda a verificar que el lazy loading está correctamente implementado en tu sitio WordPress y a identificar imágenes a las que pueda faltarles el atributo o que estén mal cargadas de forma diferida cuando deberían cargarse de inmediato.