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!
The Setup
This will literally take minutes to integrate.
- Download the PHP script.
- Upload the file to your active WordPress Theme folder.
- Create a folder called “cache” – Make sure this folder has proper permissions
- Create an .htaccess file in your theme folder.
- Create a folder called “css”
- 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.
I'm 
Posted on Oct 25th, 2009
at 11:30 pm #
This article is amazing, Paul! Love me some optimized WordPress.
Posted on Dec 15th, 2009
at 12:00 pm #
Nice technique. Were you able to package it into wordpress plugin?
Posted on Dec 15th, 2009
at 10:47 pm #
@dave,
Thanks! I have not made time to compile in a plugin yet, but I need to. I’ll definitely post here when I get around to it.
Posted on Jan 9th, 2010
at 12:56 pm #
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??
Posted on Jan 10th, 2010
at 4:48 pm #
@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 =/
Posted on Mar 23rd, 2010
at 5:24 am #
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?
Posted on Mar 24th, 2010
at 4:00 pm #
@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.
Posted on Apr 19th, 2010
at 9:06 pm #
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!
Posted on Apr 20th, 2010
at 1:07 am #
@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.
Posted on Apr 20th, 2010
at 3:12 am #
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?
Posted on Apr 20th, 2010
at 8:34 am #
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.
Posted on Apr 22nd, 2010
at 2:24 am #
Ah. Does WP Super Cache do this also?