Glossaire · SEO

Lazy loading

El lazy loading (o carga diferida) es una técnica de optimización web que consiste en posponer la carga de los recursos no críticos de una página — imágenes, vídeos, iframes — hasta el momento en que el usuario realmente los necesita, normalmente cuando entran en la zona visible de la pantalla. En lugar de descargar todos los archivos multimedia al abrir la página, el navegador carga primero solo el contenido visible por encima de la línea de flotación y, a continuación, carga el resto a medida que el usuario se desplaza. Este enfoque reduce el peso inicial de la página, acelera la renderización y mejora los Core Web Vitals, en particular el LCP. En SEO, un lazy loading bien implementado favorece una mejor experiencia de usuario y un rastreo más eficiente por parte de Googlebot, siempre que los recursos críticos nunca se difieran y que el contenido diferido siga siendo accesible para el motor de renderizado.

El lazy loading es hoy una práctica estándar de la optimización del rendimiento web. Responde a un problema sencillo: la mayoría de las páginas cargan decenas de imágenes y medios que el usuario nunca verá si no se desplaza. Cargar todo ese peso al abrir la página desperdicia ancho de banda y retrasa la visualización del contenido realmente útil.

Cómo funciona

El navegador identifica los recursos marcados como diferidos y solo activa su descarga cuando se acercan a la zona visible (el viewport). En HTML moderno, basta con añadir el atributo loading="lazy" a una etiqueta <img> o <iframe>. El navegador calcula entonces una distancia de precarga y recupera la imagen justo antes de que aparezca en pantalla, garantizando una transición fluida.

Antes de la llegada de este atributo nativo, el lazy loading dependía de JavaScript y de la API IntersectionObserver. Ese enfoque sigue siendo útil para casos avanzados (fondos CSS, componentes complejos), pero el atributo nativo es ahora la solución recomendada por su simplicidad y su compatibilidad con Googlebot.

Por qué es importante para el SEO

El impacto directo se mide en los Core Web Vitals. Al reducir el número de solicitudes en la carga inicial, el lazy loading mejora el tiempo de renderizado y alivia el LCP. Estas señales de rendimiento forman parte de los criterios de experiencia de página que utiliza Google.

A retenir

Nunca difiera la imagen principal del hero ni los elementos por encima de la línea de flotación: sería penalizar el LCP en lugar de mejorarlo.

Los errores que debe evitar

Una mala implementación puede perjudicar la indexación. Si las imágenes se cargan exclusivamente mediante un JavaScript que Googlebot no ejecuta, corren el riesgo de no indexarse nunca en Google Imágenes. Por ello, siempre debe proporcionar un atributo src válido y probar la renderización. Del mismo modo, diferir demasiado contenido de texto o los elementos visibles de inmediato degrada la experiencia percibida. El lazy loading es una herramienta de precisión, que debe aplicarse únicamente a los recursos fuera de pantalla.

FAQ

Questions fréquentes

Bien implementado, es beneficioso: aligera la página y mejora los Core Web Vitals. Mal configurado, puede impedir que Googlebot indexe las imágenes o ralentizar la renderización del contenido principal. La regla de oro: nunca difiera los recursos visibles por encima de la línea de flotación.

El atributo HTML nativo loading="lazy" basta en la mayoría de los casos. Es compatible con todos los navegadores modernos y comprendido por Googlebot, sin depender de JavaScript. Para los medios fuera de pantalla únicamente, es el método más fiable y sencillo.

Pour aller plus loin