No todas las imágenes de una página necesitan cargarse a la vez. La carga diferida de imágenes (lazy loading) retrasa la descarga de las imágenes que aún no son visibles en la ventana del visitante, de modo que el navegador se centra en el contenido que el visitante puede ver en lugar de cargar toda la página de golpe. En las páginas con muchas imágenes, este cambio por sí solo puede reducir de forma notable el tiempo de carga inicial y mejorar las métricas que importan tanto para la experiencia del visitante como para el posicionamiento. Este artículo explica qué es la carga diferida, cómo funciona técnicamente, qué se debe y qué no se debe cargar de forma diferida y cómo afecta a las puntuaciones de Core Web Vitals.
Cuando un navegador carga una página sin carga diferida, descarga todas las imágenes de la página, estén ya visibles o no. Un visitante que abre una página y se va enseguida provoca igualmente la descarga de todas las imágenes que quedan por debajo del pliegue. Es un desperdicio de ancho de banda, y ralentiza la carga de todo lo que está por encima del pliegue y que el visitante sí ve. La carga diferida cambia esto para que solo se descargue el contenido que está a la vista. Para ver cómo encaja esto en el panorama más amplio de la velocidad de carga de una página, consulta el artículo sobre cómo reducir el tiempo de carga de tu web.
¿Qué es la carga diferida?
La carga diferida es una técnica que aplaza la carga de recursos no críticos hasta que hacen falta. En el caso de las imágenes, significa que una imagen no se descarga hasta que el visitante se desplaza cerca de ella. En lugar de que el navegador pida todas las imágenes al cargar la página, solo pide las que están visibles o a punto de serlo mientras el visitante interactúa con la página.
Qué cambia la carga diferida en la secuencia de carga
- Sin carga diferida: el navegador pide todas las imágenes cuando la página carga por primera vez, estén o no en la ventana visible
- Con carga diferida: el navegador solo pide las imágenes que están en la ventana visible o cerca de ella. El resto se piden a medida que el visitante se desplaza hacia ellas
- La cantidad total de datos transferidos a lo largo de un recorrido completo por la página es la misma, pero la carga inicial es bastante más ligera
- Los visitantes que no pasan de cierto punto de una página nunca provocan la descarga de las imágenes a las que no llegan
¿Cómo funciona técnicamente la carga diferida?
Hay dos formas de implementar la carga diferida de imágenes: el atributo nativo del navegador y las soluciones basadas en JavaScript.
Carga diferida nativa
- Todos los navegadores principales admiten la carga diferida nativa mediante el atributo
loading="lazy"añadido directamente a la etiqueta de la imagen - No hacen falta JavaScript ni bibliotecas externas. El navegador gestiona el comportamiento de carga por sí mismo
- Es ya el enfoque estándar para la carga diferida de imágenes en la web y requiere pocos conocimientos técnicos para implementarlo
- El navegador decide cuándo empezar a cargar una imagen según su distancia a la ventana visible, un umbral que varía ligeramente entre navegadores
Carga diferida basada en JavaScript
- Antes de que la carga diferida nativa fuera muy compatible, los desarrolladores usaban bibliotecas de JavaScript que vigilaban la posición de desplazamiento y activaban la carga de imágenes cuando estas entraban en la ventana visible
- La API Intersection Observer es el enfoque estándar en JavaScript, y detecta cuándo un elemento entra o sale de la ventana visible sin depender de detectores de eventos de desplazamiento
- La carga diferida basada en JavaScript se sigue usando en escenarios más complejos, como la carga diferida de imágenes de fondo definidas en CSS o de contenido de vídeo
- Para los elementos de imagen estándar, la carga diferida nativa con
loading="lazy"es más simple y más fiable
¿Qué más se puede cargar de forma diferida además de imágenes?
Iframes
- El atributo
loading="lazy"también funciona en iframes en todos los navegadores principales - Los mapas incrustados, los formularios y el contenido de terceros en iframes se pueden aplazar hasta que el visitante se desplaza hasta ellos
- Es especialmente útil en páginas con mapas incrustados o widgets de terceros cerca del final de la página, ya que suelen implicar scripts externos pesados
Vídeo
- Los archivos de vídeo son bastante más grandes que las imágenes y pueden tener un gran impacto en el tiempo de carga inicial cuando están por debajo del pliegue
- La carga diferida de vídeo requiere un enfoque con JavaScript, ya que el atributo nativo
loadingno se aplica a los elementos de vídeo - Un enfoque habitual es cargar al principio solo una miniatura o imagen de portada y empezar a cargar el archivo de vídeo solo cuando el visitante interactúa con él o se desplaza hasta él
Componentes y secciones
- En las aplicaciones con mucho JavaScript, se pueden cargar de forma diferida secciones o componentes enteros de la página, es decir, su código y su contenido no se piden hasta que el visitante llega a esa parte de la página
- Es una técnica avanzada que se usa en aplicaciones web complejas y que suele gestionar el marco de desarrollo en lugar de implementarse a mano
¿Qué no se debe cargar de forma diferida?
La carga diferida mejora el rendimiento cuando se aplica bien, pero aplicarla donde no toca causa problemas en lugar de resolverlos.
Imágenes por encima del pliegue
- La imagen principal, el logotipo o cualquier contenido visual destacado visible cuando la página se abre por primera vez debe cargar de inmediato
- Aplicar la carga diferida a imágenes por encima del pliegue retrasa el LCP, lo que empeora las puntuaciones de Core Web Vitals y la experiencia del visitante
- La regla es sencilla: todo lo que se ve sin desplazarse debe cargar de inmediato. Todo lo que queda por debajo del pliegue se puede cargar de forma diferida
Imágenes cercanas al pliegue
- Las imágenes justo debajo de la zona visible pueden aparecer enseguida cuando el visitante empieza a desplazarse. Si la carga diferida se aplica con demasiada agresividad, estas imágenes pueden seguir cargando cuando el visitante llega a ellas, y se ve brevemente un marcador de posición en blanco
- La carga diferida nativa lo resuelve usando un umbral: empieza a cargar las imágenes antes de que estén del todo en la ventana visible, en lugar de esperar al último momento
Contenido crítico en páginas de carga rápida
- En las páginas con muy poco contenido y solo unas pocas imágenes, la secuencia de carga ya es rápida. La carga diferida añade complejidad sin un beneficio significativo en estos casos
- La carga diferida es más valiosa en páginas con muchas imágenes o con contenido largo por el que desplazarse
¿Cómo afecta la carga diferida a los Core Web Vitals?
La carga diferida tiene un efecto directo en dos métricas de los Core Web Vitals y ninguno en la tercera cuando se aplica correctamente.
Largest Contentful Paint (LCP)
- La carga diferida nunca debe aplicarse al elemento que probablemente sea el candidato a LCP, normalmente la imagen principal
- Bien aplicada, la carga diferida reduce el número de recursos que compiten por el ancho de banda durante la carga inicial, lo que puede mejorar el LCP al permitir que el contenido por encima del pliegue cargue más rápido
- Aplicada de forma incorrecta a imágenes por encima del pliegue, la carga diferida empeora directamente el LCP al retrasar el elemento visible más grande
Interaction to Next Paint (INP)
- Reducir el número de imágenes cargadas al principio supone menos actividad de red compitiendo con la ejecución de JavaScript durante la ventana crítica de carga
- Esto puede reducir de forma indirecta el bloqueo del hilo principal y mejorar las puntuaciones de INP en páginas que antes cargaban muchas imágenes a la vez
Cumulative Layout Shift (CLS)
- La carga diferida no afecta directamente al CLS, pero las imágenes con carga diferida y sin atributos de ancho y alto definidos pueden causar desplazamientos del diseño al cargar
- Define siempre dimensiones explícitas en las imágenes con carga diferida para que el navegador reserve el espacio correcto antes de que cargue la imagen
Para ver el desglose completo de cómo se puntúan LCP, INP y CLS y cuáles son los umbrales, consulta el artículo sobre qué son los Core Web Vitals.
¿Afecta la carga diferida al SEO?
Bien implementada, la carga diferida no perjudica al SEO y puede contribuir a un mejor rendimiento en buscadores gracias a mejores puntuaciones de velocidad de página.
Cómo tratan los buscadores el contenido con carga diferida
- Los rastreadores de los buscadores muestran las páginas de forma parecida a los navegadores y pueden indexar contenido que se carga de forma diferida
- Las imágenes con carga diferida siguen siendo rastreables y pueden aparecer en los resultados de búsqueda de imágenes
- El beneficio SEO viene sobre todo de las mejoras de velocidad que permite la carga diferida. Las páginas con mejores puntuaciones de Core Web Vitals, que la carga diferida puede ayudar a mejorar, tienen ventaja de posicionamiento
El texto alternativo sigue siendo necesario
- Las imágenes con carga diferida necesitan el mismo texto alternativo que cualquier otra imagen. El atributo alt debe rellenarse con una descripción de la imagen, se cargue o no de forma diferida
- Para ver consejos sobre cómo escribir un buen texto alternativo, consulta el artículo sobre cómo usar imágenes en tu web
¿Cómo añades la carga diferida a tu web?
Para imágenes individuales en HTML
- Añade
loading="lazy"a cualquier etiqueta de imagen que esté por debajo del pliegue - Asegúrate de que cada imagen con carga diferida tiene atributos
widthyheightexplícitos para evitar desplazamientos del diseño al cargar las imágenes - No añadas
loading="lazy"a la imagen principal ni a ninguna imagen visible sin desplazarse
A través de la plataforma de tu web
- Muchos creadores de webs aplican la carga diferida automáticamente a las imágenes por debajo del pliegue, sin necesidad de implementación manual
- Consulta la documentación de rendimiento de tu plataforma para confirmar si esto se gestiona automáticamente antes de añadirlo a mano
Para ver una guía completa sobre la optimización de imágenes más allá de la carga diferida, con formatos de archivo, compresión y tamaños adaptables, consulta el artículo sobre cómo optimizar las imágenes para que carguen más rápido.
Cómo gestiona WEMASY la carga diferida
El creador de webs de WEMASY aplica automáticamente la carga diferida a las imágenes por debajo del pliegue en todas las páginas. Las imágenes por encima del pliegue, incluidas las imágenes principales y cualquier contenido visible sin desplazarse, quedan excluidas de la carga diferida para que se muestren de inmediato. Las imágenes también se sirven con dimensiones definidas por defecto, lo que evita desplazamientos del diseño cuando las imágenes con carga diferida se cargan en su posición.
La carga diferida funciona junto con la compresión de imágenes y la entrega por CDN en todos los planes de WEMASY. Estas tres mejoras juntas reducen tanto el peso inicial de la página como el tiempo de entrega de las imágenes, lo que contribuye directamente a un LCP más rápido y a mejores puntuaciones de Core Web Vitals en el panel de analítica.
Mira qué incluye en el creador de webs de WEMASY, o consulta las opciones de plan en la página de precios.
Preguntas frecuentes
¿Qué es la carga diferida?
La carga diferida es una técnica que retrasa la descarga de imágenes y otros recursos hasta que el visitante está cerca de verlos. En lugar de cargar todas las imágenes de una página cuando se abre por primera vez, el navegador solo carga las imágenes que están visibles o cerca de la ventana visible. Las imágenes más abajo se cargan a medida que el visitante se desplaza hacia ellas. Esto reduce la cantidad inicial de datos descargados y permite que el contenido visible cargue más rápido. Con el creador de webs de WEMASY puedes configurarlo directamente en tu web.
¿Perjudica la carga diferida al SEO?
No. Bien implementada, la carga diferida no perjudica al SEO. Los rastreadores de los buscadores pueden indexar las imágenes y el contenido con carga diferida. El impacto en el SEO suele ser positivo porque la carga diferida mejora las métricas de velocidad de página, que los buscadores usan como señales de posicionamiento. El requisito clave es que la carga diferida no se aplique al contenido por encima del pliegue, lo que retrasaría el Largest Contentful Paint y afectaría negativamente a las puntuaciones de Core Web Vitals.
¿Deben cargarse de forma diferida todas las imágenes de una página?
No. Las imágenes que son visibles cuando la página se abre por primera vez, por encima del pliegue, deben cargar de inmediato. Aplicar la carga diferida a estas imágenes retrasa la puntuación de Largest Contentful Paint, lo que empeora los Core Web Vitals y la experiencia del visitante. Solo las imágenes por debajo del pliegue se benefician de la carga diferida. En la práctica, esto suele significar que la imagen principal y cualquier contenido destacado de la parte superior de la página nunca deben llevar el atributo de carga diferida.
¿Cómo añado la carga diferida a las imágenes?
En los elementos de imagen estándar, añade el atributo loading="lazy" directamente a la etiqueta de la imagen. Todos los navegadores principales lo admiten de forma nativa sin necesidad de ninguna biblioteca de JavaScript. Asegúrate de que cada imagen con carga diferida tenga también atributos de ancho y alto explícitos, para que el navegador reserve el espacio correcto antes de que cargue la imagen y evite desplazamientos del diseño. No añadas la carga diferida a la imagen principal ni a ninguna imagen visible sin desplazarse.
¿Funciona la carga diferida en el móvil?
Sí. La carga diferida nativa con el atributo loading="lazy" la admiten todos los navegadores móviles principales. Es especialmente beneficiosa en el móvil porque las conexiones móviles son más lentas y variables que las de ordenador, lo que hace más importante la reducción del peso inicial de la página. Los visitantes móviles que no recorren la página entera también se benefician de no descargar las imágenes a las que no llegan.
¿Cuál es la diferencia entre la carga diferida y la precarga?
La carga diferida retrasa la descarga de recursos hasta que hacen falta. La precarga hace lo contrario: indica al navegador que descargue un recurso concreto lo antes posible, antes de que lo encuentre normalmente en la secuencia de carga. La precarga se usa para recursos críticos como la imagen principal o las fuentes clave, para asegurar que cargan lo más rápido posible. Las dos técnicas se complementan: precarga los recursos críticos por encima del pliegue y carga de forma diferida todo lo que queda por debajo.