Website Optimization - Compactation of .JS/.CSS files

Question

Well, I didn't know Google already had a Mechanism that give to you some hints on what you can make your modifications to optimize your website. In my analyzes I saw an interesting thing like compacting js and css files. I googled and found out tools to help on this such as

gzip/deflate

, but I have no idea how to use them. Googleling, I saw something like putting in my http header a meta Accept-encoding: "gzip, deflate" - but I'm not too sure - then when done this, when your site make a request saying "Hello, I accept-encoding: gzip and deflate.", then my server would process everything needed and would return a response already containg all the files compacted (How's that?).

Some examples in topics I saw, they talked about server apache and the first reference was this one How to optimize your website , but in my case the server is written in python. So how do I do the magical thing in compacting everything and send them all in a response?

I know is a long way to go, and I think I need a good reference explaining how to do this.

Have you passed through this kind of thing? If so, well, could you give some ideas?

Thanks in advance.

Answer 1

http://jscompress.com/

This will minify (compress) your files JS for you.

http://cssminifier.com/

This will do the same for CSS

http://www.willpeavy.com/minifier/

And why not do the HTML while we are at it

Answer 2

There's two answers to your question I can think of off the top of my head:

1. 'Compacting' JS/CSS probably refers to the practice of concatenating and minifying your JS/CSS payloads. You can concatenate with cat and then minify with uglifyjs or yuicompressor respectively. This reduces the number of individual requests your sending, and provides great cheap gains. Bear in mind that you might want to do this per-page if you have different dependencies for different views, otherwise you incur the overhead of running javascript you're not using.

2. gzipping the content you serve has to be done carefully. Ideally it's just something you enable on your webserver. For example in an nginx server definition:

    server { gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript; } 

   If you're doing it at the web application level, you could be introducing more latency than is really worth it to compress and decompress your data.

Answer 3

I use this to combine around 23 or so core js files into 1 and compress it. https://developers.google.com/closure/compiler/ It has a handful of useful settings, like the ability to keep in tact the js files header/license text.

They also have an equivalent for css https://code.google.com/p/closure-stylesheets/ (scroll down to the "minification" section).

If this is something you think you would like to try I could give you head start with the java setup and creating a batch file to do your combining/compressing.