Carga diferida

La carga diferida es una técnica web que retrasa la carga de los recursos que están fuera de la pantalla hasta que están a punto de entrar en la ventana gráfica. Se usa en imágenes, iframes, videos y secciones completas de una página.

Los navegadores la admiten de forma nativa mediante el atributo loading de los elementos img e iframe, con el valor lazy, definido en el HTML Living Standard. Los sitios también la implementan en JavaScript, normalmente con la API IntersectionObserver, que informa cuándo un elemento se acerca al área visible.

Hasta que se carga un recurso, la página muestra un marcador de posición: un recuadro vacío, un color sólido, una vista previa borrosa o un indicador de carga. La carga diferida reduce el peso inicial de la página y acelera la primera vista.

Cómo funciona la carga diferida

1. La página se carga con marcadores de posición para las imágenes que están fuera de la pantalla.
2. El navegador o un script observa la posición de cada marcador.
3. Cuando el usuario se desplaza cerca de él, se solicita el archivo real.
4. La imagen sustituye al marcador cuando llega.

El desplazamiento infinito usa la misma idea para el contenido: se piden nuevos elementos cuando el usuario llega al final de la lista.

Carga diferida y capturas de pantalla

Una captura de página completa que renderiza toda la página de una vez no se desplaza, así que el contenido diferido que queda por debajo del pliegue puede no llegar a solicitarse nunca. El resultado muestra recuadros vacíos o vistas previas borrosas. Una captura de ventana gráfica se ve menos afectada, porque solo muestra lo que está visible.

Detectar contenido con carga diferida

• Busca recuadros vacíos o grises en la parte inferior de una captura de página completa.
• Desplázate a mano por la página y observa las imágenes que aparecen con un fundido.
• Inspecciona los elementos de imagen en las DevTools del navegador para ver el atributo loading o las fuentes de los marcadores.
• Compara una captura rápida con otra tomada tras una demora.

En Website Capture de Temposhot, elige Network idle como ajuste de Wait o añade una demora de 0 a 60 segundos. La extensión Temposhot Full Page Screenshot desplaza la página activa durante la captura, lo que activa la carga basada en el desplazamiento.

Errores comunes

• Capturar en el evento load y suponer que la página está completa.
• Definir una demora larga sin desplazarse, lo que no ayuda con las imágenes activadas por el desplazamiento.
• Capturar páginas de desplazamiento infinito como "página completa", algo que nunca termina de forma limpia.
• Ignorar las imágenes borrosas de marcador que parecen cargadas en tamaños pequeños.

¿Tomas las mismas capturas una y otra vez?

Define la condición de espera una vez y reutilízala para cada URL en la automatización de capturas de sitios web.

Preguntas frecuentes

¿Una demora más larga soluciona las imágenes con carga diferida?

Ayuda cuando el contenido se carga con un temporizador o tras actividad de red. El contenido activado por el desplazamiento necesita desplazamiento.

¿Debo evitar la carga diferida en mi propio sitio?

No. Mejora la velocidad. Mantén las imágenes de la parte superior sin carga diferida para que se carguen de inmediato.

Fuentes

• Lazy loading (Wikipedia)
• HTML Living Standard: URLs and fetching

Recursos relacionados

• Opciones de Website Capture: ajustes de espera y demora.
• Captura de página completa: capturar toda la altura de la página.