Un alto porcentaje de usuarios abandonan las páginas web si estas no han cargado en los primeros segundos. Cargar una imagen en diferido con HTML5 permitirá que el usuario reciba el texto antes que las imágenes y por lo tanto tenga una rápida respuesta de la página web y no abandone nuestro sitio.
Vamos a ver que es muy sencillo cargar una imagen en diferido con HTML5. Lo primero que tienes que saber es cómo se carga una imagen mediante el lenguaje de etiquetas HTML5. Para ello vamos a utilizar el elemento img. Este elemento img tiene un atributo src que nos permite indicar dónde se encuentra el fichero que contiene la imagen.
<img src="imagen.png" alt="Imagen Carga Síncrona" />
Cuando el navegador se encuentre con este elemento img va a solicitar la imagen a la URI en la que se encuentre y va a empezar a renderizar la página cuando la imagen se haya descargado. Es por ello que el resto de la página no se va a renderizar. Si tenemos muchas imágenes en la página, más tardará esta en rederizarse, por consiguiente más tiempo tardará el usuario en poder ver el contenido y se aumentarán las posibilidades de que este abandone.
Para poder evitar esta situación e indicar al navegador que renderize la imagen a posteriori lo que se solía hacer a principios de la definición del lenguaje HTML era definir el tamaño de la imagen mediante los atributos width y height. Con esto se conseguía (y se consigue) que el navegador sepa el tamaño que tiene que dejar para la imagen en el renderizado y por lo tanto optimiza ese proceso y la carga.
<img src="imagen.png" alt="Imagen Carga Síncrona" width="100" height="200" />
Si bien, desde la versión HTML5 contamos con un nuevo atributo llamado loading. El atributo loading puede tener dos valores. Por un lado «lazy» y por otro «eager». En el caso de que utilicemos el valor de «lazy» estaremos indicando al navegador que no hace falta cargar la imagen de forma síncrona, mientras que si utilizamos el valor de «eager» estaremos indicando al navegador que tiene que cargar la imagen en ese mismo momento.
Es por ello que si queremos cargar una imagen en diferido con HTML5 deberemos de utilizar el valor de «lazy».
<img src="imagen.png" loading="lazy" alt="Imagen Carga Asíncrona" width="100" height="200" />
Hay que ver bien cuáles de las imágenes que tenemos en nuestra página se pueden cargar de forma asíncrona, seguro que son unas cuantas, pero seguro que utilizando este pequeño truco optimizareis la carga del contenido de vuestras páginas web.
