JMiur [E]

El tema del tiempo de carga de una página web no es un tema menor. En Blogger es aún peor porque hay una serie de "cosas" que se cargan sin que nosotros intervengamos y sus 45KB no son pocos. Si a eso le sumamos unos 30KB de Google Analytics, Feedburner y Technorati que son agregados habituales, ya estamos en un tercio del total del tiempo de carga mínimo. Seguimos sumando scripts de Json para comentarios o posts relacionados, estadísticas, etc, etc y fácilmente llegamos a 100KB. El tiempo que eso representa variará con cada conexión pero, es sustancial.


Una de las preocupaciones entonces es ¿agrego tal o cual script? si pongo Prototype, MooTools o cualquier otro de esos "monstruitos" ¿afectará la carga? Obviamente, la respuesta es sí. Cada cosa que agreguemos influye y la decisión de usarlas es muy subjetivo y hay para todos los gustos.

Supongamos entonces que las uso, que no quiero privarme de ellas y he evaluado que hay una buena relación costo/beneficio ¿puedo hacer algo para optimizarlas?

Por ejemplo, prototype.js (1.5.1.1), scriptaculous.js (1.7.1_beta2) y effects.js (1.7.1_beta2) que son las que yo uso, pesan un poco menos de 145KB; las versiones más modernas pesan 160KB o más así que si en alguna parte dicen: "Protoculous es un archivo de JavaScript que combina Prototype y Scriptaculous y los comprime para reducir su tamaño y por lo tanto, el tiempo de carga", voy a ver de que se trata porque suena interesante.

El ZIP que bajamos dice que incluye las versiones de prototype 1.5.1 y scriptaculous 1.7.1 beta 3. Lo abrimos y vemos que hay varios archivos, poca información ... y está en inglés:
  • scriptaculous-1.7.1-beta2.js es una versión comprimida de scriptaculous y es bastante grande porque contiene todos los componentes, builder,controls,dragdrop,effects,slider y sound (77 KB)
  • protoculous-1.0.0-shrinked.js es una versión comprimida de prototype + scriptaculous con todos sus componentes (143KB)
  • protoculous-1.0.1.js es una versión mínima de 56 KB
La primera prueba que hice es usar protoculous-1.0.0-shrinked.js y reemplazar mis tres scripts: prototype.js + scriptaculous.js + effects.js. Evidentemente, en este caso, no hay una diferencia en cuanto a tamaños sino que estoy usando más o menos la misma cantidad de bytes para actualizar las librerías pero cargarlas completas y no de manera parcial. El resultado es bueno, Protoculous funciona bien y el hecho de tener sólo un archivo y no tres ya es una mejora porque hay que recordar que en estos casos, siempre es mejor tener un solo archivo "grande" a varios archivos pequeños.

Hasta aquí, podríamos decir que es una mejora pero no tan sustancial.

Leyendo un poco más, tratando de encontrar algo de información, veo que hablan de un sitio llamado Bananascript.com que se define como una herramienta online para comprimir scripts. Esto, dicen, lo hace eliminando comentarios, espacios innecesarios, etc pero además, lo comprime en modo "real", cambiando secuencias de bytes largos por secuencias más cortas.

¿Probamos?

Es sencillo, entramos en la página y subimos un archivo que debe tener extensión JS y más de 4KB. Hacemos click en el botón Compress y esperamos unos segundos. Cuando está listo, descargamos el nuevo archivo generado.

Primero, subí protoculous-1.0.0-shrinked.js. Los 143KB originales se redujeron a 64KB. La diferencia es importante así que subí el archivo para ver qué pasaba y, efectivamente, funciona sin problemas.

Lo único que aclara la página es que el charset del sitio debe ser iso-8859-1 ya que no se ha probado en otros modos pero, eso no es problema, no es necesario cambiar nuestro sitio, basta indicarlo en la llamada al script así que estos archivos comprimidos los cargamos así:
<script type="text/javascript" charset="ISO-8859-1" src="URL_archivoComprimido.js"></script>

Me entusiasme así que empecé a hacer pruebas. Por fin, me decidí a hacerlo en serio:

prototype.js + scriptaculous.js + effects.js (145KB) usando Protoculous fue comprimido a 63KB
lightwindow.js (65KB) fue comprimido a 16KB
VagaSidebar.js (10KB) fue comprimido a 4KB

En resumen, los 220KB originales quedaron reducidos a 82KB. Los alojé otra vez en mi servidor y allí estan desde hace varias horas. Parece que todo sigue en su lugar pero, cualquier problema, avisen complice

36 comentarios:

Jordi  

Buenas,
Me ha parecido muy interesante este post, como casi todos los de tus blogs, pero no se si acaba de funcionar el tema...
He detectado que no se carga la imagen del lightwindow y también me da la sensación que el efecto del mismo se ve como a trompicones.
También he visto que se me retiene la pantalla cuando abro tu página en el explorer y se queda medio lelo hasta que no acaba de cargar la sidebar.
Que alguien más comente a ver si soy yo que me flipo o qué, ya que la idea de comprimir los scripts me ha parecido de lo mas apetecible ;).
Un saludo!!

Responder
La Blogueria  

Todo está funcionando perfecto en tu blog, hasta donde puedo percibir. ¡Genial! Voy a probarlo ya mismo, si en mi blog, que es más lento que el caballo del malo, se apreciase mejoría, sería la bomba!

Gracias!

Responder
La Blogueria  

Ahi van mis resultados: FUNCIONAN TODOS LOS SCRIPTS, y SÍ he notado mejoría de carga. JMiur, que dios te lo pague en efectivo, en esta vida y en otras. Cuando tengamos el widget del café, quiero ser la primera en hacer clic e invitarte, supongo que lo tomas negro y cargado?

Con respecto al comentario de Jordi:

-Tampoco me carga la (redundante) imagen de carga del Lightwindow, ni en tu blog ni en el mío; sospecho además que usamos el mismo script, lightwindowbanana, ¿puede ser? porque Hostfile se empeña en decirme que use ese, que tiene la misma data. De cualquier manera, lo de la imagen-de-carga-que-no-carga ha pasado antes, asi que no lo achaco a esto.

-En IE7, Vagabundia carga bien, más lento que en Firefox, o sea lo normal. Y el mío, que a veces ni lo abría, ¡ahora se digna a reconocerlo como blog! Asombroso.

De todo lo que he hecho para optimizar mi blog, creo que esto es lo que mejor resultado ha dado, al menos lo más notable. Hay que entender también que la cantidad de scripts que uso es la verguenza de la casa.

Jordi, te recomiendo que lo pruebes.

Saludos y GRACIAS MIL!

Responder
La Blogueria  

PD: la imagen de carga, ya carga :D

Responder
Mundo Libre10  

Vaya ahora parece valer la pena poner especificamente aquellos esos script en un blog.

Responder
JMiur  

Jordi:
Los estuve probando bastante tiempo, sobre todo, después de tu comentario. No he notado nada ni en Firefox ni en IE pero, sigo atento y lo seguiré mirando. Te agradezco mucho la información y el interés.

MundoLibre:
Prueba con cuidado, Proctoculus sin comprimir ya es una mejora importante.

La Bloguería:

Gracias por el análisis. Sigo en estado de alerta :D

Confieso que en cuanto lo vi, pensé en tú blog y en tu preocupación por el tiempo de carga ;)

Lo de la imagen de carga es un problema siempre pero, si antes funcionaba, debería seguir funcionando.

Con Hostfile hay un truco. Primero, creas un archivo vacío, por ejemplo, un TXT; lo guardas en la PC, le cambias el nombre y recién entonces lo editas, copias y pegas el contenido y lo subes. De esa manera, lo acepta. Se ve que les coloca un hash o algo así.

Si puedes "unificar" los scripts en un solo archivo, mejor, por lo menos, los "pequeños". Un script "largo" se cargará más rápido que varios "cortos".

Ah, y nada e CSS en archivos externos, todos en la plantilla.

PD: Efectivamente: café negro, cargado y dos cuchaditas de azucar :)

Responder
Jordi  

Vamos, confirmado pues, era yo o mi conexión que nos flipabamos :p
He vuelto a comprobarlo esta tarde con todos los exploradores y funciona a las mil maravillas, sería cosa de las legañas de la mañana...
Pues nada, mis felicitaciones como siempre por otra genial aportación del maestro y un saludo a blogueria a la que sigo también asiduamente desde mi reader ;)

Responder
JMiur  

Gracias, Jordi, me sacas un peso de encima :)

De cualquier manera, sigo vigilando y atento a posibles problemas.

Responder
Mr  

Jmiur, muy interesante este articulo, a pesar de no usar demasiados scripts sigue siendo una potente herramienta. Te agradezco que lo hayas compartido con nosotros, lo pondre en practica a los poquitos que tengo que no esta de mas.

Un saludo.

Responder
JMiur  

Me laegra que te resulte interesante MR, es, como todo, una herramienta y en este caso, útil si la usamos prudentemente.

Responder
Fdo. R. Baños  

Hola JMiur: En cuanto vi el título de esta entrada, supe que tenía que probarlo. Ya lo hice y, según se ve, la cosa fue viento en popa. Muchas gracias por compartirnos esto. ¡Saludos!

Responder
JMiur  

Me alegra que funcionara :)

Responder
Mandelrot  

Acabo de descubrir una herramienta interesante para hacer pruebas de velocidad de carga: Pingdom (así haciendo pruebas antes y después se podrá medir la compresión real). Y de todas formas es útil para cualquier diseñador...

Responder
JMiur  

Gracias Mandelrot, miraré de que se trata.

Responder
La Blogueria  

JMiur encontré una entrada muy buena sobre ello acá :D :D :D

Responder
JMiur  

Ni yo mismo recuerdo lo que hay aquí adentro XD

:D

Responder
Anónimo  

Cool, quería optimizar la carga del lightwindow en mi sitio y no conocía bananascript. Solo comprimí prototype y lightwindow quedándome en total, con scriptaculous y effects, en 88kb. No es tan grave. Gracias.

Responder
Sharck_Bloody  

hola, le estoy sacando provecho a esta pequeña maravilla, comprimiendo todos los scripts, no me ha resultado bien el script de la paginacion, funciona bien hasta qu se hace click en un numero, por ejemplo el 2, muestra los resultados, pero desaparece el elemento, y para complicarte un poquito, como seria el tema de unir varios scripts en un solo archivo?

Responder
JMiur  

El script de la paginación no lo he comprobado pero, es cierto que la compresión de algunos no es efectivo. De todas maneras, hay una equilibio que debemos comprobar: algunos scripts es mejor tenerlos en la plantilla ya que el tiempo de carga desde un servidor externo puede ser mayor y entonces, perdemos los beneficios.

Para unir scripts, en principio, sólo hay que abrirlos con el block de notas, copiar el contenido de uno en otro y guardarlos con un nombre nuevo. en ese sentido es lo mismo que unir el contenido de dos archivos de texto cualquiera para crear uno nuevo.

Responder
Sharck_Bloody  

Gracias, tambien optimice el css de mi pagina, y logre que cargue en 2,62 seg segun esta pagina, ¿Vos pensas que esta bien, o tarda mucho aun?

Responder
JMiur  

Es una página interesante, por cierto. No hay manera que yo pueda compararlo, cada conexión es diferente y eso influye mucho.

Yo no creo que tu blog tarde mucho en cargarse y además ... todo lo bueno tiene que hacerse rogar un poco :D

Responder
Marvin8  

Lo acabo de probar y va mejor mi blog :D

Responder
JMiur  

Me alegro que vaya mejorando :D

Responder
LeonardoN  

¿Esto sirve para los que tenemos los scripts alojados en gadgets?

Responder
JMiur  

Si, en principio, sirve para cualquiera.

Responder
LeonardoN  

¿Sí o no? ¿Cómo tenés vos los scripts? ¿Qué recomendás? ¿Comprimirlos o no?

Responder
JMiur  

No hay una respuesta por si o por no.

¿Qué scripts? Si son pequeñas o personales, comprimirlas me hará dificultoso editarlas y no ganaré mucho. Si están alojadas en servidores externos, se tarda más en realizar la conexión que en cargarlas. Si son muchos archivos externos, es mejor juntarlas en uno solo.

Un script como LightWindow alojado en un archivo externo, es mejor comprimirlo ya que es un archivo grande.

Todo es relativo y hay que evaluar los resultados paso a paso.

Responder
Miguel  

@JMiur
Estaba mirando tu Blog y como todavia no he terminado de leer todas las entradas... :(.

He visto un flechita muy mona al lado de la fecha y ya veo que lo has puesto . Voy a hacerlo yo tambien :).

Responder
César  

Hola, JMiur.

¿Puede un script comprimido, tal como explicas en tu entrada, ser incluido en la plantilla como cualquier otro? En caso afirmativo ¿existe alguna cautela especial que deba observarse?

Gracias anticipadas y un saludo desde España.

Responder
JMiur  

Saludos, César.

Se ponen igual que cualquier otro script. En general, sólo son textos donde se eliminan los espacios innecesarios y los saltos de línea.

La única precausión con esos y con cualquier otro script es usar CDATA para evitar que se cambien ciertos caracteres:

<script type='text/javascript'>
//<![CDATA[
................... acá el código
//]]>
</script>

Responder
César  

Gracias por tu respuesta, JMiur.

Responder
Francmi08  

Hola Jorge, siguiendo con las pruebas mi pregunta es, ¿que ocurre si tengo la opción de actualizar las librerías automáticamente?

JMiur  

¿A qué opción te refieres?

Por supuesto, si usas una librería comprimida con algúno de estos sistemas, eso no se actualizará, son archivos distintos.

Tratándose de librería como jquery, prototype, etc, no tien sentido comprimirlas con estos métodos ya que puedes usar las librerías comprimidas por los desarrolladores o mejor aún, cargarlas desde el API de Google lo cual será más rápido y evitará problemas de alojamiento.

Francmi08  

Perdón, pero no me di cuenta de la casilla para responder...jejeje..Y eso que te leo cada día...despiste total¡¡¡¡¡

Responder
Francmi08  

Exactamente a eso me refería, has dado en el clavo....las cargo desde la API de Google. Entonces lo dejo como lo tengo ahora. ok, gracias de nuevo.

JMiur  

Si. Es lo mejor.

Y lo de las casillas y las respuestas ... da igual :-)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR