Reduce el tiempo de carga en WordPress con WP jQuery Lazy Load
Javascript, Recursos, Wordpress
Uno de los problemas del hosting en el que se aloja ahora este blog es su velocidad de carga. Estos días he estado mirando como mejorarla un poco y uno de los métodos que he mirado de implementar es el lazy loading de imágenes.
El lazy loading de imágenes consiste en cargar en un inicio solamente las imágenes que se ven en pantalla, de modo que las que se queden por debajo de la pantalla solamente se cargarán cuando se efectúe un scroll vertical.
Esto es muy útil sobre todo para sitios con artículos muy largos y que usen varias imágenes.
Existe un plugin jQuery para realizar lazy loading que ha sido adaptado para WordPress, con lo que la implementación es coser y cantar. La adaptación corre de la mano de Andrew Ng.
Una vez instalado solamente tienes que recargar la página de tu blog para ver como van apareciendo las imágenes, con un efecto muy vistoso de “fade in”, conforme se va haciendo scroll en la página.
A continuación se puede ver algunas capturas hechas sobre Firebug donde se aprecia la reducción de peticiones al servidor en este blog, y eso que esta página no tiene demasiadas imágenes…
Antes de instalar lazy load para WordPress
Después de instalar lazy load para WordPress
Como se puede observar el ahorro en el número de peticiones es considerable en este caso.
Me llamo David Noguera, tengo 23 años y soy Desarrollador/Administrador web.
Puedes encontrar algo más de información en la página
23 de noviembre del 2009 a las 5:59 am
El plugin existe para joomla ???
23 de noviembre del 2009 a las 6:03 am
Que yo sepa no… David Walsh ha creado algo similar en Motools, habría que implementarlo en el template a mano, jejeje
De todas formas crear uno así para Joomla no debe ser muy complicado…
23 de noviembre del 2009 a las 9:36 am
De lo que se entera uno visitando estos sitios web… muy interesante y útil, pero tengo una pregunta.
Esto carga solo lo que se ve, ok, entonces por ejemplo si lo que se ve el servidor tarda 1 segundo en dártelo, a la hora de hacer scroll, sufriremos latencia, ¿no? si me vas a preguntar si yo he notado algo en tu web la respuesta es que no…
Un saludo!!
23 de noviembre del 2009 a las 9:38 am
Fijándome un poco más se aprecia un efecto de tipo “fade-in” en las imágenes cuando vas bajando el scroll… tendré que probarlo…
PD: Felicidades por la interesante información…
Saludos!!
23 de noviembre del 2009 a las 7:24 pm
Hola Pablo, efectivamente las imágenes se cargan con un efecto de fade in que está implementado con jQuery.
Respecto a la latencia, la latencia se produce al obtener la imágen, pero el DOM de javascript ya está listo y cargado, por lo que todo sucede por debajo y no te enterás.. dando el efecto de que todo carga un poquito más rápido…
De hecho, prueba a hacer scroll vertical y verás como en ningún momento se para la barra de scroll, todo se mueve fluido.
Un saludo!!
23 de noviembre del 2009 a las 11:32 pm
Sip… es que a veces antes de releer escribo.. y me pasa lo que me pasa… y más “recién levantao”
Un saludo!!
28 de noviembre del 2009 a las 2:44 pm
que bien, me gusta mucho, revisare para adaptarlo al joomla, pero sabes que seria mucho mejor aun, que en los momentos previos de recarga de la imagen salga un background, con un pequeño gif centrado alusivo con un cargando… ..
ps bueno gracias por el articulo, lo estaba esperando.
28 de noviembre del 2009 a las 11:43 pm
Esta claro que la carga inicial del sitio desminuye, sin embargo el numero de peticiones al servidor aumenta (porque hace dos peticiones por cada imagen que se va mostrando [grey.gif y la imagen a mostrar] ), tal vez pensaria utilizar otro tipo de solucion en sitios con tráfico elevado.
29 de noviembre del 2009 a las 7:07 am
Hola Leandro, es verdad, se incrementa en 2 (grey.gif y el fichero del plugin, en caso de que no lo juntes todo con jquery.js) el número de peticiones, pero según mi manera de verlo, sigue siendo mejor opción, ya que mucha gente entra al sitio hecha un vistazo rápido y si va, sin siquiera hacer scroll… con el plugin, aunque incrementes en 2 las peticiones iniciales, estás ahorrando todas las peticiones restantes. Por cierto, la petición a grey.gif solo se hace una vez para toda la página, y se usa la misma imágen grey.gif para todas las imágenes…
Además, a una mala puedes crear un CDN para contenido estático en caso de tener un sitio web con mucho tráfico, la mejora de velocidad se crea con la sensación de que la primera carga es más instantanea, después, servir contenido estático no debería ser un gran problema para el CDN externo.
No se si me he explicado, jejeje. En cualquier caso e mi opinión, y puede ser que no sea del todo correcto este punto de vista… Investigaré más sobre el tema.
A modo de experimento pondré un evento en Google ANalytics para controlar cuanta gente abandona el blog sin tocar la barra de scroll, de esta forma podré saber si de verdad estoy ahorrando tráfico o no…
Un saludo, por cierto, hecho de menos los artículos de tu blog.. jejeje ;)