Una buena pregunta para hacernos es por qué deberíamos de cargar un iframe de forma asíncrona dentro de nuestras páginas. El beneficio principal es que utilizar una carga diferida de los iframe nos permite evitar la descarga de un contenido a no ser que sea estrictamente necesario.
Los iframe los utilizamos para cargar contenido de otras páginas, dónde los casos más generales son cargar un vídeo, información de redes sociales,… es decir, contenido incrustado. Si nuestro usuario no llega a esa zona de visualización del iframe podremos diferir e incluso evitar su carga. De esta forma podemos llegar a evitar la descarga de mucha información y contenido en el navegador de nuestros usuarios. Algo a tener muy en cuenta con las aplicaciones móviles.
Hasta que llegó el estándar HTML5 teníamos que hacer uso del lenguaje Javascript para poder conseguir este efecto. Si bien desde HTML5 disponemos de un atributo que nos ayuda a realizar esta carga en diferido, este es el atributo loading, cuya sintaxis es la siguiente:
<iframe src="iframe.html" loading="valor"></iframe>
Los valores que puede tener el atributo loading son:
- eager, este valor indica que el
iframese debe de cargar inmediatamente, independientemente de que el iframe este en el foco del navegador o no. - lazy, mediante este otro valor se podrá diferir la carga del iframe hasta que este esté a a una distancia cercana de entrar en el foco del navegador.
Es por ello que si queremos cargar un iframe de forma asíncrona dentro de nuestras páginas deberemos de utilizar el atributo loading y su valor “lazy”. De esta forma el código quedaría de la siguiente forma:
<iframe loading="lazy" src="<https://lineadecodigo.com>"></iframe>
En este caso hemos cargado de forma asíncrona la página de Línea de Código. Ahora ya solo te queda dar el paso para optimizar tus páginas web mediante el uso d este atributo loading.
