Modern websites necessarily make a lot of requests for resources back to the server.Â Through books like those by Steve Souders we've become increasingly aware that each of these requests causes a delay in whatever it is your user has requested being downloaded and displayed. If you don't have both of Steve's books, get them...and spend an hour or two going through his site...it's awesome stuff. The term commonly used for the various efforts to reduce the number of requests made to a server is HTTP Optimization.
This is a topic I've been investigating / playing with for quite a while (e.g., CSS Combiner / Minifier ASP.NET Control) and in fact one of the projects I worked on shortly before leaving the ASP.NET team morphed into the Sprite and Image Optimization Framework recently released as a preview by the ASP.NET team. What I wanted to do with this post wasn't to go over these techniques in any great detail...rather it's to cover some of the stuff I currently do when developing sites.
In short there's x techniques you can realistically use to reduce / improve the performance of a web page loading:
1. Make the server code run REALLY fast...either by buying big servers, writing really slick code or by caching everything so it basically works like a static (plain HTML) site...
2. Make your web page really plain...no CSS / JS / Images...just plain old HTML; single request is always quickest - this is of course not usually acceptable!
3. Radically reduce the number of requests made to the server.
4. Make each request deliver more content for less bandwidth.
Of these I'm going to take a closer look at the last two in more detail.
The very first thing you need to do when trying to work out how to fix page loading issues is to actually identify those issues!
I tend to use Firefox when I'm looking at these issues; mainly because it has an amazingly powerful tool in Firebug for debugging and investigating pretty much anything a web site does on the client.
One of the most useful tabs in Firebug is the Net tab...in the image below you can see the result when I ran it with the home page of the ASP.NET site with caching disabled. I'll use this page to point out some of the optimizations they've (recently!) made to improve loading times for the home page of the site.
What you can see in the image above is a bunch of rows containing GET and POST requests (we'll, only one POST to a tracking page). Each of these requests represents a single request back to the server. In fact if I roll my mouse over one of these rows I get more information which provides a legend for what each of the colors means:
I'll come back to this page in more detail later...
Another great tool for identifying issues with page loading is YSlow, in fact if you look at the Firebug page above you'll see that YSlow has it's own tab! What YSlow does is report on issues with your pages in a very direct way:
As you can see, YSlow gives a grade for a number of specific items which have proven to make a difference in page load time. Rolling over each one will tell you why they're important and give pointers. In fact, it even gives you links to tools which can help resolve these problems!
So, great...we can now see what problems we have...and even have a way to fix them. However, what it you could avoid them happening in the first place?
In part 2 of this post I'll show you what you can do (and what I actually do) to avoid these problems in the first place. I'll focus on using these techniques in Visual Studio and how you can easily incorporate some practices into your own development to get fast, fluid web pages...