Haciendo un defer de las imágenes

Te habrás topado a la hora de optimizar un sitio web que servicios como Lighthouse te sugiere hacer un defer de las imágenes que no son visibles recién se entra en un sitio web, es decir, las imágenes que están más abajo de la primer área visible en el sitio, pues aquí te mostraré una forma muy sencilla de arreglar esto.




¿Que necesitamos?
1- Poder poner como imagen una que sea base64, es decir, que el src sea algo tipo: data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs= en lugar de la ruta de la imagen, ¿esto para que? para cargar una mini imagen transparente y después, con javascript sustituirla por la imagen real.
2- Poder poner un atributo tipo data, por ejemplo data-src, donde pondremos la url real de la imagen.
3- Javascript, para hacer el cambio de la ruta.



Paso 1
La etiqueta (o todas ellas) de la imagen deberá quedar algo asi:
Donde el valor del atributo data-src deberá ser el de la url de la imagen real, así como el alt y los tamaños. Esto hará 2 cosas principalmente, cargará una imagen muy ligera y asignará el tamaño final de la imagen al espacio donde se coloque la etiqueta.


Paso 2
Agregar el Javascript, el cual queda como el siguiente:

function init() {
	var imgDefer = document.getElementsByTagName('img');
	for (var i = 0; i < imgDefer.length; i++) {
		if (imgDefer[i].getAttribute('data-src')) {
			imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
		}
	}
}
window.onload = init;​

Este pequeño fragmento de código hará que, una vez que la página ha terminado de ser cargada entonces sustituir las imágenes reales, ayudando a no ralentizar la página, dandole prioridad a la carga del DOM.

Esto solo es uno de los muchos pasos que se requieren para optimizar una página para una carga acelerada, cosa a lo que Google está poniendo mucha atención.

Si te sirvió este articulo por favor compártelo, si hay algo a mejorarle o comentarios por favor házmelos saber.