¡Hola, hola querido lector! Ya estoy de nuevo por aquí una semana más para hablarte del lazy loading o carga diferida, una de las optimizaciones más sencillas para que tu página web cargue más rápido.
Eso sí, mal aplicado puede empeorar tus Core Web Vitals en lugar de mejorarlas. Y es un error que veo muy a menudo en las páginas web que reviso.
En este post te explico qué es el lazy loading, cómo funciona el atributo loading="lazy", qué hace WordPress por defecto, cómo configurarlo con plugins y, sobre todo, cuándo no debes aplicarlo. ¡Vamos con ello!
Resumen rápido
- El lazy loading o carga diferida retrasa la carga de imágenes, vídeos e iframes hasta que el usuario está a punto de verlos.
- Hoy se aplica de forma nativa con el atributo
loading="lazy", compatible con los navegadores modernos. - WordPress ya añade lazy loading automáticamente a imágenes e iframes, y evita aplicarlo en las primeras imágenes de la página.
- Nunca apliques lazy loading a la imagen principal visible al cargar (LCP): empeora tus Core Web Vitals.
¿Qué es el lazy loading o carga diferida?
El lazy loading o carga diferida es una técnica de optimización web (WPO) que retrasa la carga de los recursos que no se ven al entrar en una página, como imágenes, vídeos o iframes, hasta que el usuario hace scroll y está a punto de verlos.
Si una página cargara todas sus imágenes nada más entrar, incluidas las que están al final, descargaría muchos datos que quizá el usuario nunca llegue a ver. Con la carga diferida, el navegador prioriza lo que aparece en pantalla (above the fold) y deja el resto para después.
¿Qué elementos se pueden cargar de forma diferida?
- Imágenes del contenido, galerías y miniaturas.
- Iframes: vídeos de YouTube, mapas de Google Maps o formularios incrustados.
- Vídeos alojados en tu página web.
- Imágenes de fondo definidas en CSS (requiere soluciones específicas).
Diseño tu página web en WordPress rápida y optimizada para SEO. Tu web pensada para convertir visitas en clientes
- Diseño web 100% personalizado. Nada de IA. 100% artesanal.
- Web rápida y lista para posicionar en Google.
- Diseño tu web en menos de 21 días. Firmado por contrato.
- Comunicación directa conmigo. Sin intermediarios.
¿Cómo funciona el lazy loading nativo?
Hoy no necesitas JavaScript para aplicar lazy loading: basta con añadir el atributo loading="lazy" a imágenes e iframes. Los navegadores modernos lo interpretan y cargan el recurso cuando se acerca a la zona visible.
<img src="imagen.jpg" alt="Descripción" width="800" height="600" loading="lazy"> <iframe src="https://www.youtube.com/embed/ID" title="Vídeo" loading="lazy"></iframe>Incluye siempre width y height en las imágenes. Así el navegador reserva su espacio antes de cargarlas y evitas saltos de contenido (CLS).
Diferencia entre lazy loading y eager loading
Eager loading significa carga inmediata: el recurso se descarga en cuanto el navegador lo encuentra, sin esperar a que el usuario haga scroll. Es el comportamiento por defecto de las imágenes y se indica con loading="eager".
| Técnica | Qué hace | Cuándo utilizarla |
|---|---|---|
loading="lazy" | Carga el recurso cuando se acerca a la pantalla | Imágenes e iframes por debajo del primer pantallazo |
loading="eager" | Carga el recurso inmediatamente | Imágenes visibles al entrar, como el logo o la imagen principal |
fetchpriority="high" | Da prioridad alta a la descarga | La imagen principal (LCP) de la página |
<link rel="preload"> | Anticipa la descarga de un recurso crítico | Imágenes LCP de fondo o fuentes importantes |
En una buena optimización ambas técnicas conviven: carga inmediata y prioritaria para lo visible, carga diferida para todo lo demás. Es una de las claves para optimizar WordPress.
Diseño tu página web en WordPress rápida y optimizada para SEO. Tu web pensada para convertir visitas en clientes
- Diseño web 100% personalizado. Nada de IA. 100% artesanal.
- Web rápida y lista para posicionar en Google.
- Diseño tu web en menos de 21 días. Firmado por contrato.
- Comunicación directa conmigo. Sin intermediarios.
Beneficios del lazy loading
- Carga inicial más rápida, porque el navegador descarga menos recursos al principio.
- Menor consumo de datos para el usuario, algo muy importante en móvil.
- Menos transferencia desde tu servidor cuando los usuarios no llegan al final de la página.
- Mejor experiencia de usuario, lo que ayuda a reducir el porcentaje de rebote y mejorar la conversión.
¿Cómo afecta el lazy loading al SEO?
El lazy loading bien aplicado ayuda al SEO porque mejora la velocidad de carga y la experiencia de usuario. Mal aplicado, puede perjudicarlo por dos motivos:
- Empeora el LCP si se aplica a la imagen principal visible al cargar, una de las Core Web Vitals.
- Google puede no ver el contenido si el lazy loading depende de acciones del usuario, como hacer scroll o clic, para cargar imágenes o texto.
La buena noticia es que Googlebot es compatible con el lazy loading nativo (loading="lazy") y con las implementaciones basadas en IntersectionObserver. Si utilizas estas soluciones estándar y no escondes contenido detrás de interacciones, no tendrás problemas de renderizado.
Diseño tu página web en WordPress rápida y optimizada para SEO. Tu web pensada para convertir visitas en clientes
- Diseño web 100% personalizado. Nada de IA. 100% artesanal.
- Web rápida y lista para posicionar en Google.
- Diseño tu web en menos de 21 días. Firmado por contrato.
- Comunicación directa conmigo. Sin intermediarios.
Lazy loading en WordPress: qué hace por defecto
WordPress añade loading="lazy" automáticamente a las imágenes desde la versión 5.5 y a los iframes desde la 5.7. Además, las versiones recientes evitan aplicarlo en las primeras imágenes de la página y añaden fetchpriority="high" a la imagen que probablemente sea el LCP.
Por lo tanto, en muchas páginas web WordPress ya tienes lazy loading sin hacer nada. Aun así, conviene revisarlo, porque algunos themes, maquetadores o plugins generan las imágenes de forma que WordPress no puede controlarlas, como las imágenes de fondo o las de sliders.
Cómo configurar el lazy loading en WordPress con plugins
Un plugin de optimización te permite ampliar el lazy loading nativo a imágenes de fondo, vídeos o iframes externos, y excluir fácilmente las imágenes que no deben diferirse.
Lazy loading con WP Rocket
En WP Rocket solo tienes que ir a la pestaña Medios y activar LazyLoad para imágenes, iframes y vídeos. Puedes activar también la opción de sustituir los vídeos de YouTube por una imagen de vista previa, que ahorra mucho peso.
Lazy loading con otros plugins
La mayoría de plugins de optimización incluyen carga diferida:
- Perfmatters: lazy loading de imágenes, iframes e imágenes de fondo, con exclusión de las primeras imágenes.
- Speed Optimizer de SiteGround: si tu hosting es SiteGround, incluye la opción de carga diferida.
- Autoptimize y W3 Total Cache: también ofrecen carga diferida de imágenes.
- Elementor: tiene opciones de rendimiento para diferir la carga de imágenes de fondo.
No actives el lazy loading en varios plugins a la vez. Elige uno y desactiva la opción en los demás para evitar conflictos.
¿Y BJ Lazy Load?
Hace unos años BJ Lazy Load era una opción muy utilizada. Hoy no te lo recomiendo: el lazy loading nativo de WordPress y los plugins de optimización actuales hacen lo mismo de forma más eficiente y mantenida.
¿Cuándo no debes aplicar lazy loading?
No debes aplicar lazy loading a los elementos visibles al cargar la página (above the fold), porque retrasas justo lo que el usuario necesita ver primero y empeoras el LCP.
Excluye de la carga diferida:
- La imagen principal o hero de la página.
- El logotipo de la cabecera.
- La imagen destacada de los posts si aparece arriba.
- Las primeras imágenes de sliders o carruseles visibles al entrar.
- Las imágenes de fondo de la primera sección.
En WP Rocket puedes excluir imágenes por nombre de archivo, clase CSS o dominio, o indicar que no se difieran las primeras imágenes de la página.
PD. Si PageSpeed Insights te muestra el aviso «La imagen de Largest Contentful Paint se ha cargado de forma diferida», tienes exactamente este problema. Excluye esa imagen del lazy loading y añádele
fetchpriority="high".
Cómo comprobar si el lazy loading funciona
- Analiza la página en PageSpeed Insights y revisa los avisos relacionados con el LCP y las imágenes fuera de pantalla.
- Abre las herramientas de desarrollador de Chrome (F12), ve a la pestaña Red, filtra por imágenes y recarga la página. Las imágenes inferiores deberían aparecer al hacer scroll.
- Inspecciona el código de la imagen principal y comprueba que no tenga
loading="lazy".
Conclusiones sobre el lazy loading
El lazy loading es una optimización imprescindible para que tu página web cargue rápido, sobre todo si tienes muchas imágenes o vídeos incrustados.
Mi recomendación: aprovecha el lazy loading nativo de WordPress, amplíalo con un único plugin de optimización y excluye siempre las imágenes visibles al cargar. Complétalo con imágenes bien optimizadas y notarás la diferencia.
Si quieres que revise la velocidad de tu página web y configure todo esto sin romper nada, en mi servicio de mantenimiento web WordPress me encargo del rendimiento de tu página web.
Ahora te toca a ti, querido lector. ¿Tienes activado el lazy loading? ¿Has revisado si afecta a tu LCP?
¡Te leo en los comentarios!
Preguntas frecuentes sobre el lazy loading
¿Qué es el lazy loading?
El lazy loading o carga diferida es una técnica que retrasa la carga de imágenes, vídeos e iframes hasta que el usuario está a punto de verlos al hacer scroll, lo que acelera la carga inicial de la página.
¿Qué significa loading=»lazy»?
Es un atributo HTML que se añade a imágenes e iframes para indicar al navegador que cargue ese recurso solo cuando se acerque a la zona visible de la pantalla. Es la forma nativa de aplicar lazy loading sin JavaScript.
¿WordPress tiene lazy loading por defecto?
Sí. WordPress añade loading=»lazy» automáticamente a las imágenes desde la versión 5.5 y a los iframes desde la 5.7, y las versiones recientes evitan aplicarlo en las primeras imágenes de la página.
¿El lazy loading es bueno para el SEO?
Sí, siempre que se aplique bien. Mejora la velocidad y la experiencia de usuario, pero si se aplica a la imagen principal visible empeora el LCP, y si depende de interacciones del usuario Google podría no ver el contenido.
¿Qué diferencia hay entre lazy loading y eager loading?
El lazy loading retrasa la carga de un recurso hasta que se acerca a la pantalla, mientras que el eager loading lo carga inmediatamente. El eager loading es el comportamiento por defecto y el adecuado para las imágenes visibles al entrar.
¿Qué imágenes no deben tener lazy loading?
Las visibles al cargar la página: la imagen principal o hero, el logotipo, la imagen destacada si aparece arriba y las primeras imágenes de sliders. Aplicarles lazy loading retrasa el LCP.
¿Qué plugin utilizar para el lazy loading en WordPress?
WP Rocket y Perfmatters son dos de las opciones más completas. Si tu hosting es SiteGround, su plugin Speed Optimizer también lo incluye. Lo importante es activarlo en un único plugin para evitar conflictos.
