Website performance has recently been in the spotlight once more. In fact, it should never be out of the spotlight if you want to keep your customers happy. This site is no stranger to bad performance. It’s a typical WordPress problem. You’ve got a nice blog and install a few plugins and before you know it, your site needs 20 JavaScript files and even more CSS files. But how to avoid this?
I’m going to warn you before you read on, this post does not have the definitive answer, just a few ideas that, I hope, will stimulate some needed discussion.
Before you get started, one of the best and also longest running tools to analyze your website is
YSlow, a Firebug plugin by Yahoo!. It’s the tool by the guys who wrote the book on website performance, so they know their stuff.
If you ran a YSlow analysis against a typical WordPress blog, you’ll probably be very surprised. But not in a good way. While WordPress and its themes are known for performing great on search engine optimization, no one is really working on performance.
A typical WordPress installation with a few plugins installed will almost always perform bad at the most important performance characteristic: make as few HTTP calls as possible. 20 JavaScript files, 25 CSS files, a few Ajax calls for widgets. It gets ugly very quickly.
The most obvious solution is to combine those files. This document is a great introduction on how you can get started. It’s focused on JavaScript, but you can do something similar with CSS too. And while you’re optimizing your CSS, you might give csscaffold a try, it’s great little library for reducing lines of CSS.
If you want a plugin for that, there actually are two: WP JS and WP CSS. Both offer an easy way to combine and minify a list of files. Those plugins also allow you to fine-tune which JS and CSS is included on which page. This is great if you need specific files only on one or a few posts (for instance Google Maps).
There still is a hole in that theory though. Many WordPress plugins dynamically include their files from within the theme functions. So you can’t really extract the files and include them in a new one.
I’ve done a little research, but haven’t really figured out a solution. The right way to include JS is by using the wp_enqueue_script function. But the documentation doesn’t really explain where the JS files are actually outputted to the page. This would be the perfect location to put a combination function.
To be continued.