How to reduce HTTP requests for your WordPress site

High Speed WebsitesThe web is sort of a reversed highway: you get tickets for going too slow and bonus points for speeding. Whether you’re “just” a blogger or you have an e-commerce site, your site needs to be fast. We’ve written about what to do to speed up Magento before, and I’ve mentioned caching for WordPress more than once, but there’s more.

One of the things I notice very often when performing a site analysis is that sites are loading way too much external files. Reducing the number of files needed to load your site, thereby reducing the number of HTTP requests, makes your site load faster. Faster loading sites have a better user experience, and it’s also a ranking factor these days. So, it’s clear, when you can, you should reduce the number of HTTP requests.

There’s usually three parts to this play:

  • Reduce the number of JavaScript files
  • Reduce the number of CSS files
  • Reduce the number of images

Luckily, Frederick has made a large portion of this very easy in W3 Total Cache, allowing us to tackle 1 & 2 in one fell swoop. But first, let me give you a brief intro into “browser pipelining”.

Browser pipelining and why reducing HTTP requests helps

If you web page consists of a HTML file, 3 CSS files, 5 JavaScript files and 10 images, a reasonable amount, it requires a total of 19 files to be loaded. Originally, browsers would load these one after the other. These days, most browsers will download 4 to 8 files at the same time, this is called “pipelining“. If we take a maximum of 8 requests (which is pretty high) to the same domain at the same time, it would still require 3 batches to load.

Especially for CSS files and JavaScript files that are loaded in the <head> section of your site, that’s an issue: the browser can’t start rendering until it has all the files that “block” it from rendering. So we actually need to do two things: combine these files and reduce the number of requests and then move all the files that shouldn’t be blocking the page load out of the <head> section and into the body.

This means that for instance a JavaScript that adds some minor functionality to your site’s footer could easily be loaded in the last bit of your HTML, so it doesn’t block a browser from starting to render your page. This doesn’t impact your actual load time, but it does highly impact your perceived load time.

Reducing the number of files to load does help your actual load time: it makes your site faster.

Reducing number of javascript & CSS files loaded

Install W3 Total Cache, and then go to the “Minify” page in it settings screen. On there, scroll down a bit, and you should see two sections “JavaScript” and, right below it, “Cascading Style Sheets”. In there, you can add your respective JS and CSS files, it’ll look something like this:

JavaScript Minification in W3 Total Cache

If you’ve added all your CSS and JS file, W3TC will combine these files into one and minify them, meaning it will remove comments, spacing and other unneeded stuff. So you could have 5 js files and combine them into one, effectively saving 4 HTTP requests. As you can see, this is not hard to do, so there’s really no excuse for not doing it.

Reducing the number of images

If you have a complicated theme, your theme might be using a lot of background images. I know this site does. There’s a way to make all these images load as one file though, through a process called CSS spriting. Explaining the full process and history is too long a story for this post, if you’re interested, this article on A List Apart is very good read.

In short: all those background images are combined into one background image. For example, see the sprite we use for social icons on yoast.com:

Social Icons Sprite

Now this isn’t an easy thing to do, and if you’re no developer you should really hire one to do this for you. If you know a thing or two about development, you might find SpriteMe, a service / bookmarklet by Steve Souders a very useful tool.

Another nice step is to prevent images that are not currently visible to the visitor of your website (because they’re below his / her fold, or in web designer speak “outside the viewport”) from loading. A jQuery plugin called Lazy Load will help you do this, it’ll automatically load images as the visitor scrolls down and the images are visible to him.

Bonus tip: use a CDN

One of the reasons my site is so fast is because I have not only made a sprite out of all those images, they’re actually loaded from a Content Delivery Network, or CDN. A CDN is a group of servers around the world, optimized for fast delivery of static files and positioned to be as close as possible to your site’s visitors.

The benefit from this is twofold: first of all, as said, those servers are faster and closer to your visitors. Second, they’re also usually on another host, like cdn.yoast.com in my own example. This means your browser will open 8 requests to yoast.com and 8 requests to cdn.yoast.com at the same time. Allowing it to load even more at the same time. The smart among you will now think: “hey, what if I would use 2 hostnames for my CDN, or 3″. Good thinking. W3 Total Cache has full support for that too, in fact, it makes using a CDN ridiculously easy.

I use the Level3 CDN (aff), provided by VPS.net, which has been very good for me the last few months and is reasonably priced.

Conclusion: reduce those HTTP requests

As you can see, some of these steps are pretty easy. That means there’s no good excuse for you not to take them. Just do it, make your site faster and your visitors happier!

Photo from Shutterstock.

Tags: , , ,


Yoast.com runs on the Genesis Framework

Genesis theme frameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides you with the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Read our Genesis review or get Genesis now!

41 Responses

  1. YousafBy Yousaf on 1 January, 2011

    Hi Joost,

    CDNs can deliver the data faster and you have the advantage of parallel downloading but then the number of HTTP requests, round-trip times and DNS lookups go up as well if the resources are on a different hostname.

    • Joost de ValkBy Joost de Valk on 1 January, 2011

      There’s one extra DNS lookup per CDN host, there are not any more HTTP requests or round trips.

      • YousafBy Yousaf on 1 January, 2011

        The scenario I was pointing out was when people use more than 1 CDNs on different hostnames.

        i.e if you were to host css/js files on cdn.yoast.com
        and then getting jquery from google code.

        Yours looks good though :)

        ClientConnected: 20:37:16.764
        ClientBeginRequest: 20:37:18.429
        ClientDoneRequest: 20:37:18.429
        Gateway Determination: 0ms
        DNS Lookup: 41ms
        TCP/IP Connect: 35ms
        Round trip cost: 0.15s

  2. NabilBy Nabil on 1 January, 2011

    There’s a WordPress-plugin which can create CSS Sprite-images for you. Google cSprites.

    • RamoonusBy Ramoonus on 2 January, 2011

      This plugin hasn`t been updated for a year

      • Justin TadlockBy Justin Tadlock on 2 January, 2011

        Is there some reason that it should’ve been updated within the last year? Or, is there something that we should infer from the statement that it hasn’t been updated?

  3. Charles PayetBy Charles Payet on 2 January, 2011

    Joost, of the 3, is there 1 that makes the biggest difference, or are they roughly equal in terms of performance improvement? If my site currently takes 4-6 seconds to fully load in most browsers, if I were to utilize all 3 techniques, how much improvement in loading speed should I expect?

    Many thanks for such great plugins and a great blog!

    • André ScholtenBy André Scholten on 3 January, 2011

      All tips will reduce the amount of HTTP requests, there’s no winner on that point. But the subdomain tip has the advantage of allowing more pipelines to pull the data in.

      Look at it as a traffic congestion, what will work beter: reduce the amount of cars, creating extra lanes, or both ;)

  4. BradBy Brad on 2 January, 2011

    Getting a decent host would also be necessary. Using a shared host won’t get you the best of results due to the servers being so slow. Might wanna start of with a VPS and possibly use something like NGINX or Apache with Litespeed, and then cache static content with APC or eAcceleration… lot’s more can be done in my opinion.

    • BradBy Brad on 2 January, 2011

      i should also mention that i say this in the bigger light of things… not just with reducing http look up response time :P

  5. GregBy Greg on 2 January, 2011

    Interesting article. I went to the Lazy Load plugin page and got a notice that the plugin was not currently compatible with existing browsers. Are you using is successfully?

  6. Doug FrancisBy Doug Francis on 2 January, 2011

    Okay, time for an overhaul of the “cache” plug ins… with w3tc, should we consider disabling WP Super Cache plug-in?

    Is there an issue with too much cache? (pun) Thanks!

    • BradBy Brad on 2 January, 2011

      It’s one or the other. They both try to achieve the same task, but W3TC does a more thorough job once configured correctly and has vast more features. They can’t work together.

  7. Pushpendra PalBy Pushpendra Pal on 2 January, 2011

    Thanks for the tips.
    i’m using “Wpminify” wordpress plugin to do the same.

  8. RSBy RS on 2 January, 2011

    Joost,

    There’s another option you forgot to mention, and it’s one that both YSlow and Google Pagespeed suggest. Basically, offload static files to another hostname. This will help with load times since the browser will download the dynamic stuff from the main host, and at the same time can be off downloading images, js, css, etc from the other host.

    Biggest issue is, w3tc doesn’t work very reliably with this yet. Hopefully it will soon.

  9. Bill BennettBy Bill Bennett on 3 January, 2011

    I’ve had poor results from Cache programs when it comes to combining CSS and Javascript. They can REDUCE the number of files, but I can never get both down to just one minified file.

  10. Denise HamlinBy Denise Hamlin on 3 January, 2011

    The idea of reducing http requests is great. Implementation is not always as easy. I use one of the Builder iThemes and had serious problems with the minify function in W3TC. Seriously messed up my site, as do other plugins that minify js and css. (Given up on it for the time being). You definitely need more than an average knowledge of website development if you don’t want to mess up your site completely. (Been there, done that. And am so much wiser now!)

  11. Yuriy RomadinBy Yuriy Romadin on 3 January, 2011

    Good tips! Thanks! I’ll try this W3 Total Cache wordpress plugin on my blog

  12. Gert OomsBy Gert Ooms on 3 January, 2011

    Nice article, …

    Thanks for css sprite tip and the jQuery script. Now since the release of wordpress 3.0.4 I’m havin hugh problems with the minimize functionality of W3C. Any one else …

  13. Jonas LejonBy Jonas Lejon on 3 January, 2011

    Using a CDN doesn’t solve all your problem. I’ve have seen many people using CDN:s across the world and getting slower response times just by sending content back and forth the from the EU to the US (about 50 msec extra)

    • BradBy Brad on 5 January, 2011

      Depends on their CDN provider’s coverage. A good CDN should have Edge servers located across the globe (US, EU, Asia/Pacific) or else it will be pretty pointless. They should check out the big names like MaxCDN and Akamai. MaxCDN has an offer right now for 1TB of transfer for 40 bucks, which is really cheap…and they have a decent bit of worldwide coverage.

  14. Jonathan GoldfordBy Jonathan Goldford on 3 January, 2011

    We use W3 Total Cache for all of our clients. It is an amazing tool that speeds up our website and our clients’ websites an amazing amount. We cut the load time for our homepage from 3 seconds to .09 seconds just by implementing W3 Total Cache.

    We also just started using sprites and they definitely seem to be helpful.

    Thanks for the article. We will definitely look to use a CDN in the future.

  15. DangerMouseBy DangerMouse on 3 January, 2011

    What’s the impact of using a CDN on image SEO?

  16. John GarrettBy John Garrett on 3 January, 2011

    Whenever I’m using YSlow, it always recommends a CDN. Except I just don’t think my traffic justifies it at this point.

    I wonder what the recommended tipping point is (in daily/monthly pageviews) that would warrant the use of CDN?

    I have W3 Super cache installed, but I can see I haven’t configured it as fully as I should

    • Joost de ValkBy Joost de Valk on 3 January, 2011

      Hey John, if you ask me every site needs a CDN. The point is: if every page loads faster, even a few visitors will have a better experience, making them view more pages and more likely to promote your site.

      Since you pay a CDN by the bandwidth you use, other than your hosting package, there’s less cost for small sites too. So, in my opinion, you should “just” do it.

  17. RavBy Rav on 4 January, 2011

    For WordPress blogs Cloudflare cdn (free) + hyper cache plugin combination works great!. It reduced loading page a lot and protection from spammers.

  18. GarethBy Gareth on 4 January, 2011

    Read an interesting article yesterday, you can use Dropbox as a free CDN…but not tried it yet.

    • IshanBy Ishan on 5 January, 2011

      Gareth – That is correct, it is very easy to use Dropbox as a CDN. However, it should not be used that way. I wrote an article recently detailing that:
      Why Not to Use Dropbox as CDN for WordPress

      Instead, CloudFlare is a great option. Completely free.

      • MrGrooveBy MrGroove on 5 January, 2011

        For a small blog perhaps… there’s just something that feels wrong about giving them CloudFlare my DNS and running my traffic through their Proxy…. Almost feels as dirty as using Google DNS. ;)

        • IshanBy Ishan on 5 January, 2011

          I know it is quite unconventional. I have been running one of my websites through them since quite some time, and it just works perfectly.

        • Joost de ValkBy Joost de Valk on 5 January, 2011

          CloudFlare is actually a funny solution, giving “away” your DNS is not as bad as you’d think :)

    • MrGrooveBy MrGroove on 5 January, 2011

      Well don’t forget, one of the advantages of a CDN is last mile coverage / distributed servers serving out your content. Dropbox most likely is serving the data our of a data center in California so your not getting any of the last mile benefits that a CDN gives you.

  19. Rick AndersonBy Rick Anderson on 4 January, 2011

    I’ve had some real difficulties with making W3-total cache work, primarily because of java script issues. In particular Wishlist Member doesn’t seem to play well with it (even when all of the WLM scripts are excluded).

    However, one of my favorite things about the upcoming release of 3.1 is the wp_dequeue_script function. With that we’ll be able to fix the problem of unnecessary java script being added to our posts and pages. Which in turn will help reduce unnecessary http requests.

  20. SteveFreeBy SteveFree on 5 January, 2011

    Question for you Yoast – I’m getting ready to implement the Level 3 + W3Total Cache.

    I selected MIRROR and it then asks for the CNAME however I don’t see anything about login or creds so I’m not sure how Level 3 will get my data from my blog (CSS, JAVA, IMAGES etc..)… Do I need to FTP it all into Level 3 m anually or do they pull it from my blog?

    • Joost de ValkBy Joost de Valk on 5 January, 2011

      No it’ll just mirror. So if it get’s a request for cdn.example.com/image.jpg, and it doesn’t have that image yet, it will grab it from example.com/image.jpg. Each consecutive request for that image will get the one on the CDN, and the CDN will refresh it from your server from time to time. It’s the easiest way of setting up a CDN :)

      • stevefreeBy stevefree on 5 January, 2011

        And the CSS and Javascript is the same?

        Personally, when I compare Level 3 (from vps.net) with maxcdn, there is no comparison. Kinda like comparing David and Goliath. Just trying to confirm the process.

  21. D.K.By D.K. on 9 January, 2011

    Kudos Joost, another excellent post.

    Here’s another plugin that loads images as you scroll down the page, jQuery Image Lazy Load WP.

    We’re using it on a half-dozen sites running WP 3.0.4 and it works quite well.

  22. 256studioBy 256studio on 29 January, 2011

    After reading this article. I setup http://www.cloudflare.com/ and then moved to hard code all my header links and also I used Smash.it to shrink my images. I have noticed a 45% increase in speed of my site!!
    Thanks for all the great blogs!!
    256studio

Trackbacks