Optimizar tiempo de carga web con imágenes lazy

Partimos de una página que “pesa” 23mb (sí, tiene imágenes grandes muy bonitas) y las carga todas normalmente. El resultado es que tarda más de 1 minuto en poder navegar

Si utilizamos el plugin de jquery jQuery.Lazy, y configuramos las imagenes como lazy:

Cargando por defecto una imagen pequeña de carga, que ayuda a saber que la imagen se está procesando

Y por otro lado cambiamos el css para en lugar de poner la imagen de fondo directamente

Por codigo javacript que cambia la propiedad

Tenemos como resultado

Lo que mejora la carga de la web en mas del 75%

El resultado se puede ver en:
http://sociedadhistorica.com/indexVACIO.php
Y la pagina anterior al cambio en:
http://sociedadhistorica.com/indexOLD.php
Actualmente utiliza otro sistema, en lugar de cargar la imagen de “cargando” en cada una de ellas, se ha generado una imagen “lazy” con una calidad del 10%, con la consiguiente reducción de tamaño.
Por defecto carga esa imagen y por detras la imagen con calidad óptima, con ello se consigue una pequeña penalización con respecto a la version anterior, pero se obtiene una mejor sensación al tener la pagina con todas las imagenes, mientras se cargan las de alta calidad.
http://sociedadhistorica.com

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

* Please enter the Biggest Number