Descubre el nuevo atributo HTML Lazy Loading nativo para tus imágenes

La carga diferida es un muy utilizada en sitios web que presentan muchas imágenes en una sola página como por ejemplo un magazine o un sitio de fotografías. La solución hasta hace unos días para evitar la carga lenta de este tipo de webs era simplemente disminuir el tamaño de la imagen, perdiendo el mínimo posible de la calidad y si trabajas con wordpress depender de un plugin o con blogger depender de algún script para la carga diferida y ganar puntuación en el PageSpeed Insights de Google.

Hoy todo esto lo podemos hacer de forma nativa con HTML gracias al nuevo atributo para las imágenes “lazy loading” que también es aplicable para vídeos. En simples palabras google define esto como una técnica que aplaza la carga de recursos no esenciales en el tiempo de carga de la página. 

Estos recursos no esenciales se cargan en el momento en que son necesarios. En lo que se refiere a las imágenes, “no esencial” generalmente es sinónimo de “fuera de pantalla”, es decir, en palabras de simples mortales nos permiten que las imágenes y vídeos se carguen cuando los veamos en una página.

¿Cómo implementar el atributo class Lazy Loading en las imágenes, videos y iframes?

El atributo que se debe agregar al código HTML de cada elemento es loading="lazy". A continuación te presento un ejemplo y su resultado.

Imágenes

<img loading="lazy" src="image.png" alt="…" width="200" height="200"/>

Resultado:

Vídeos

<video loading="lazy" src="url.mp4" width="400" height="400"></video>

Resultado:

Iframe

<iframe loading="lazy" width="100%" height="315" src="https://www.youtube.com/embed/I-1oJnmr6nk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Resultado:

Por ahora el atributo solo funciona en algunos navegadores como Google Chrome, Firefox y en Android, pronto los demás navegadores se podrán las pilas y en alguna actualización lo agregaran. El atributo esta genial para mejorar la carga de sus webs. Utilícenlo :D.