Shrink your JavaScript/CSS in WordPress with PHP

I came across a very simple, yet elegant solution for shrinking JavaScript and CSS files with PHP. When large JavaScript frameworks are the order of the day, why not optimize? In this post I’ll show you how to easily apply this script to your WordPress theme; shrinking your CSS/JavaScript assets by around 300%! I intend on making a WordPress plugin that automates this process, but for now, this post will show you how to configure your own theme.

This site compresses MooTools to about 20kb (the original file with YUI Compression weighing in at 65kb). Check it out!

JS File Compressed

The Setup

This will literally take minutes to integrate.

  1. Download the PHP script.
  2. Upload the file to your active WordPress Theme folder.
  3. Create a folder called “cache” – Make sure this folder has proper permissions
  4. Create an .htaccess file in your theme folder.
  5. Create a folder called “css”
  6. Create a folder called “javascript”

Making it Work

Insert the following code into your .htaccess file in your active theme. Make sure to replace RewriteBase with the absolute path to your theme folder where your combine.php script resides. Note that I made RewriteRule to be a relative path to combine.php:

RewriteEngine On
RewriteBase /wp/wp-content/themes/yourtheme/
RewriteRule ^css/(.*\.css) combine.php?type=css&files=$1
RewriteRule ^javascript/(.*\.js) combine.php?type=javascript&files=$1

You’re ready to link your Javascript and CSS files. As described on the authors site, you link your stylesheets and scripts by chaining with commas. Here is how it will look in your WordPress theme file:

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/styles.css,
another.css,athird.css" type="text/css" media="screen" />

<script src="<?php bloginfo('template_url'); ?>/javascript/jquery.js,
another.js,etc.js" type="text/javascript"></script>

Notes

You need to consider script dependencies, and chain your scripts accordingly. Also, make sure your stylesheets are added in the correct order or you may notice some rules being overridden. Depending on your server configuration you might have to chmod your cache folder to 777. Confirm that your cache folder contains your cached files with a ‘.gzip’ extension.

All CSS files are moved to the CSS folder in the theme. This goes against the WordPress convention of style.css in the theme’s main folder. I still have theme comment data for WordPress in my original style.css file, but I don’t use it on my site.

Major hat-tip to Niels Leenheer for creating such a great script and simple solution.

12 thoughts on “Shrink your JavaScript/CSS in WordPress with PHP

  1. I read the original version of this as my site has an F for html requests..

    I have 16 calls for javascript!! I don’t know how..

    I didn’t understand the original site but I know understand (to a point) your instructions..

    Anyway, how do I get a list of the javascript calls?

    Even better, how’s the plugin coming??

    :)

  2. @lee,

    I’m not sure I understand your question. If you follow this post, you will be able to reduce the size and number of queries for CSS and JS assets.

    I have not finished a plugin for this yet, but I intend to. Not sure what the ETA will be yet =/

  3. I have gone through all the steps but I am not sure where to add or edit the last bit of code that links to the stylesheets and js.

    “<link rel="stylesheet" href="/css/styles.css,
    another.css,athird.css” type=”text/css” media=”screen” />

    <script src="/javascript/jquery.js,
    another.js,etc.js” type=”text/javascript”>”

    Where do I add this bit of code?

  4. @DJ Meta 4,

    Ideally, the <link> elements will go in the head of your document. In WordPress, the default file for the head of your document is header.php in your [active] theme folder.

    Also make sure that mod_rewrite is configured properly on your server.

  5. I’ve got a question.. I use WP Super cache.. will your code produce any additional benefit, or is WP Super Cache already doing the same job that this code does automatically? What’s the difference between this and WP Super Cache plugin.. does it do esentially same thing?

    Another question about caching.. Im new to understanding.. I looked in Google Chrome ‘s App Data and saw that whenever I reload a page, the files order changes in the “about:cache”.. does that mean the files are cached, or are being re-cached every page load?

    Also, a qeustion on caching, if a browser does it, then why are we adding creating code to cache things? I’m very confused at this cache principle.. please explain with the answers to my questions, I greatly appreciate it =) thanks!

  6. @Teenpublish – I am not too familiar with WP Super Cache. Looks like Super Cache does use compression, so you will probably be alright just sticking with that; although your javascript files do not look minified. I would check with the author of that plugin.

  7. Hey Paul, thanks for the response, although I am a still a bit confused. Does caching somehow reduce the filesize for compression? Does your script cache it , or compress the file size, or does both? I was under the impression that “caching” only meant the browser storing a copy of each loaded file on your website into a temp directory on your hard drive so that the next load is quicker , as if it were loading most files straight from your hard drive. Whats the difference?

  8. The caching we are discussing is server-side. Although assets (images, javascript, css) are cached locally on a user’s computer, server-side caching is done to shrink those assets for smaller delivery sizes. Server-side caching usually reduces the number of hits on the database, and thus, pages are served faster.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>