Automatically gzip css and js files to speed up download

[Doublespark]

Hi,

Rumour has it that Google if they are not already will in the future consider page load times when ranking sites. I have been analysing my sites page load times using Page Speed:

http://code.google.com/speed/page-speed/docs/using.html

It suggests thatt automatically gzip'ing css and js files before they are downloaded would speed up my load time considerably.

Is this possible? Could anyone point me in the right direction as to how to achieve this?

I see that there is a "Enable GZip compression" checkbox in the settings page, but this does not appear to have any effect on css or js files?

Thanks,

Gary.

[Vera]

*I might be wrong*

I think that all modern day browsers support gzip (IE4+ and all browser from that era and after) and that should mean they can handle zipped files. The thing I do not know is if they will ever store a zipped version or that they unzip before showing/storing the code.

I have been experimenting with white-space removal and gzip in my last own cms and I never saw anything of the gzipping although I tried the apache modules and the php code.... ops:

Euh, the css files are probably not zipped though! Perhaps try things like: http://paulstamatiou.com/how-to-optimiz ... -even-more

[Doublespark]

Hi Vera,

I have it figure out (I think).

Using Apache 2 this needs to be added to the .htaccess file:

SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ \
    no-gzip dont-vary
SetEnvIfNoCase Request_URI \
    \.(?:exe|t?gz|zip|bz2|sit|rar)$ \
    no-gzip dont-vary
SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary

I have tested it here:

http://www.whatsmyip.org/http_compression/

And it all seems to work :-)

Thanks,

Gary.

[Medianomaly]

Related note -- I came across this page tonight: http://rakaz.nl/2006/12/make-your-pages ... files.html

He presents a method to not just compress, but also combine multiple CSS and JS files into one via a simple PHP script. This limits the number of concurrent open connections the browser has at once which significantly reduces loading time.

I asked about something similar using Minify: viewtopic.php?f=9&t=437&p=1519&hilit=minify#p1519 -- didn't get much of a response.

I was thinking of submitting a feature request for something like this, but I'm not exactly sure how it would be implemented, given how CSS/JS is currently handled by TYPOlight.

[Doublespark]

I have been working on this quite bit over the last couple of days, and it's time I got back to client stuff.

The article is very close to what I have implemented here:

http://cms-1.doublespark.co.uk

I use to have around 16 css and js files loading.

All files needed for the layout are now combined in to 1 css file and 1 js file, using minify.

All css and js files that are called dynamically from extensions are also now redirect to minify using the following .htaccess rules:

# Prepend .css and .js file requests with min/?f= so that they are minified
RewriteRule \.css$ /min/f=%{REQUEST_URI}
RewriteRule \.js$ /min/f=%{REQUEST_URI}

This has meant that the overall number of external files loaded has now reduced from 16 to 5 (and even those that are not grouped are still minified).Initial page load time have improved considerably as a result.

It's been well worth the effort, and I have both mootools and jQuery running nicely side by side as well :-)

[Medianomaly]

That's fantastic. Do you think that is something that could be made into an extension? I'd love to implement something like that on my projects.

The article I linked to required that all CSS and JS files be in their own folders -- which is something TYPOlight doesn't do -- it drops CSS files into the root when created using the Style Sheets Module. But it looks like with your method and .htaccess rules, it really doesn't matter where they are!

The only catch I've noticed is that some extensions include inline JS and CSS code added into the head -- not being a developer I don't know if this is by necessity or just lazy coding.

[Doublespark]

In an ideal world it would be great if it was provided out of the box, but I guess it is really a feature more beneficial to larger sites, and I'm not sure that's TL's main market place. So maybe other things on the wishlist would get prioritised first.

I guess it's lazy coding, but being as my coding skills are often bettered by ten year olds, I'm reluctant to get on my high horse about these things. It would be a first, but I could of course be wrong :shock:

[markhurd]

Just to provide another resource, I have been using Front End Blender to accomplish the compilation/compression of CSS/JS assets: http://github.com/front-end/front-end-blender

Since it's run from the command line you can integrate it with Capistrano (automatically minify when you deploy!).

[Doublespark]

Hi Mark, that looks a good solution. The main difference between the 2 seems the minfy/htaccess method only need setting up once and any future amendments to files are automatically updated. This is a big feature for me.

That said I guess the blender method could be automated by a cron job, but that is way over my pay grade:-)