Optimizing Web Pages

Something had been nagging me for quite some time. The home page of my website took way too much time to download. And I am talking of a 100 Mbps broadband connection. Now if this was my take on the page, then the ordinary users’ reaction, with a standard 33.6 Kbps Dial-Up was definitely not going to be encouraging. So as soon as I got some time away from the client’s never ending modification requests ;). So I decided to get to the bottom of this and see if I was not being just paranoid. Here are some of the findings, (for obvious reasons I have removed the actual URLs in question)

test URL1

Download Times*
Connection Rate Download Time
14.4K 200.10 seconds
28.8K 105.35 seconds
33.6K 91.81 seconds
56K 59.33 seconds
ISDN 128K 25.52 seconds
T1 1.44Mbps 11.90 seconds
Comparing with some of our other websites,
test URL2

Download Times*
Connection Rate Download Time
14.4K 91.80 seconds
28.8K 50.80 seconds
33.6K 44.94 seconds
56K 30.89 seconds
ISDN 128K 16.26 seconds
T1 1.44Mbps 10.36 seconds

test URL3

Download Times*
Connection Rate Download Time
14.4K 137.93 seconds
28.8K 70.76 seconds
33.6K 61.17 seconds
56K 38.14 seconds
ISDN 128K 14.18 seconds
T1 1.44Mbps 4.52 seconds

It was time to get things in action. I dug up some material on the net. Most of the things I found were not news to me, and the rest seemed like plain common sense. And yet it was surprising how trying to meet impossible deadlines and keeping the clients happy, they had been conveniently forgotten, by me of course: P, during the development phase.

Well below is a small summary of the tips I found useful, followed by the respective links.

The basic idea is to
1) Reduce the number of bytes being transferred over the net
2) Reduce the number of individual HTTP requests per page load and
3) Increase the number of concurrent HTTP requests by spreading out content on multiple servers

• Page Layout and Size
o 30K – the ideal maximum size for your Web page,
o 12K the ideal maximum size for each image, sound file, or applet This includes animated images and anything downloaded with the page
o Use multiple pages Instead of one long page
o Use special effects sparingly Make sure that the site needs the effect you want. Whenever you add Java or JavaScript or other effects, it impacts the download time of your site.
o Use CSS for layouts instead of Nested tables - Normally, when a page loads the browser starts at the top of the HTML and loads it sequentially down the page. However, with nested tables, it has to find the end of the table before it can display the entire thing. Also, if you're trying to write valid XHTML, tables should not be used for layout at all. Tables are for tabular data (such as spreadsheets) not for layout. Instead you should use CSS for layout - this renders more quickly and creates valid XHTML.
o A table will load more quickly if each row is a separate table, because the browser would render the first table and then render the second.
• External Objects
o Use external stylesheets and Javascript files wherever possible. Since once they are downloaded, they will be cached by the browser, and the subsequent downloads will be much faster. For this, however, you must include the stylesheets and javascript files in the head part of the HTML page, instead of the body. Also, allow static images, stylesheets, and javascript to be unconditionally cached by the browser.
o Consider evenly spreading uncache-able objects over multiple hostnames, thereby allowing for more concurrent HTTP connections.
o Load fewer external objects. Due to request overhead, one bigger file just loads faster than two smaller ones half its size.
o Turn on HTTP keepalives for external objects
o Set an Expires header on everything you can, with a date days or even months into the future thereby reducing unnecessary HTTP requests for validating the cached content
• Using CSS effectively
o Use contextual selectors
Instead of assigning a value to each individual paragraph, we can nest them within a <div> tag and assign a value to this tag:
o Use shorthand CSS properties
You can use the following shorthand properties for the margin CSS command.
Use:
margin: 2px 1px 3px 4px (top, right, bottom, left)
...instead of
margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px
o Use relative call-ups
Try to avoid absolute call ups as they take up more space. An example of an absolute call up is: <a href="http://www.URL.com/filename.htm">. Much better would be code><a href="filename.htm">. But what if some files are in different folders to other ones? Use these shorthand properties:

• <a href="/"> - Calls up http://www.URL.com


• <a href="/filename.html"> - Calls up http://www.URL.com/filename.html



• <a href="/directory/filename.html"> - Calls up http://www.URL.com/directory/filename.html


• <a href="./"> - Calls up index.html within that directory


• <a href="../"> - Calls up index.html one directory above



• <a href="../filename.html"> - Calls up filename.html one directory above


• <a href="../../"> - Calls up index.html two directories above

o Remove unnecessary META tags and META content
Most META tags are pretty much unnecessary and don't achieve very much.
o Use / at the end of directory links
Don't do this: <a href="http://www.URL.com/directoryname">
Do this instead: <a href="http://www.URL.com/directoryname/">
The presence of the slash "\" at the end woluld tell the browser that the destination is a directory which, the browser would otherwise have to find out for itself.
• Optimize GIFs
o Make sure that only the relevant parts are in the image. Cropping can make your Web image smaller both in dimensions and download size.
o Saving a three color file as a 256-color indexed GIF will increase the size. When saving as a GIF, it's a good idea to convert the image first to Web colors (if you're using Photoshop, choose the image mode, indexed, and then choose Web colors). This will make sure that the colors won't dither on the Web. Then convert the image to the least number of colors it can use and still look correct.
o GIF images use an index of colors for the image, colors that are not used in the image, don't need to be included in the index.
• Remove Extra whitespaces
o Remove multiple carriage returns
o Close tags on the same line you open them on
o Keep related block items on the same line For example, paragraph tags or table cell tags should be on the same line as their contents,
o Indent using spaces And only use one space for each indent. You get the same effect, and use less whitespace.
• Use Google's Load Time Analyzer extension for Firefox from a realistic net connection to see a graphical timeline of what it is doing during a page load.

(..Excerpts from)

Webdesign/Speed
Webdesign/Optimizing Images
Musings
Webdesign/Tips