Comenzamos en: 17d 9h 2m 45s
PLAZAS LIMITADAS

Carga diferida de Iframes de forma nativa

El Lazy loading nativo de HTML5 permite cargar iframes en la mayoría de navegadores de forma más eficiente y mejorar la velocidad y el UX

Autor: Carlos Sánchez
Temática: Multimedia, WPO
Fecha de publicación: 2022-07-26
Última revisión: 2022-08-15

Qué es el lazy-loading

El Lazy-loadind, es una técnica de optimización, para hacer que cierto contenido multimedia como las imágenes, no carguen en el navegador hasta que no aparezcan de forma visible para el usuario. Así la web puede cargar todos los recursos y todo lo de la web, respetando el tamaño de las imágenes, pero no descargándolas hasta que el usuario no llegue al punto indicado.

Al contenido visible (o viewport) desde el inicio, se le llama Above the fold, y al contenido que no se puede ver hasta que no se hace Scroll, se le llama Below the fold.

En resumidas cuentas, el lazy-loading hace que el elemento no cargue hasta que no sea visible para el usuario, por lo que tiene sentido emplearlo siempre y cuando no esté el elemento above the fold ya que se cargaría una función para retrasar un elemento que hay que mostrar de forma inmediata. Sin embargo, como se emplea de manera correcta, es en los elementos below the fold, ya que no cargarán y por tanto no consumirán recursos, hasta que el elemento se torne visible para el usuario.

De esta forma, se mejora mucho la fluidez de la navegación y da la sensación de ser una web mucho más rápida, ya que en realidad así es.

Cuando comenzó el Lazy loading, se tenía que realizar sí o sí con Javascript. Pero HTML está avanzando mucho y cada vez tiene etiquetas y atributos más interesantes que cada vez aceptan más navegadores y que ahorran mucho tiempo de desarrollo. Como puede ser la etiqueta picture, y afortunadamente, también con el atributo Lazy-loading.

El Lazy-loading solo tiene sentido para elementos que no están en el Viewport de la página, es decir que no aparecen a primera vista.

Carlos Sánchez

El Lazy-loading para las imágenes lleva tiempo utilizándose de forma nativa. No obstante, este atributo de forma nativa, también existe para los Iframes.

Recordemos que un atributo nativo en HTML que sea leído por los navegadores siempre va a ser más eficiente que utilizar librerías de javascript de terceros. Al igual que ocurre con el Summary/details para hacer un acordeón (por ejemplo para las faqs).

El Lazy-loading en Iframes

Realmente uno de los motivos por lo que no está tan extendido su uso en iframes, es por su compatibilidad:

Compatibilidad de Lazy-loading según CanIUse el 26/07/2022

Según esta representación, Safari y Firefox no aceptan el lazy-loading en Iframes. El Safari lo acepta en el menú de características experimentales (lo que quiere decir que probablemente lo acepte en un futuro) y Firefox de momento no lo hace. En Chrome y navegadores de Chromium es totalmente compatible.

Aun sabiendo esto, la realidad es que este atributo no perjudica en ningún caso si no es leído o correctamente interpretado. Por lo que si hay navegadores que si lo hacen ¿Por qué no ponerlo?

Implementar un Lazy-loading nativo en Iframes

Si las imágenes es de los contenidos Multimedia más pesados. Cuando cargamos un Iframes multiplicamos esto, ya que estamos cargando otra web dentro de nuestra propia web. Con todo su CSS, JS, imágenes e incluso vídeos.

Contenido que solo será apreciable dentro del cuadro del iframe. Por lo que no tiene sentido ninguno cargar todo este contenido hasta que el usuario no llegue hasta él.

En el caso de Youtube, tiene es un loader, que hasta que no se hace click, no carga el resto del contenido, por lo que el rendimiento de una página si se hace este método con Iframes de youtube en teoría no debería afectar en gran medida. No obstante hay una discusión al respecto por parte de un desarrollador de Google Chrome:

Anécdota: cuando cambiamos a incrustaciones de YouTube de carga diferida para Chrome.com, ahorramos 10 segundos en el tiempo en que nuestras páginas podían ser interactivas con los dispositivos móviles. Abrí un error interno con YouTube para discutir la adición de loading=lazy a su código de inserción de forma automática.

Addy Osmani en web.dev

En cualquiera de los casos, añadir el atributo no será perjudicial, por lo que merece la pena probarlo.

Atributo Loading

El atributo Loading tiene 3 valores admitidos que son: lazy, eager y auto.

El auto sería dejar el iframe con la carga por defecto, el eager sería priorizar la carga de este elemento y el lazy, realizar esa carga diferida.

El código sería así:

<iframe src=«https://example.com» width=»600″ height=»400″
loading=«lazy«
>
</iframe>

Implementar lazy-loading en iframes para navegadores que no lo leen de forma nativa

Se puede realizar por medio de Javascript. Se puede seguir el consejo de Addy Osmani y utilizar la librería lazysizes para que cargue si el navegador no consigue interpretar el atributo.

Realmente esto es una complicación extra, peor puede ocurrir que alguien quiera ofrecer esta experiencia del lazy load en todos los navegadores.

Un código de ejemplo sería así:

<iframe class=»lazyload» width=»600″ height=»400″src=«https://example.com«
loadinglazy»
</iframe>

<script>
if (‘loading’ in HTMLIFrameElement.prototype) {
const iframes = document.querySelectorAll(‘iframe[loading=»lazy»]’);

iframes.forEach(iframe => {
iframe.src = iframe.dataset.src;
});

} else {
// Importa de forma dinámica la librería
const script = document.createElement(‘script’);
script.src =’https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js’;
document.body.appendChild(script);
}</script>

Básicamente este código hace que si el navegador no es capaz de interpretar el loading lazy de forma nativa (sólo en ese caso), te cargue la librería de Javascript  lazysizes que no llega a 8KB que hace que cargue de forma diferida. Aunque yo recomendaría cargarlo desde un hosting o CDN propio para tener el control absoluto.

Iframes ocultos

Si un iframe se oculta de distintas formas como: medir menos de 4px, se pone fuera de la pantalla o se le aplica un display:none/visibility:hidden. Chrome lo considerará como oculto y no lo cargará en general de forma diferida (queda pendiente hacer la prueba con otros navegadores). Ya que en muchas ocasiones, los iframes ocultos se utilizan para otras cuestiones como analítica.

Carga diferida de iframes en WordPress de forma automática

WordPress ya hace esta implementación desde la versión 5.7 salvo para elementos que no tienen width y height asignado. En esa documentación explica de hecho como deshabilitarlo o deshabilitarlo para iframes en específico, por ejemplo, elementos que carguen directamente en el viewport.

Carga diferida de iframes en Shopify

La mayor parte de extensiones y aplicaciones en Shopify se hacen por medio de la librería lazysizes de Javascript. Cabe recalcar que el artículo se refiere en todo momento a un loading lazy nativo de HTML. Hasta el propio Shopify ha depreciado lazysizes debido a que utilizar librerías de terceros existiendo alternativas nativas en los navegadores es absurdo.

Lo recomendado en este caso es por medio de Liquid utilizar el atributo lazy load below-the-fold que utiliza image_tag pero por medio del filtro media_tag de Liquid.

¿Quieres hacer el Master de SEO Técnico?

Accede a una formación avanzada que te permitirá aplicar e implementar SEO en cualquier tipo de WEB

¡Accede al Master de SEO Técnico!
Tal vez te interesen estos artículos:

Si te ha gustado esta publicación, siempre me lo puedes agradecer dándome like en esta publicación de LinkedIn sobre este mismo artículo.