WordPress: Combine CSS stylesheets for fewer HTTP requests

WordPress is my favourite blogging platform and CMS as you can guess from the types of posts you may have come across here. It’s amazing flexibility is due to the tremendous plugin contributions that WordPress fans have written. While adding plugins can definitely add a variety of functionality to your blog, however, this does not come without a cost. Here, I will show you one small technique you can employ to improve your WordPress website performance, specifically as it concerns CSS files.

Some WordPress plugins will make calls to their own external CSS stylesheets. These stylesheets are usually called for within the WordPress header. Now, as proper coding has probably taught you, external stylesheets are a good thing and you should avoid inline HTML styling. However, if you have ever run Firebug and YSlow for Firebug (both are Mozilla Firefox extensions) and are obsessed with website performance you will notice that reducing the number of HTTP requests is also a good thing. This is actually logical: if you reduce the number of files a browser has to download in order to view your website then you can increase page loading speed. Combine this with server-side compression and your web pages will feel like they are on steroids! You may be asking yourself, “How does this apply to plugins and does reducing the number of HTTP requests involve losing site functionality?” The answer, “[Wow! That was a long question!] No, you do not lose site functionality and you can see how below.”

The technique involved here is similar to the that of PHP Speedy (for which a WordPress plugin is also available), but with a bit of manual labour. Essentially, it involves combining the contents of your theme’s CSS stylesheet and your plugin’s CSS stylesheet into a single file. Now, you should be aware that doing this will increase the total size of your single CSS file, which may or may not be better served as separate file. Therefore, I would recommend that you only add   Furthermore, only try this technique with plugins that you do not forsee removing in the near future.

1. Open your plugin’s CSS stylesheet and your theme’s CSS stylesheet in your favourite text editor.
2. Copy and paste the contents of your plugin’s CSS file to your theme’s CSS file, preferably pasting at the bottom. If you are a stickler for organization you may want to mark the added CSS with some comments.
3. Save the updated CSS file and reupload it to your theme’s directory.
4. Open your plugin’s main PHP file in your favourite text editor.
5. Locate the line that calls for the plugin’s external CSS file and comment it out.
6. Save the updated PHP file and reupload it to your plugin’s directory.

The result is a theme that loads its own CSS and the CSS required for the plugin all from a single file. The plugin no longer calls for its own external CSS file, which eliminates another stylesheet reference in the header. That was pretty easy, wasn’t it? The concept is far from complicated. The only part that you may have to be careful with is the line you deactivate in the plugin’s PHP file. If your plugin breaks after doing this, it is likely that you did something incorrectly. Don’t sweat! Just go back into the plugin and activate the deactivated lines.

Test your website loading time to see whether a major difference exists between calls to combined or separate external CSS stylesheets.

NOTES:

• You should realize that plugin updates will reset all of the work you did above, so you will have to manually make the necessary changes every time an update overwrites the plugin’s PHP file.
• In the event that you are uncomfortable meddling with code and would rather have a plugin do it, then check out PHP Speedy for WordPress. PHP Speedy essentially does the same thing and even allows you to combine JS files.
• An interesting article on website optimization that you may find interesting is over at Sitepoint.com.