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:
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í:
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
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.
33 comentarios:
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!!
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!
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!
PD: la imagen de carga, ya carga :D
Vaya ahora parece valer la pena poner especificamente aquellos esos script en un blog.
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 :)
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 ;)
Gracias, Jordi, me sacas un peso de encima :)
De cualquier manera, sigo vigilando y atento a posibles problemas.
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.
Me laegra que te resulte interesante MR, es, como todo, una herramienta y en este caso, útil si la usamos prudentemente.
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!
Me alegra que funcionara :)
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...
Gracias Mandelrot, miraré de que se trata.
JMiur encontré una entrada muy buena sobre ello acá :D :D :D
Ni yo mismo recuerdo lo que hay aquí adentro XD
:D
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.
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?
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.
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?
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
Lo acabo de probar y va mejor mi blog :D
Me alegro que vaya mejorando :D
¿Esto sirve para los que tenemos los scripts alojados en gadgets?
Si, en principio, sirve para cualquiera.
¿Sí o no? ¿Cómo tenés vos los scripts? ¿Qué recomendás? ¿Comprimirlos o no?
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.
@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 :).
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.
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>
Gracias por tu respuesta, JMiur.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
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 ...