I published a set of plugins on github for nginx: https://github.com/charlesnagy/nginx-perl-plugins
Currently there is only one plugin which combines and minifies css on the fly. This can make significant impovement on your site’s page load time. Less request, smaller files. You can check your results with these tools:
- http://gtmetrix.com/ (Google PageSpeed and Yahoo’s Yslow on one page 🙂 )
- http://tools.pingdom.com/fpt/
Usage
Load the Plugin in nginx http section:
|
1 |
perl_require /etc/nginx/perl/Minify.pm; |
In nginx add to your server section:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
location @minify_css { perl Minify::css_handler; } location ~ ^/(.*)/([^/]+\.css)$ { expires 30d; add_header "Cache-Control" "public"; add_header "Vary" "Accept-Encoding"; if_modified_since off; add_header Last-Modified ""; try_files /$1/$2min @minify_css; } location ~ min$ { expires 30d; add_header "Cache-Control" "public"; add_header "Vary" "Accept-Encoding"; if_modified_since off; add_header Last-Modified ""; } |
Be aware!
- Nginx should be able to write to the directory where the css files are.
- You have to take care manually of removing minified files after a new deploy.
Update 2013.02.28.
Combining multiple css files
For combining multiple css files I didn’t like the existing libraries that’s one of the many reasons I decided to implement it my own way. In most cases I have one base.css file with all the generic rules. Font sizes, colors, basic classes etc. And have some specific one for the modules. For example I have one css for the shopping cart and checkout process, one other for the blog part and a third for the product catalog. This way I can segragate the css files won’t have one monolitic file but won’t have many small neither. The trick I use is always include @import “../../front/css/base.css”; at the first line of each css which would be a very bad practice if I wouldn’t use the Minify.pm plugin.
For better understanding a part from the code:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
while(<INFILE>){ if(m/(\@import) "([^"]*)";/){ if(open(INCLUDE, $directory.$2)){ while(<INCLUDE>){ $css .= $_; } close(INCLUDE); } } else { $css .= $_; } } |
The files get concatenated on the server side.
Recent comments