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