Nginx Perl CSS Minifier

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:

Usage

Load the Plugin in nginx http section:

In nginx add to your server section:

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 [email protected] “../../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:

The files get concatenated on the server side.

About charlesnagy

I'm out of many things mostly automation expert, database specialist, system engineer and software architect with passion towards data, searching it, analyze it, learn from it. I learn by experimenting and this blog is a result of these experiments and some other random thought I have time to time.
Bookmark the permalink.
  • Should I copy all CSS file to a folder writable by Nginx or I should create a blank folder in which final CSS file be written.I am using WordPress on Nginx.WordPress has lot of CSS files so will the plugin automaticallt combine, minify them and write to a folder.

    Thanks for plugin and tutorial.I was really looking for something like this.

    • charlesnagy

      I’m glad you found it helpful.

      I usually use the same directory and make it writeable by nginx. Makes it easier to find minified and the original css files.

      However (I just saw it wasn’t clear from the post) the plugin only does the combine if there is a hint for it in the css file itself with an import statement. Like this:

      $ head static/somemodule/css/specific.css
      @import “../../front/css/base.css”;

      .m-10 { margin-top: -10px;}
      .listcontainer {
      margin-left: 20px;
      }

      If you need more examples or help don’t hesitate to contact me.

      • Thanks for your response.I downloaded the code and gave it a try (looking at code).You are using JS minify library as well along with CSS library.

        use JavaScript::Minifier qw(minify);
        use CSS::Minifier;

        So does it works on JS as well (but above post does not say about this).