My JavaScript book is out! Don't miss the opportunity to upgrade your beginner or average dev skills.

Monday, October 08, 2007

packed.it screencast ... (maybe) Yesss!!!

I didn't find a way to create a clean video, probably 450 pixels are not enought to show how does packed.it work?

However, I'll try to explain these two screencast.

First one - Ext JS Home Page - from 223Kb to 52Kb


This video shows a saved version of Ext JS Home Page.
This site uses a lot of external CSS, one imported and one in page but not every one is used by JavaScript disabled browsers.
Total CSS size is about 93,2Kb while 4 used JavaScript files size is about 130Kb.

With packed.it You can create a project using both CSS and JavaScript and the result will be a single file with total size of 52Kb, including both CSS and JavaScript.

I didn't add to project Google Analytics unrich.js file but this should be included without problems too saving other 15Kb.

As You can see (I hope), the result is even smaller on page, just three tags, using IE5 compatibility one, instead of 8 inside page ... these are few bytes less than original and layout is even more clean than ever.

CSS file dedicated only for JavaScript incompatible or disabled browsers is just 36Kb instead of 93 without optimization but as You know You could use packed.it to serve an optimized version of this file too (just change packed.it folder name to packed.css, for example, and change prefix inside automatic generator).




Prototype and Scriptaculous in less than a minute, from 230Kb to 38Kb



This second example just shows a JavaScript only project, Scriptaculous 1.7.1 beta 3 using prototype version 1.5.1
You just need to upload these sources and with a click You'll download full Scriptaculous enviroment, reducing size from 230Kb to 38Kb.

Using client compression too, every gzip or deflate incompatible browser will download about 90Kb instead of 230Kb, reducing bandwidth about 38% of original.

Sorry for missed audio and bad video quality, I'll try to do something better next time, ok? :-)

5 comments:

gotcfm said...

Andrea, I tried using the application with the latest version of Ext 2.0 and when I tried to upload ext-all.js, it seemed to hang. Any ideas why? Size maybe?

Andrea Giammarchi said...

I uploaded them but every file You upload need to be sent to server, normalized (at least encoding) and downloaded to your browser before pre processing.

You should wait few seconds but if server is busy (temporary host) time should become too much using big files :-(

I'm waiting to change host (hello Media Temple, are You interested? :D) so sorry if service is quite slow.

Andrea Giammarchi said...

Gotcfm ... sorry, I limited upload size to 500Kb ... now ext-all should be uploaded without problems.

Regards

Mega said...

Thank you, Andrea, in the end you really did it :D

lord55 said...

gran bel lavoro andrea!!!sto provando la tua soluzione con il cms phpfusion o meglio mfusion che è multilingua!
fin'ora utilizzavo il metodo razl con la concatenazione dei file!
avrei da chiederti delle cose!
tu usi jsmin sicuramente valido ma con gzip sembra che yui compressor sia ancora più efficiente:

@è possibile comprimere con yui e poi insere il source code in packed.it per il deflate o gzip?!?!?

@un'altra cosa che non riesco a capire è perchè non legge il css compresso insieme al js.hai riscontrato delle anomalie con altri cms???

ti ringrazio e di nuovo complimenti!!!!