It just comes to my mind that I am writing posts about web site development issues only when something bothers me. Like the DNS problems with my ISP that I had in July this year.
It might not only be me who has noticed that many “Social Media Rich Web Sites” and blogs load very slowly. Even in a modern browser on a new computer.
The first guess is:
“It's all the widgets and external components they load.”
But it is not only how much you load. It is also about in what order you load it … and from what servers … So what do we usually have to deal with:
many images
various CSS style sheets
Javascript files for improved navigation and AJAX trickery within the site
Javascript widgets and iframes for interaction with other sites
Flash files
Java applets
… etc.
The browser has to request each file individually. Some files are cached in your browser and will be downloaded only once (if your web server is setup correctly).
Then there are other cases where your web server might have to wait for data from third party web sites before it can complete to build a dynamic web page and deliver it to the browser.
The richness of Web 2.0 doesn't make it necessarily easier to be a great webmaster. It's true that widgets can be dropped into a site and add substantial interactivity to it in matter of minutes, but optimizing a site for performance hasn't become much easier.
A lot of different elements to deal with.
Examples:
affiliate banners or affiliate data feeds
RSS news feeds
embedded video and audio content
Digg, Reddit, and other social media votes
Twitter, Facebook and Disqus widgets
User avatars like from myblogcatalog.com or gravatar.com
etc.
The list is really endless.
And last but not least the HTML part of the page itself (this one single file) could be already pretty big by itself. Or don't you have 20+ comments on your average blog post?
And don't forget, if you are running a content management system like a blog all this content is created on the fly out of a database. (Or are you using Wordpress Super Cache already — or whatever it is called.)
You will notice the longer you have been working on your website the slower it usually gets.
Time to speed up your web site again
As you can imagine this is an advanced topic for experienced webmasters!
But it is not too hard to master, because many of your competitors believe more widgets, more connectedness, more interactivity, more … of everything is better. You can judge your own site pretty good by comparing it to other sites in your field.
I'll keep the intro short and sweet.
Rule 1:
At first make sure your site is profitable. Profitable enough to pay for the effort of making your site load faster. And only tackle performance if it has become a problem of some kind. (Getting a faster server is as good as throwing more paid traffic to a low converting web site. It's a quick fix. But you certainly can do much better.)
Rule 2:
Carefully evaluate the real benefit and trade-off of the various widgets that you have thrown onto your site. Do you really need them all? Especially those which reduce performance significantly. Throw out what you don't need.
Rule 3:
Optimize what is left.
As I have said in the introduction this is indeed an advanced topic. I cannot cover everything here. What I will do is give you a couple of idea and point you to some good resources and tools.
Here are just a couple of ideas:
Modern browsers support the parallel download of resources. I.e. Your CSS style sheet and the Javascript file can be downloaded simultaneously, but …
… but they also do get serialized under certain conditions, which means your browser waits and downloads file after file separately.
I followed the two suggestions about serialization points of code in the video below. This took me about 5 minutes including testing and I could improved the average loading time of this site by 44%! This is not bad.
All I needed to do was to change the order in which I load external resources on this blog.
reduce the size of your HTML, CSS, Javascript source file
merge separate source files into one
enable your web server to use GIZIP compression
load images, scripts, style sheets from a server with a different host name. Make sure this host name doesn't use cookies!
always use tools to measure your progress and document each change
That are just a couple of advanced tips that you or your webmaster should take a look at some point as soon as long loading time ruins user experience and cost you revenue.
But my initial warning here again: Make your web site profitable first!
http://developer.yahoo.com/yslow/ (↑) which is a Firefox/Firebug Add-on that analyzes web pages and suggests ways to improve their performance, based on a set of rules for high performance web pages.
How To Speed Up Your Website [advanced topic]
[…] One more tip that I simply can't miss. (*) “5 Plugins To Make Your Wordpress Blog Blazing Fast” by Darren Rowse and (*) “How To Speed Up Your Website” by John W. Furst […]
Weblog: E-Biz Booster Blog Tracked: Oct 23, 04:11
Comments
That resource page at Google is "gold." Thanks a lot. But I wish there were one simple document that describes step by step what to do.
http://blog.fcon21.biz/comment.php?type=trackback&entry_id=271
[…] One more tip that I simply can't miss. (*) “5 Plugins To Make Your Wordpress Blog Blazing Fast” by Darren Rowse and (*) “How To Speed Up Your Website” by John W. Furst […]
Tracked: Oct 23, 04:11