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

Dile adiós a los plugins que ralentizan tu web al utilizar librerías para la carga diferida de tus imágenes, vídeos e iframes con el nuevo atributo HTML LAZY LOADING que llega de forma nativa a los navegadores.

atributo html lazy loading para 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

Código: Lo que se agrega esta en rojo
<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

Para este ejemplo voy a utilizar un iframe de un video en Youtube.
<iframe loading="lazy" width="100%" height="315" src="https://www.youtube.com/embed/0FTnZcY2jmU" 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.

Comentarios

Estas cordialmente invitado a compartir tu ideas y comentarios.