WordPress Plugin: Shrinkr

With higher expectations, both in terms of design and interaction of websites, which are more like web applications these days, the amount and size of JavaScript and CSS files used have increased dramatically during the last couple of years. Ajax, Drag & Drop, Animation…if your site doesn’t keep up with the latest trend, you might be left out. But bigger file sizes (and more files) also mean more HTTP requests and having to download more data from the server over an Internet connection, which means slower loading of the page. Shrinkr helps you to tackle that problem.

Description

Shrinkr does two things:

  1. It reduces the file-size of your CSS and JavaScript files through minification, i.e. stripping out unnecessary content like white-space and comments
  2. It then takes those files and concatenates them into one single CSS and one single JavaScript file
  3. Those files are then getting stored as css-min-[timestamp].css and js-min-[timestamp].js on your server. The reason for the timestamp is that whenever Shrinkr creates a new file, it is ensured that a user agent doesn’t still use a cached version of the previous files but, because the name of the file has changed, retrieves the latest version from the server

The first measure reduces the file-size by stripping out things from files that are not needed by the browser in order to interpret them. Whitespace and comments are for developers, not for the browser. They can safely be removed, which reduces the file-size and thus the consumption of bandwidth.

In the Yahoo! Exceptional Performance Rules, it says that one should aim to reduce the number of HTTP requests in order to make a page load as fast as possible. Shrinkr does that by concatenating all the files into one single file (one for CSS and one for JS). So instead of having 10 CSS files, you will end up having only one.

Shrinkr also adds an action to wp_head and wp_footer in order to tell WordPress to include those files upon page load in the appropriate section of the page. CSS files should be included in the head of the page, JS at the very bottom as per the Yahoo! Exceptional Performance Rules.

Because of the fact that you will end up having all your CSS and JavaScript in one file and on one line (because all the carriage returns etc. have been stripped out), it makes debugging kind of difficult. For that reason, you should only activate that plugin on the live version of your site and keep the files separated on your development box.

Further details about the plugin can be found on the Shrinkr plugin page. It would be great if you could try it out and give me feedback, either by leaving a comment here or using the contact form. Thanks!

Resources