JavaScript minification

[guaka]

I implemented jsmin.py on our update script for test.bewelcome.org. It's a bit rough still, but working now. If everything works fine it can be implemented on alpha as well.

echo Minifying javascript
for f in $(find /var/www/test_html/htdocs/script/*|grep js$); do 
        # echo $f;
        /usr/bin/python /var/www/jsmin.py <$f >/tmp/minified.js;
        cp /tmp/minified.js $f; 
        # cat $f; 
done

[globetrotter_tt]

Any updates on this ? Should we test this on alpha ?

[micha]

I'm still doubting that THIS is a way to minify our JS-load. No doubt that minification is a good idea but 1) why use pyton instead of a php-solution and 2) please note that we currently have less load because we don't load all of our js-files at once like proposed in this solution.

Alternative:  http://code.google.com/p/minify/

I'm trying that here on my local install and it seems by far more simple and easy to use with BW Rox. Should I commit it to trunk under /htdocs/min ?

[fake51]

Go ahead, lets try it.

Keep in mind though that the ACTUAL boost we should be going for is loading JS at the END of pages instead in the start. Currently, most of our pages load a lot of data without displaying anything - and then after 10 seconds you get to see the page.

[micha]

I'm not an expert with JS.

I heard it often nowadays that we should put all of our JS at the end of our pages. Yet, people seems not to acknowledge that most of our JS files need to be placed in the header of our pages to function correctly - at least if I follow the documentation from prototype and scriptaculous and so on.

If no JS files would need to be placed in the header, the easiest way would be to collect all JS where it is beeing produced and output it at the end of the page. No big deal I'd say but this would concern A LOT of templates and files in BW Rox.

[fake51]

Most of our JS needs to be placed in the header because we start using prototype and scriptaculous features before the page has finished loading (I've done this myself a few places, I believe). This is a mistake, though - in general, JS should wait for the page to finish loading before it runs, unless we're dealing with something that just REALLY can't wait or we're dealing with a page that takes an hour to load. Otherwise we're slowing the page down.

The reason you need to put JS at the end of the page is that every time the browser hits a script tag it will stop loading the page and evaluate the script. If we have 6-7 big scripts to evaluate, page load is blocked effectively for quite a long time.

Minifying scripts would help this problem, but the best solution is to try and load scripts at the end of the page and only run them on document load. Or, rather, the best solution is to do both: minify scripts AND delay script load

[crumbking]

place js to the bottom of every page.