How to speed up your blog loading time

by Jean. 67 Comments -

Often in blogging, you hear: “Content is king”. This is true, but this isn’t the only factor of a quality blog. Design is one of those other factors, and so is loading time. In this article, let’s have a look at how you can easily speed up your blog.

Use a quality host

Maybe I’m stating the obvious, but don’t expect to get the speed of a Ferrari on a crappy shared host. When your blog is young, new, and receives only a few visits per hour, most web hosts are good. But the day your site becomes more popular, you’ll see it takes a while to load.

I remember when Cats Who Code were hosted at one.com, all was fine until I started to get more than 5000 unique visitors per day. Then, my blog loading time started to degrade. Most websites have to switch from a hosting plan to another, and some have to switch to a new host. I switched to WpWebHost and I’m happy with them. I’ve heard a lot of good things about HostGator as well so you might want to check them out.

Be careful with external requests

When your blog loads slowly, a definite question to ask yourself is, “Do I really need that stupid widget?” or “Is Google Adsense a good thing for my blog?” and so on. In fact, it is funny to see how many people are struggling with loading time when not thinking that maybe, the super widget you placed in your sidebar was a piece of crap.

Each widget like “Facebook fans”, “Latest Twitter entries”, advertisements such as Google Adsense and buttons like the well-known Digg button have to load content from other sites. By using these, you are making your site dependent on other sites. If you’re using a Digg button in your blog, and the whole Digg site is down, your blog will not load correctly.

Make use of caching

The first two tips I gave you should have already helped you a lot to get a quicker loading website; but, especially in case of high traffic websites, this may be not enough.

Caching is a popular technique that has proven great results. The following example features a very simple caching implementation:

<?php
// start the output buffer
ob_start(); ?>

//Your usual PHP script and HTML here ...

<?php
$cachefile = "cache/home.html";
// open the cache file "cache/home.html" for writing
$fp = fopen($cachefile, 'w');
// save the contents of output buffer to the file
fwrite($fp, ob_get_contents());
// close the file
fclose($fp);
// Send the output to the browser
ob_end_flush();
?>

Don’t hesitate to check out this interesting post if you want to learn more about caching.

If you’re running a WordPress blog, a very handy plugin is Wp Super Cache. Easy to install and configure, Wp Super Cache will create static versions of your WordPress blog pages so it can load quicker.
It’s a must have for all blogs with lots of traffic.

Minify is your friend

Minify is a PHP5 app that combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers. Take a look at the following screenshot to see how helpful Minify is:

The stats above are from a brief walkthrough which shows how easy it is to set up Minify on an existing site. It eliminated 5 HTTP requests and reduced JS/CSS bandwidth by 70%.

To install minify on your website or blog, Download it and unzip the files to a new directory.
Copy the min directory directly into your document root, and you’re done!

Free, easy to install, and extremely powerful, Minify is a real life saver for me and I recommend it to any traffic website owner.

Store media elsewhere

When a site is popular, it tends to use lots of bandwidth. For exemple, a basic blog post with images can eat up to 2GB of bandwidth after making Digg front page, as my highly controversial anti-IE post did a while ago.

To reduce bandwidth usage and consequently make your website load a lot faster, the solution chosen by many highly popular sites is to store media on other servers.

Many services are allowing you to upload your media on their servers. The following list are the most popular sites for storing you website media:
Amazon S3 : Premium service, cost of 15 cents per GB of storage, and 20 cents per GB transfer.
Flickr : Provides both free/limited account and pro account, for $25/year.
Photobucket : provides a free account which let you store up to 10 GB. Paid account cost $25/year.
ImageShack : Storage unlimited, but bandwidth transfer is limited to 100 Mo/hour.

Additional good practices

Above, I have listed my favorite tips to reduce loading time. Those tips are efficient and if you apply them, there’s no doubt that you’ll see a strong loading speed improvement. But there’s many additional tips that you can use to significantly improve your site performance.

For example, I recently heard that you shouldn’t use the @import CSS directive in order to limit extra loading time.
Another thing you should be interested in is how to compress CSS files with PHP, a very nice way to save bandwidth.

Any other tip you’d like to share? Feel free to let me know in a comment.

Comments (67) - Leave yours

    • Khürt Williams said:

      Minify will do nothing for you at all unless you have complete control over the CSS or JavaScript (JS) – something which I do not have with most of the WordPress plug-in I use. I use Disqus as the comment system for my blog and after spending hours poking around inside PHP files I am not close to finding a way to remove the CSS and JS that that plug-in uses. Even if I did find it, as soon as that plug-in is updated my changes would be over written.

      Minify will work best for a WordPress site that uses NO plug-ins.

  1. 96th said:

    About One.com: I was getting 300 and it started down-timing, failing and other stuff… The support was so incompetent.

    ImageShack is slow and laggy.

    I knew most of them but I surely will make use of minify!

  2. Jason Stapels said:

    Two good tools you can use to help identify website bottlenecks are Y!Slow (a plugin for Firefox+Firebug) and Speed Tracer (a plugin for Chrome).

  3. Nithin Bekal said:

    I never realized that minify could make that much difference to bandwidth and number of requests. I’ve never really given much though to speeding up my own blog, but I have been really annoyed when waiting for all the widgets to load on some blogs. Maybe I should take a good look at how much time my site is taking to load.

  4. Design Informer said:

    Thanks for the post Jean. I will implement a few of these on my site that I haven’t already done. BTW, I agree with Liam, W3 Total Cache is an awesome plug-in. I’m currently using it as well on Design Informer.

      • Eric Shafer said:

        Total Cache just gives you a lot more control over what gets cached, where, how often, and it gives you options for flushing certain caches. You can optimize for a dedicated server, shared hosting, or for a CDN with your host, and you can choose the caching type.

  5. Dave Holowiski said:

    Good post. I had to remove some widgets a little while go because, as you said, they were causing my blog to load slowly… instant speed upgrade for free :) I also use WP-Supercache and it is great.
    I also like what you said about storing media elsewhere… this is especially important if you have audio or video, since most normal hosts aren’t able to handle such high bandwidth applications very well. I have been hosting my podcast on Blip.TV for free and I get a very speedy delivery when downloading episodes.

  6. Eric B. said:

    Just what I was looking for! I already use WP Super Cache, and was looking for something like minify. You wouldn’t believe how much extra space is taken up by unnecessary comments and whitespace. I already minify my CSS files, but this will be even more helpful. Thanks!

    I know what you mean about choosing a good host. I used to use Just Host, and it would go down often, and it would get quite slow when I got more than 300 visitors a day.

  7. Mathdelane said:

    I’ve tried W3 Total Cache before and it gave me a lot of headache so I’m not using a caching plugins at the moment. I just dread any caching plugins because of the too many trouble it brought in the past. While WP Super Cache works a bit, it doesn’t totally make the site load fast. I did so many tweaks before using it and YSlow doesn’t show any dramatic signs of improvement.

    Minify is something that I’ve heard of but I’ve never really tried it. However, I might give it a go and hopefully it won’t crash my site otherwise I wouldn’t have any second thoughts getting rid of it as well.

  8. Calidro said:

    I’m already using Minify in my site, the improvement has been notorious, but I have a question for the experts.

    Getting a list of the Minifyed scripts produced by the different plug-ins it’s easy but how to avoid the plug-in to reinsert in the header their own script and not to have it twice?

    Sorry for my poor English and hope you understand my point, and thank you for the post..!

  9. Kevin L said:

    Wow lots of good ideas here that are not the same old boring stuff. Thanks reducing load time is very key as people have very short attention spans these days.

    Thanks again

  10. Kai said:

    My friend has a very nice designed blog but it is extremely SLOW! As much as I like the design, I hate waiting for it to load, and I’m sure most readers would just hit the back button.

  11. tom said:

    “Be careful with external requests” and “Store media elsewhere” contradict each other. I think if its a file you are storing elsewhere to download ist ok but if you put images to external an load them in a popular article it will cost you less trouble with bandwith but maybe more with slowing down the loading of the page which is the topic of the article.

  12. DJ NightLife said:

    I’m not sure how useful can minify be… if you often modify your css file, if all comments and spaces are wiped, how can you understand yourself in an unreadble file ?

  13. snapone said:

    minify minmizes the request send to and from server, therefore it is very useful for loading-time maximization!!
    i use it and am very happy with it!
    cheers! great article!

  14. Michael Martin said:

    Just going to agree with a lot of the other commenters here that W3 Total Cache really rocks. It does the guts of the work for you (Gzip, minify etc.).

    The one feature I still have to play with (And definitely will :D ) is using it with Amazon Cloudfront for CDN delivery on static content. Curious to see how it works out! (And if Yslow will give me 100% :D )

  15. Артём Курапов said:

    You could have also mentioned not only minimizing file-requests for js/css, but also decreasing their size by using only needed blocks on page (lazy loading). Secondly, gzipping them. Thirdly, keeping css in head of html, while js is at the bottom (so that page requests load the page, not scripts that are not needed until styles are applied)

  16. Nicholas LeBlanc said:

    Some very good information here. One thing I still need to do is set up caching for my new blog. Minify is also a very nice script. Takes all the hard work out of compressing multiple JavaScript and CSS files into one.

  17. Andy Holiday said:

    I would also add that it is good to merge all of your javascript code into 1 file. Lookups for each separate file are the biggest overhead when people visit a site.

    Minify the one master javascript file and you are laughing. Server based GZIP is also a good option (I saved over 30% of the file sizes with this). You can use the OB_handler start for this and do it on a page by page basis via php.

  18. Ahmad Alfy said:

    I would recommend using 2 Firebug extensions :

    1) Page Speed ( from Google )
    This one is awesome… It minify scripts, css and compress images automatically.
    2) YSlow ( from Yahoo! ) A great plugin with awesome report.

  19. Harrison Stuart said:

    Loading time gives a big impact to all your visitors. Personally, I really don’t spend too much of my time waiting for a particular site to load. I simply just check out other sites, which I still find very useful for my research.

  20. Tech Maish said:

    WP-Total Cache and Super Cache plugin is helpful for increasing blog loading time.
    Now google also prefer those blogs which takes less time in loading. Now we have to concentrate on blog speed.

  21. Fingli said:

    I tried W3 Total Cache, it works as it should but all these cache-pluggins a useless in some way. For instance my site exceeded the server CPU time limit after installing W3 Total Cache, so I had to choose between saving traffic and saving CPU time :)

  22. Mike said:

    This is a pretty ironic post considering the load time for every page I’ve visited on your blog is excruciatingly slow or not available. I do like the design though…

  23. zack said:

    I believe choosing the good hosting provider is really important thing that one should consider because when the hosting company facing problem we will facing the same problem. I’ve lost my normal profit money from my blog because people cannot access my blog for a few weeks due to weak of the web hosting provider

  24. Ryan said:

    Although I might not have a need as of now, it’s nice to implement and test things like these before the need arises. I use WP-Super Cache on most of my WordPress sites, however Minify is new to me and looks like it could be a great help. Good looking out!

  25. carol burnett said:

    Oh thanks Jean and Liam for the cache plug-in tips. That’s one of my problem on my blog site, slow loading. So irritating! Thanks for these tips guys. Will try it now.

  26. Chris Guthrie said:

    Great post; however, I’m going to have to echo what other people have:

    W3 Total Cache is better than WP Super Cache. It includes all the functions you’ve described above without having to resort to extra plugins to enable minify etc.

    In any case thanks for the tips

    Chris Guthrie

  27. Goldberg said:

    That’s a common problem with one.com.In case you start getting large volumes of traffic their server start showing inconsistencies.
    Besides, ImageShack is the best place to keep your Images.I find it better than Photobucket.

  28. Andrew Rodgers said:

    Have you heard of this plugin? http://wordpress.org/extend/plugins/cdn-tools/
    It supports Rackspace’s cloudfiles, which is integrated with the LimeLight global CDN, if you have an image intensive blog, it could really speed things up!!
    It also automatically changes your jquery and other library requests to the Google hosted versions, which most users already have cached, speeding loading time even more…

    Andrew Rodgers

  29. Codesquid said:

    Seems no one has mentioned smush.it? I use this to compress all my images and it can REALLY help. The technique is lossless and can reduce some image sizes by up to 75% or more. If you haven’t tried it, you just upload your images, and it gives them back ‘smushed’. Well worth the effort!

  30. Chris Olbekson said:

    Thanks for the tips. I use HostGator for my WordPress sites and am very satisfied with the performance. Another thing that has helped improve my load times was going through all my plugins and makings sure that I wasn’t loading JQuery multiple times. I also combine all my javascript files into a global.js file and load it in my footer.

  31. Lexa said:

    I wasn’t happy with my blog speed too. I switched to another host, and things were getting better. But not great. This helped me a lot.

  32. Blog Rookie said:

    The irony of the page-load dilemma is that Google is placing more and more emphasis on page-load times in its algorithm, yet Adsense (as you point out) is a magnificent way to slow down loading times…

    I have just launched a new blog, so I haven’t bothered to install minify yet, but I use it on my other blogs. It works like a dream.

  33. Jennifer R said:

    Your article is really useful and also I’ve founded the other at: http://www.intenseblog.com/wordpress/optimize-wordpress-speed.html, it offer you many other great thing to improve the website speed.

  34. Jamie said:

    Very very helpful tips. When I first started blogging, I was struggling with my blog speed too but hosting my storage elsewhere and Minify helped a great deal.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!