Speeding Up WordPress With If Statements

Speeding up WordPress has just got easier; using PHP’s if statements you can only load the stuff you need.

When building ShiftNews, one thing we were always vary wary of was the effect on load time stuff would have. That meant sprites, not making too many database calls, that kind of thing. And then Alex C split the CSS file in two (just about in two anyway) and put half of it in single.css and the rest in style.css. The single.css file only gets loaded on posts and pages. In a moment the loading time of the homepage’s stylesheet was (just about) halved. Pretty neat. Good news is you can do it too!

Choosing what you need

Choosing which bits you need is probably the hardest bit (and it’s not too hard either!). Obviously you’ll need to keep the barebones layout in the style.css, but things like comment styling, post styles (perhaps you’ve got a custom post layout grid), list styling, blockquotes and the like can go into a new file.

What if…

Next stage is to include the two stylesheets. Open up your header and add the following (or something like):

<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" /> <?php if ( is_singular() || is_404() || is_search() || is_archive() ) { ?> <link href="<?php bloginfo('template_url'); ?>/css/single.css" rel="stylesheet" type="text/css" /> <? } else {} ?>

That’s stylesheets done. We can now move onto plugins.

Loading plugins conditionally

Whilst we can’t (easily) load the whole plugin conditionally, it is possible to stop plugins loading additional stylesheets and the like when you don’t want them. For example, Yoast wrote up how to stop lightbox or thickbox loading when he didn’t want them in this post. For others largely the same principal applies as stylesheets – if this kind of page then do this, otherwise, do this:

Do this regardless. <?php if ( is_singular() || is_404() || is_search() || is_archive() ) { ?> But if it's any of the types of pages listed above then do this. <? } else {} ?>

By doing this you can very quickly get rid of all the stuff you don’t need.

Loading the lot together

That’s all very well, you say, but you’re just creating additional stylesheets for yourself. Not so if you combine them all with the excellent Minify. That way you just have one file, regardless; on certain pages you’d just add the extra stylesheets to the Minified file.

I hope this has enlightened you to the possibilities of reducing the amount of stuff you need to load with each page. Now go and implement!


2 Responses

Comments

  • While using techniques such as this (the if statement) is very useful, I’m not convinced by the example you use.

    Read any modern post on optimising website performance. You won’t find them talking about saving 10KB by using a technique such as this. Instead you’ll find them talking about reducing the number of http requests which has a bigger hit on load time.

    So although ShiftNews is making the page slightly smaller on the home page, it’s probably making it SLOWER on posts (by increasing the http requests).

    • Alex Denning says:

      Sure, but as I point out, you can compress them both into one file by Minifying, something that is recommended in the documentation.