Este artículo ha sido actualizado, para ver el artículo actual visita Haciendo un lazy load de imagenes con IntersectionObserver
¿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:
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="images/imagen1.jpg" alt="Imagen" width="350" height="224">
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.