WordPress Plugin: Shrinkr

Download latest Version (1.0)

Changelog

  • 1.0 (22/10/08): initial version

Description

Shrinkr helps you to increase the performance of your web site by reducing the file-size of your CSS and JavaScript files and concatenating them to one single file each. By stripping out unnecessary characters like comments and whitespace, the file gets smaller and by concatenating them to one file each, it also reduces the number of HTTP requests. In the end, instead of having multiple CSS and JavaScript files included on your page, with Shrinkr you will only have one single CSS and one single JavaScript file.

The idea for Shrinkr is based on Douglas Crockford’s JSMin, the YUI Compressor and several other tools on the web that are able to remove unnecessary characters from JS or CSS files. It uses the PHP adaptation of JSMin, published by Douglas Crockford as jsmin.c, created by David Holmes and Gaetano Giunta.

Requirements

None, except a working WordPress installation. I tested it on 2.3.1 and 2.6. It should also work fine with PHP4 and 5.

Installation

  1. Download the zip-file and extract the content to wp-content\plugins.
  2. Login to your WordPress AdminArea and activate the plugin in “Plugins > Plugins”

Settings

  • Go to “Settings > Shrinkr” (for WP Version < 2.6: "Options > Shrinkr”)
  • First, you need to provide the absolute filepath on your server where the files should be stored. On the next line, give the absolute URL to that location. Because the files will then be automatically included in wp_head (CSS) and wp_footer (JavaScript) of your site, that URL will be used to point to their correct location
  • Below that, you will find a textarea, where you can put in the locations of the files you would like to get shrinked (one path per line). You can either reference files located on different servers by stating the URL to these files, or relative paths (based on the location of your wp-content directory).
  • Clicking on “Save Options” will just save whatever you have put in those fields but will not actually run the tool yet.
  • Running Shrinkr

    Clicking on “Run Shrinkr” starts the tool. It will go through the files you stated in the textbox, take their content and based on their extension (either .css or .js), it will apply the appropriate functions to strip out unnecessary content and concatenate them into one file each. It is important to note that Shrinkr does not modify the original files, it only retrieves their content and then strips out unnecessary characters. After that, it will store both files as css-min-[timestamp].css and js-min-[timestamp].js at the locations you provided.

    Shrinkr also adds an action to wp_head and wp_footer to include the minified CSS file (in the header) and the JS file (in the footer) automatically on page load. Including the CSS file in the head and the JS file in the footer, i.e. the bottom of the page is done because of the recommendations in the Yahoo! Exceptional Performance Rules.

    Important Note

    Because of the fact that the tool minifies both CSS and JavaScript, you will end up having 2 files with all the content on one single line. This makes debugging a nightmare, of course. So it is a good idea to only activate that plugin on the live version of your site and keep the files separated on your development machine.

    Tested on

    • WordPress 2.2.1, 2.6
    • Firefox 2.0x
    • IE 6

About the author

This website is the personal web appearance of Klaus Komenda, an Austrian web developer. The about section offers more info about me and this site.

Categories

Copyright © 2000-2014 Klaus Komenda