¿Qué es la carga diferida (lazy loading)?

La carga diferida (lazy loading) pospone la carga de una parte de una página, como una imagen o un iframe insertado, hasta que realmente se desplaza cerca de la zona visible. Para una inserción de YouTube, eso significa que el script del reproductor y la vista previa de la miniatura no se cargan en el instante en que se abre la página, sino solo cuando el visitante está a punto de verla.

Por qué importa en las inserciones

Un iframe de YouTube es relativamente pesado de cargar. Una página con varias inserciones (una entrada de blog que reseña cinco videos, por ejemplo) puede sentirse notablemente más lenta si todas se cargan de inmediato, por lo que la carga diferida es una recomendación habitual para los Core Web Vitals y la velocidad general de la página.

Cómo activarla

Los navegadores modernos admiten el atributo nativo loading=”lazy” directamente en un <iframe>, sin script adicional. El generador de código de inserción incluye este atributo por defecto.

Cómo funciona la carga diferida nativa por debajo

Cuando un navegador encuentra un elemento con loading=”lazy”, no crea un marcador de posición para esperar indefinidamente; en su lugar, calcula un umbral de distancia aproximado desde la zona visible actual y solo inicia la solicitud de red real cuando el elemento se aproxima a ese umbral, normalmente unos cientos hasta mil píxeles antes de que se haría visible, dependiendo del navegador y las condiciones de la red. Esto significa que una inserción con carga diferida igualmente se carga a tiempo para ser visible cuando un visitante llega desplazándose hasta ella, sin pagar el coste de carga de inserciones muy por debajo del pliegue a las que un visitante quizá nunca se desplace.

Un ejemplo práctico

Un artículo largo que reseña diez productos, cada uno con un video de demostración insertado, se beneficia enormemente de la carga diferida: sin ella, los diez reproductores solicitarían sus scripts y miniaturas simultáneamente al cargar la página; con loading="lazy" añadido a cada iframe, solo se cargan de inmediato el uno o dos videos cercanos a la parte superior, y el resto se carga progresivamente a medida que el visitante se desplaza hacia abajo.

Carga diferida frente a clic para cargar

La carga diferida y el clic para cargar resuelven un problema similar con compensaciones distintas. La carga diferida termina cargando automáticamente cada inserción en cuanto un visitante se desplaza cerca de ella, lo cual es sencillo de implementar (un único atributo HTML) pero no ahorra recursos en las inserciones por las que un visitante realmente se desplaza y las ve. El clic para cargar va más allá, sin cargar nunca el iframe real hasta que el visitante hace clic explícitamente en un marcador de posición, lo que exige más trabajo de implementación pero garantiza cero solicitudes para videos que nunca llegaron a reproducirse. Para la mayoría de sitios, la carga diferida nativa, ya usada por defecto en nuestro generador de código de inserción, ofrece el mejor equilibrio entre simplicidad y beneficio de rendimiento.

Como regla general, aplica la carga diferida a toda inserción salvo la que esté garantizada ya visible en el instante en que carga la página, como un video principal en la parte más alta.

El soporte de los navegadores para la carga diferida nativa es ya lo bastante amplio en Chrome, Firefox, Safari y Edge modernos como para que rara vez sea necesaria una biblioteca de carga diferida basada en JavaScript específicamente para iframes, aunque los enfoques más antiguos basados en bibliotecas siguen usándose en muchos sitios existentes construidos antes de que llegara el soporte nativo.

Preguntas frecuentes