Creating webpages that load as fast as possible - there's a lot to it and I'll try to cover a few of the major topics here, starting with a brief look at the user experience considerations behind www.google.co.uk from a page loading point of view.

User experience in page loading

The holy grail of website loading is for the user to have the pages instantly available with no delay as soon as a link is clicked (or a page requested, depending on your approach but we're talking about the same thing here). This is a holy grail and can never happen*, because there will always be delays such as limitations of the broadband connection and time taken for the server to get the request and make a webpage out of it before sending it back to the user. When the webpage gets back to the users browser, there's another delay involved in actually translating that from 'computer-speak' (HTML) to 'human-speak' (visible text and images/video/whatever) before the webpage can be used and before the user actually sees anything.

As developers there's very little we can do about the users' broadband connection, but the server-side and user-side renderings are within range for optimising. I'll talk about this more in future postings I'm sure, but for now here's a brief mention on the user-side as this impacts the user experience much more where slideshows/portfolios and other non-text page elements are concerned.

Take a simple webpage like the Google homepage for instance - all browsers render this really fast but there's still several requests sent to the server before its all there. The text is collected first, followed by the images such as the Google logo and then the extras such as the script that makes the 'more' menu appear as a menu rather than a text link. 

Each one of these items is sent as a separate 'request' to the server and the server responds to each one with the appropriate content. The time taken for that request to appear to the user depends what it is - taking the example of an image, it'll take a finite amount of time for the image to download, proportional to the speed of the user's broadband connection but once downloaded the image appears instantly. Its now actually more common to see an image 'progressively' appear, where the browser show you pieces of the image before its downloaded the whole thing. This makes the experience better for the user, because you know something is actually happening.

Requests are generally sent to the server concurrently, so more than one thing downloads at a time and the whole thing is done in a few seconds. Good job too, because when visiting the Google homepage you generally go there when trying to find something and the thing you really want to do is type your search term in the box and get some results with the minimum of fuss. I've used the Google homepage as an example here because every aspect of it has been put through the wringer as far as optimisation is concerned and that's all well and good, but lets be honest there's not a whole lot going on on the Google homepage is there. 

In my next few postings, I'll talk about other aspects of webpage loading, site optimisation and other technical considerations that bring themselves to the fore when webpages get a bit more interactive than a few words and a simple text box.

* Technology advances all the time, browser and broadband speeds increase with every passing year and one day these things will happen so fast as to be imperceptible in the length of the delay, but there must always be a delay even if this is a few microseconds or even less.

Ben.

comments [0] permalink

Here's a video that never fails to make us laugh: What happens when you mix a flock of sheep, a lot of LEDs and a few farmers with too much time on their hands? This:

There's a High Quality version available on the main YouTube page which looks really good blown up full size on a 24" screen!

Location: YouTube
comments [0] permalink

Moral is high and laughter resounds in the Hathersage studio. It might possibly be due to the weather being glorious, but one might hope that we are all just in a good mood!

While making a few CSS amendments to our new site for IE6 I received an email from Si titled "Time Breakdown for a Web Designer"

I will let the image speak for itself in this case...

comments [0] permalink