Falcon1986-Online

Home of a med student who likes to manage websites and talk tech!

WordPress: Combine CSS stylesheets for fewer HTTP requests

with 17 comments

Cascading Stylesheets

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.

Written by falcon1986

20 March, 2009 at 6:59 PM

Posted in Wordpress

Tagged with , , , ,

17 Responses

Subscribe to comments with RSS.

  1. Highly impressed, found your post on Yahoo!.Glad I finally tested it out. Not sure if its my Firefox browser,but sometimes when I visit your site, the fonts are really small? Anyway, love your page and will return.Bye

    Sydney Monrroy

    20 January, 2010 at 2:22 PM

  2. Interesting, never thought of it like that

    Brianna

    22 January, 2010 at 8:38 PM

  3. Nice post mate

    Latisha

    27 January, 2010 at 12:45 PM

  4. what a great site and informative posts, I will add a backlink and bookmark your site. Keep up the good work!

    online stock trading

    7 February, 2010 at 1:30 PM

  5. I am working on optimizing the load time on my new blog and this might really help me out.
    Never thought of the option to combine theme and plugin css file myself.

    Thx for the idea.

    Ferie Blog

    23 July, 2010 at 7:51 AM

  6. You’re welcome! And thanks for the kind words.

    falcon1986

    14 August, 2010 at 3:31 PM

  7. We have the same problem on our site: too many requests due to the many plugins. We’re going to merge them as suggested as I don’t really see another way around!

    Thanks for the advice!

    A web designer from ireland

    22 September, 2010 at 8:28 AM

  8. This only works until a plugin update comes along, then you have to do it all again.

    Frost

    4 October, 2010 at 9:31 AM

    • Or, you could just skip updating the plugin. One doesn’t always have to do so… :)

      Nabil

      25 November, 2010 at 7:00 AM

  9. @Frost: While this method does the combination the manual way, it is primary meant to demonstrate a concept behind website optimization. There are quite a few WordPress plugins that will do this automatically; you just have to browse WordPress’ plugin repository.

    @Nabil: You should always try to keep your plugins updated, unless there is good reason not to update. Updates sometimes fix critical security holes which you should apply or risk leaving your site vulnerable to those with nefarious intentions.

    falcon1986

    25 November, 2010 at 6:51 PM

  10. I seriously need some help with this… I want to increase my page speed by at least 1.5 seconds… If you guys help me with my site i’ll help you with yours.

    Petto

    2 April, 2011 at 10:15 PM

    • What have you already done to speed things up? If the website you have in mind is the one linked to in your profile, then that definitely needs some work. I counted over 15 separate CSS files and 20 separate JS files trying to load in the header at alone, and that does not even include inline scripts.

      falcon1986

      4 April, 2011 at 11:05 AM

  11. Great information and easy to follow. I implemented this today along with W3TC. Brought the time to load from 30 secs to about 5 secs, raised my Yslow grade from ‘major Fail’ to a B sometimes a C.

    Thanks for the information.

    Scarab

    3 April, 2011 at 10:17 PM

    • Wonderful! W3TC has built-in support for combining and minifying Javascript and CSS files. However, this has to be implemented manually and I have found that you have to be careful of what you include because some things can break.

      falcon1986

      4 April, 2011 at 11:04 AM

  12. Hi, this was very informative. I see it is practical but, my, when i tried a manual compression / and minify, my website (google nzanji) theme git distorted. everything got alligned to the left. WP Minify has a simmilar effect. Could someone advise based on the Source file what I should do to reduce load time.

    ntula sikombe

    26 April, 2011 at 7:35 AM

    • Wow! Your landing page header alone is very busy with referenced and inline CSS/Javascript. Took me about a full minute just for everything to load. Might be a problem with your website host not being able to deliver sufficient server/bandwidth resources, but you should only proceed to investigate that after you’ve dealt with your site’s own optimization.

      My first suggestion would be to review your existing plugins and remove those that you really do not need. You don’t need plugins just to display social networking bookmark links; these can be added manually if you have the time. After uninstalling the ones that you don’t need, search for alternative plugins that have the features combined or are better optimized for performance and replace the old ones. Make sure you remove unnecessary plugins – don’t just disable them. For plugins you want to keep, check to see if they are loading any CSS or Javascript onto your pages. If they are, merge the CSS or Javascript into your theme’s version and disable the plugin’s call for external files.

      The reason your page layout is getting distorted is probably as a result of code stripping (which can occur when you apply very aggressive “minification”) or the files are being loaded out of order. Remember, sometimes CSS must be loaded before Javascript, and sometimes multiple Javascript files must be loaded in a particular sequence that reflects dependencies. Automated minifying plugins do not always recognize this order, so what they output can result in messed up pages. You should try to determine your theme’s order of calling for different files, then work on combining in that order.

      Essentially, it’s better to optimize with a little than to optimize with a lot. Strip down as much as you can then optimize what you have left. And don’t let your existing theme be your limiting factor. Sometimes, switching to a different theme that is better coded can help a lot.

      falcon1986

      28 April, 2011 at 9:47 AM

  13. I looked into PHPspeedy but it prevented a wordpress site version 3.1.1 from loading.
    All that could be seen was a white page! Needless to say we deleted the plugin.

    Couldnt see an alternative to combine css and JS


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: