Haz preguntas, pide ejemplos y recibe una explicación personalizada sin salir del artículo.
Lazy Loading o carga diferida es una técnica que retrasa la descarga de determinados recursos de una página web hasta que están próximos a ser necesarios.
Se utiliza principalmente con imágenes, iframes, videos y algunos contenidos que aparecen fuera de la parte inicialmente visible de una página.
La idea es sencilla. Si una página contiene veinte imágenes pero al abrirla el usuario solamente puede ver las tres primeras, no siempre tiene sentido descargar inmediatamente las otras diecisiete. La carga diferida permite esperar hasta que el usuario se aproxime a ellas.
Bien implementado, Lazy Loading puede reducir solicitudes y transferencia de datos durante la carga inicial. Mal aplicado, puede retrasar contenido importante y perjudicar la experiencia.
Qué es Lazy Loading
Lazy Loading significa cargar un recurso únicamente cuando comienza a ser necesario en lugar de solicitarlo inmediatamente al abrir la página.
En español suele traducirse como carga diferida o carga perezosa, aunque carga diferida resulta generalmente más clara.
Puede aplicarse a diferentes elementos como
- imágenes;
- iframes;
- videos;
- mapas embebidos;
- contenido externo;
- determinados componentes de aplicaciones web.
No significa que el recurso desaparezca o deje de cargarse.
Simplemente se pospone su descarga hasta un momento más oportuno.
Cómo funciona Lazy Loading
Imaginemos una página extensa con varias fotografías.
Cuando el usuario entra, el navegador necesita los recursos que aparecen en la primera pantalla.
Las imágenes ubicadas mucho más abajo pueden esperar.
A medida que la persona hace scroll y se aproxima a esas imágenes, el navegador inicia su descarga para que estén disponibles cuando entren en la zona visible.
El proceso puede entenderse así
- El usuario solicita la página.
- El navegador carga el contenido inicial.
- Los recursos configurados con carga diferida permanecen pendientes.
- El usuario avanza por la página.
- Cuando un recurso se aproxima a la zona visible, comienza su descarga.
- El navegador lo muestra cuando corresponde.
Los navegadores actuales pueden gestionar directamente la carga diferida de imágenes e iframes mediante HTML.
Qué significa loading lazy
En HTML puede utilizarse el atributo loading para indicar cómo debe cargarse una imagen o iframe compatible.
Un ejemplo básico es
<img
src="fotografia.jpg"
alt="Descripción de la fotografía"
width="800"
height="600"
loading="lazy">El valor lazy indica al navegador que puede retrasar la carga de esa imagen hasta que resulte pertinente según su posición.
No es necesario utilizar JavaScript para todos los casos sencillos de imágenes e iframes.
Qué diferencia hay entre lazy y eager
El atributo loading puede utilizar valores diferentes.
loading lazy
Permite retrasar la carga del recurso.
<img src="galeria-4.jpg" loading="lazy" alt="...">loading eager
Indica que el recurso debe cargarse con el comportamiento normal sin esperar a que se aproxime al viewport.
<img src="hero.jpg" loading="eager" alt="...">También puede omitirse el atributo cuando se quiere conservar el comportamiento predeterminado del navegador.
Cuándo conviene utilizar Lazy Loading
Resulta especialmente útil para recursos que aparecen fuera de la pantalla inicial.
Por ejemplo
- imágenes de una galería extensa;
- fotografías situadas al final de un artículo;
- productos que aparecen después de varias filas;
- mapas incrustados cerca del final de una página;
- videos embebidos que no se muestran inicialmente;
- iframes situados fuera del primer viewport.
El criterio principal debería ser si el usuario necesita ese recurso durante la visualización inicial.
Cuándo no conviene utilizar Lazy Loading
No todos los recursos deberían cargarse de forma diferida.
Aplicarlo indiscriminadamente puede terminar empeorando el rendimiento que se intentaba mejorar.
Conviene tener especial cuidado con
- imágenes hero;
- logos visibles inmediatamente;
- fotografías principales de producto;
- contenido situado en la primera pantalla;
- imágenes que probablemente sean el elemento LCP;
- recursos fundamentales para comprender la página.
Estos elementos suelen necesitar estar disponibles cuanto antes.
Lazy Loading y la imagen LCP
Uno de los errores técnicos más habituales consiste en aplicar loading="lazy" a la imagen principal de la página.
Si esa imagen termina siendo el elemento utilizado para medir Largest Contentful Paint, retrasar su solicitud puede hacer que tarde más en aparecer.
Por ejemplo, no sería buena idea utilizar automáticamente
<img
src="hero-servicio.jpg"
loading="lazy"
alt="...">cuando esa fotografía domina la primera pantalla.
En este caso puede ser preferible permitir su carga inmediata.
Lazy Loading mejora el LCP
No necesariamente.
Puede ayudar indirectamente a reducir trabajo y transferencia asociados con recursos que todavía no se necesitan.
Pero si se aplica al propio elemento LCP puede producir el efecto contrario y retrasarlo.
Por eso no debería utilizarse Lazy Loading como una optimización automática para todas las imágenes.
Lazy Loading y Core Web Vitals
Las Core Web Vitals actuales se centran en tres métricas principales
- LCP para rendimiento de carga;
- INP para capacidad de respuesta e interacción;
- CLS para estabilidad visual.
Lazy Loading puede relacionarse con estas métricas, pero no significa que activarlo las mejore automáticamente.
La implementación tiene que analizarse dentro del comportamiento completo de la página.
Lazy Loading y CLS
Cuando una imagen tarda en aparecer y el navegador no conoce previamente el espacio que ocupará, otros elementos pueden desplazarse.
Por eso conviene proporcionar dimensiones o una relación de aspecto para que el navegador pueda reservar el espacio necesario antes de cargar la imagen.
Por ejemplo
<img
src="producto.jpg"
width="800"
height="600"
loading="lazy"
alt="Producto">Los atributos width y height permiten que el navegador calcule la proporción de la imagen y reduzca desplazamientos inesperados.
FID ya no es una Core Web Vital
Es importante actualizar este concepto porque todavía aparece en muchas guías antiguas.
First Input Delay o FID fue sustituida por Interaction to Next Paint o INP como métrica de Core Web Vitals.
Por tanto, actualmente cuando analizamos las tres métricas principales debemos hablar de LCP, INP y CLS.
Lazy Loading mejora el SEO
No directamente.
Lazy Loading es principalmente una técnica de rendimiento y gestión de recursos.
Una implementación adecuada puede contribuir a una mejor experiencia y evitar cargar recursos innecesarios, pero no existe una regla según la cual añadir loading="lazy" produzca mejores posiciones en Google.
Además, una mala implementación puede dificultar que contenido importante quede correctamente disponible para rastreo y renderizado.
Lazy Loading puede afectar la indexación
Sí, especialmente cuando se utiliza JavaScript para cargar contenido importante de manera incorrecta.
El contenido relevante debería poder cargarse cuando se encuentra dentro del viewport sin depender exclusivamente de acciones como un clic o interacción manual del usuario.
Por ejemplo, no conviene diseñar una implementación donde una imagen solamente aparezca después de que la persona pulse un botón si esa imagen forma parte del contenido que queremos que pueda descubrirse normalmente.
Lazy Loading no debería depender únicamente del scroll
Cuando se utiliza una implementación personalizada mediante JavaScript hay que evitar depender de eventos que requieran una acción específica del usuario para mostrar contenido relevante.
Una opción habitual es utilizar Intersection Observer, que permite detectar cuándo un elemento se aproxima o entra en determinada zona del viewport.
Esto puede resultar útil cuando la carga nativa del navegador no cubre las necesidades del proyecto.
Qué es Intersection Observer
Intersection Observer es una API del navegador que permite observar cuándo un elemento entra o sale de una zona determinada de la pantalla.
Puede utilizarse para tareas como
- cargar componentes;
- activar imágenes;
- controlar determinados contenidos;
- ejecutar funciones cuando un elemento se aproxima al viewport.
Para imágenes e iframes sencillos, el atributo nativo loading="lazy" puede evitar la necesidad de desarrollar una solución personalizada.
Lazy Loading de imágenes
Las imágenes son uno de los usos más habituales de esta técnica.
Puede resultar especialmente útil en páginas que contienen muchas fotografías fuera de la pantalla inicial.
Por ejemplo, en una galería
<img src="foto-1.jpg" alt="..." width="800" height="600">
<img src="foto-2.jpg" alt="..." width="800" height="600">
<img src="foto-3.jpg" loading="lazy" alt="..." width="800" height="600">
<img src="foto-4.jpg" loading="lazy" alt="..." width="800" height="600">Las imágenes visibles inicialmente podrían cargarse de manera normal, mientras las restantes se difieren.
Lazy Loading de iframes
También puede utilizarse loading="lazy" en iframes compatibles.
Por ejemplo
<iframe
src="contenido.html"
loading="lazy"
width="600"
height="400">
</iframe>Esto puede ser útil para elementos externos que aparecen bastante abajo en la página.
Lazy Loading de videos
Los videos pueden requerir una estrategia diferente.
Una técnica frecuente consiste en evitar descargar de inmediato recursos pesados cuando el video todavía no va a reproducirse.
En embeds externos también puede mostrarse inicialmente una imagen de portada y cargar el reproductor completo cuando realmente sea necesario.
La implementación depende de la plataforma utilizada y del comportamiento esperado.
Lazy Loading en mapas
Los mapas incrustados pueden añadir recursos externos importantes a una página.
Si un mapa se encuentra cerca del final de una página de contacto extensa, puede evaluarse cargarlo únicamente cuando el usuario se aproxime a esa sección.
Pero si el mapa es el contenido principal que el usuario necesita al entrar, retrasarlo puede perjudicar la experiencia.
Lazy Loading en ecommerce
Las tiendas online suelen contener muchas fotografías de productos.
La carga diferida puede resultar útil especialmente en
- categorías con muchos productos;
- galerías extensas;
- productos relacionados;
- recomendaciones situadas al final;
- contenido multimedia fuera de la primera pantalla.
Sin embargo, la imagen principal de un producto visible inmediatamente no debería diferirse automáticamente.
Tampoco puede afirmarse que Lazy Loading aumente por sí solo las conversiones de una tienda.
Lazy Loading en WordPress
WordPress incorpora soporte nativo para carga diferida de imágenes desde hace varias versiones.
También ha incorporado carga diferida para iframes y posteriormente ha refinado su lógica para evitar aplicar Lazy Loading de forma indiscriminada a elementos importantes situados al principio de la página.
Esto significa que en muchas instalaciones modernas no es necesario añadir un plugin únicamente para insertar loading="lazy" en cada imagen.
Antes de instalar una solución adicional conviene comprobar qué está haciendo ya el tema, WordPress y cualquier plugin de rendimiento existente.
Necesito un plugin de Lazy Loading en WordPress
No necesariamente.
En una instalación moderna puede existir ya soporte nativo y otros plugins pueden estar modificando el comportamiento de carga de imágenes.
Instalar varias herramientas que intentan realizar la misma optimización puede producir configuraciones redundantes o difíciles de diagnosticar.
Antes de utilizar un plugin conviene revisar
- el HTML generado;
- qué imágenes tienen
loading="lazy"; - qué elementos se encuentran en el primer viewport;
- qué imagen corresponde al LCP;
- si el tema modifica atributos de carga;
- si ya existe un plugin de caché o rendimiento.
Cómo comprobar si WordPress usa Lazy Loading
Una forma sencilla es inspeccionar el código HTML generado en el navegador.
Busca imágenes con una estructura similar a
<img
src="imagen.jpg"
loading="lazy"
width="800"
height="500"
alt="...">No todas las imágenes deberían tener necesariamente este atributo.
Que una imagen principal no tenga loading="lazy" puede ser completamente intencional.
Lazy Loading y fetchpriority
loading y fetchpriority resuelven problemas diferentes.
loading="lazy" permite retrasar determinados recursos.
fetchpriority="high" puede utilizarse en casos concretos para indicar que una imagen importante debería recibir mayor prioridad de descarga.
Por ejemplo, una imagen principal podría utilizar
<img
src="hero.jpg"
width="1200"
height="700"
fetchpriority="high"
alt="...">No tendría sentido utilizar indiscriminadamente alta prioridad para todas las imágenes.
Lazy Loading y JavaScript no son lo mismo
Lazy Loading es una estrategia de carga.
JavaScript es solamente una de las maneras mediante las cuales puede implementarse.
Para imágenes e iframes existe soporte nativo en navegadores modernos.
JavaScript sigue siendo útil cuando se necesita un comportamiento más complejo o cargar otros tipos de contenido dinámico.
Lazy Loading de CSS
Hablar de Lazy Loading de CSS puede resultar confuso porque normalmente las técnicas utilizadas para estilos no críticos reciben otros nombres o enfoques.
Por ejemplo, puede trabajarse con CSS crítico, división de archivos o carga condicionada.
No es exactamente el mismo mecanismo que utilizar loading="lazy" en una imagen.
Lazy Loading de JavaScript
En JavaScript existen técnicas como code splitting y carga dinámica que permiten descargar código únicamente cuando una sección o funcionalidad lo requiere.
Conceptualmente existe una relación con la idea de carga bajo demanda, pero la implementación es diferente al lazy loading nativo de imágenes.
Por eso conviene evitar agrupar imágenes, CSS y JavaScript como si todos utilizaran el mismo mecanismo.
Lazy Loading y carga tradicional
| Carga inmediata | Lazy Loading |
|---|---|
| El recurso se solicita desde el inicio | El recurso puede esperar hasta ser necesario |
| Adecuada para contenido visible inicialmente | Adecuada para muchos recursos fuera del viewport |
| Puede consumir recursos aunque el usuario no llegue hasta ellos | Puede evitar algunas descargas innecesarias |
| No introduce espera adicional por carga diferida | Puede retrasar un elemento si se aplica incorrectamente |
No se trata de elegir una opción para toda la página.
Una implementación adecuada suele combinar ambas según la importancia y posición de cada recurso.
Errores frecuentes al implementar Lazy Loading
Aplicarlo a la imagen hero
Puede retrasar uno de los recursos más importantes de la primera pantalla.
Aplicarlo a todas las imágenes
La ubicación y prioridad de cada imagen deben considerarse.
No definir dimensiones
Puede facilitar desplazamientos de contenido mientras llegan las imágenes.
Instalar varios plugins que realizan la misma tarea
Puede crear comportamientos redundantes y complicar el diagnóstico.
Cargar contenido importante solamente después de una interacción
Puede dificultar el acceso al contenido para usuarios y rastreadores.
Asumir que mejora automáticamente Core Web Vitals
Hay que medir el resultado real.
Usar Lazy Loading para solucionar imágenes demasiado pesadas
La carga diferida no reemplaza la necesidad de utilizar dimensiones y formatos adecuados.
Cómo probar una implementación de Lazy Loading
Después de aplicar cambios conviene comprobar su comportamiento real.
Puede revisarse
- qué recursos se solicitan al abrir la página;
- cuándo comienzan a descargarse las imágenes inferiores;
- cuál es el elemento LCP;
- si aparecen saltos visuales;
- si las imágenes se cargan antes de entrar en pantalla;
- si el contenido importante aparece correctamente;
- si Google puede acceder al contenido renderizado.
Herramientas como DevTools, PageSpeed Insights y Search Console pueden aportar información diferente sobre estos puntos.
Cómo comprobar Lazy Loading para SEO
Cuando existe contenido generado o cargado mediante JavaScript, puede utilizarse la inspección de URLs de Search Console para revisar la versión renderizada.
Lo importante es confirmar que el contenido relevante está disponible para Google cuando corresponde y que la implementación no depende de acciones que Google Search no realiza.
La carga diferida debería reducir trabajo innecesario, no ocultar información importante.
Lazy Loading funciona mejor cuando se aplica de forma selectiva
El objetivo no es añadir loading="lazy" a todos los recursos de una página.
Se trata de distinguir entre aquello que el usuario necesita inmediatamente y aquello que puede esperar.
Las imágenes y elementos visibles al abrir una página suelen necesitar prioridad.
Los recursos situados bastante más abajo pueden ser buenos candidatos para carga diferida.
Medir después de implementar es tan importante como realizar el cambio, porque una optimización que funciona bien en una página puede comportarse de manera diferente en otra.
¿Quieres mejorar el SEO y la publicidad de tu web?
En Margetc te ayudamos a atraer más clientes con estrategias de SEO, pauta digital, contenido optimizado y mejoras reales para tu sitio web.
Solicitar asesoríaPreguntas frecuentes sobre Lazy Loading
Qué es Lazy Loading
Es una técnica que retrasa la carga de determinados recursos hasta que están próximos a ser necesarios.
Para qué sirve Lazy Loading
Puede reducir la cantidad de recursos que deben descargarse durante la carga inicial, especialmente cuando existen imágenes o iframes fuera del viewport.
Cómo se aplica Lazy Loading a una imagen
En HTML puede utilizarse loading="lazy" en imágenes que no necesitan cargarse inmediatamente.
Debo usar loading lazy en todas las imágenes
No. Las imágenes visibles inicialmente y especialmente las que pueden corresponder al LCP suelen necesitar cargarse sin retrasos.
Lazy Loading mejora el SEO
No directamente. Es una técnica de rendimiento. Su impacto depende de la implementación y no garantiza mejores posiciones.
Lazy Loading mejora LCP
No siempre. Aplicarlo a una imagen situada fuera del viewport puede ayudar a reducir trabajo inicial, pero aplicarlo al propio elemento LCP puede retrasarlo.
WordPress tiene Lazy Loading
Sí. WordPress incluye soporte nativo para carga diferida de imágenes y también para determinados iframes.
Necesito un plugin de Lazy Loading en WordPress
No necesariamente. Conviene comprobar primero el comportamiento nativo de WordPress, el tema y los plugins de rendimiento ya instalados.
Lazy Loading puede afectar la indexación
Una implementación incorrecta puede impedir que determinados contenidos estén disponibles para Google. El contenido importante debe poder cargarse correctamente cuando corresponda.
Cuáles son las Core Web Vitals actuales
Las métricas principales actuales son Largest Contentful Paint, Interaction to Next Paint y Cumulative Layout Shift.
