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.
My name is Jean-Baptiste Jung and I'm the man behind Cats Who Code. I started to use the Internet back in 1998 and started to create websites three years laters in 2001.
51 Comments
Nice post Jean, I am familiar with most methods but I did not realize Minify was that good!
Another cache plugin for wordpress, that I currently use and would recommend, is: W3 Total Cache
@Liam McCabe : Never heard of this plugin, I’ll give a try
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.
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!
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).
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.
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.
what about WP Super Cache? i thought it is the best
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.
With w3 total cache plugin you solve 70% of the speed problems.
The rest is, in my opinion, server side and media files problem.
Nice post.
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.
Very nice post. Tks.
Guuu~ I did recommend you the W3 Total Cache plugin on Twitter, now I feel ignored. :/
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.
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..!
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
Eugen R : I get something like 50 replies to this tweet so obviously I forgot some of them. My apologies for that.
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.
“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.
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 ?
This is something else I realize would be a problem. One you minify a CSS or JS is not longer human readable.
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!
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
) 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% 
)
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)
Nice list. Never heard of minify before so will give it a go. Thanks.
Very good post. I have already implemented some on my blogs already but surely I would like to make use of minify.
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.
I have already implemented some on my blogs already but surely I would like to make use of minify. I will try it soon.
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.
Thats funny the post image has a wire pinched in the metal, unpinch that wire blogs will load faster lol, just kidding great post JB
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.
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.
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.
very good nice post
Great post. I just installed minify and I can already see an improvement. Excellent plugin indeed.
there’s a plugin for wordpress : WP-Minify
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
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…
@Mike : Thanks for the input. The blog receive a lot more visits than it used to be, so I think I have to change my hosting
Great article!
I will keep these tips in mind once I shift to a self hosted wordpress blog.
Thanks for sharing.
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
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!
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.
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
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.
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
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!
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.
Great Post. BTW just for information – Photobucket offers only 500MB storage and 10GB is the bandwidth offered per month. Please correct that.
i am also facing slow loading of my blog but i think Minify will work for me…i will try to install it.
Thanks for the info
Nice Post Jean
8 Trackbacks
[...] How to speed up your blog [...]
[...] screenshot (preso da qui) mostrato in alto dimostra palesemente come lavora [...]
[...] du kan göra för att minska din bloggs laddnings tid. Hos Cats Who Codes hittade jag artikeln How to speed up your blog loading time där de går igenom fem olika saker du bör tänka [...]
[...] Este post é uma leitura e adaptação do post original do CatsWhoCode que você confere aqui [...]
[...] How to speed up your blog loading time Visit the Article [...]
[...] Cats Who Code comentan How to speed up your blog loading time, una serie de trucos para acelerar vuestro [...]
[...] I wrote a post about speeding up your blog, due to the high traffic Cats Who Code was desperatly slow. At the time, I was hosted at WpWebHost, [...]
[...] How to speed up your blog loading time [en] [...]