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:
various CSS style sheets
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.
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
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.
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.)
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.
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:
… 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.