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
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.
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).
Realmente uno de los motivos por lo que no está tan extendido su uso en iframes, es por su compatibilidad:
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?
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.
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>
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"
loading="lazy"
</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.
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.
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.
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.
Te falta mi máster. Accede a una formación avanzada que te permitirá aplicar e implementar SEO en cualquier tipo de WEB
¡Accede al Máster de SEO Técnico!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.
