Introduction

"We live only to discover beauty, all else is a form of waiting. Khalil Gibran", if you agree with this saying, then you are well aware of what it mean to minimize wait for your web audiences.Building an HTML page, adding images, CSS and JS has become piece of cake over last few years, but delivering these rich-contents with a Performance to client browser is still a daunting task. This narrow down check list will help you to review your web site to minimize download time.

Note: This article describes only Front-End engineering issues, No Programming/CGI scripting/Data Structure/Database/Multimedia optimization techniques are discussed in this article.

Background

Last year while working on WNetwork.com and Treehousetv.com, I decided to write down experiences I had in my last few years in web development as well as learning from many sources and trying to make a habit of applying them. I have compiled these notes with a hope that every reader will get at least one or two ideas from them.

Laying the Groundwork

In first section we will see Where time is spend, then in second section we would see Why and How that time can be minimized, and then in third section we would summarize some concepts and list tools.

SECTION A: Behind the Scene

SECTION B: Optimize the Load Time

SECTION C: Tools

SECTION A: Behind the Scene

This section describes about what happens in between, when user types WWW address and see complete web page before his/her eyes. This would give us an idea about Where time is spend and how to minimize it.

Please note: Above figure may seem complex but DNS look up normally takes less than a second, approx.: 100ms to 900ms. The detail is given to show a complete process.

Now let's get to the point:

SECTION B: Optimize the Load Time

Following guidelines are based on the collection of common knowledge and experience, and application may vary from situation to situation. I would suggest to Log current web site loading statistics and analyze with results after applying any guideline.

1. Reduce number of HTTP requests

Why?

Making a connection with the Web Server is a time and network resource consuming process (which involves software/hardware handshaking, data packet(s) transfer, data packet loss, resend, verification process and closing connection etc), and one of major time spend areas.

Even image files into one file wherever possible: Use background-image and background-position to display required "window" of image. (See example CSS-Sprites.html in AllInOne.zip)

Use Browser Cache:

On first visit, Browser have to download all resources, but on Second visit, why should not Browser get resources from Cache (previously loaded and saved resource - estimate is 50% to 60% of user Browsers are set to Cache). So optimize your pages to use Browser's Cache where ever possible.

Use of "Expires" header with future dates would save time on next visit. Browser would use cached version of object as long as it is not expired or deleted.For HTML pages:

What if some objects (JavaScript etc) are changed later?. Then try using file names like "JsFunc_5.2.3.js" for new versions (or reconfigure ETags).

Another thought: Don't cache HTML and cache every thing else. [you can simply rename object names (modify Urls) in HTML to force Browser to load newer version next time].

2. Proficient <HTML>

Why?

Generally, HTML takes only 20% of time while others (Scripts, CSS, Images) takes 80% of download time, which means we need to reduce size of HTML as well as "help" Browser to render it as quickly possible.

HTML is a master wrapper of all of objects and styles, and is essential for Browser to understand, unwrap and render it correctly. Because of poorly implemented X/HTML/CSS Standards and Browser wars, Browsers are build with two modes: Standard (Fast mode, Browser trusts HTML page developer), Quirk mode (Browser have to validate HTML/CSS, find and "forgive errors").

How?

Minimize Download Time:

Can page be reduced in size? User may like to spend 2 seconds for each of 5 pages instead of 10 sec for one page (i.e.: Split page into smaller pages and create links to other pages). On the other hand, user may like to read all at once, so better way could be middle of these two.

Eliminate unnecessary whitespace, unwanted/unoptimized tags and comments. Practically, spaces might by necessary for human readability and maintenance, then use some tools to remove unnecessary spaces just before moving files to production.

Faster Rendering:

Very often simple designs are the best. Google's home page is 6 KB and have very simple HTML, this will help Browser to parse and render fast.

Standard vs. Quirk mode, So let build a trust (that we are professional and follow standards) with the Browser to use optimized HTML parsing. To switch Browser to Standard mode use:

Move inline scripts and CSS to external file (Reduce the number of inline scripts i.e.: document.write();)

Follow this guideline: Browser get confused between rendering content, applying CSS and as well as running Script to alter layout, in this case Browser have to redraw/or halt content rendering. So using external files is better way.

Break this guideline: External files mean extra HTTP request and slow downloading. Small Inline scripts and CSS may be good for HOME page for faster downloading and fewer HTTP requests.

Chunk your content

Replace table based layout with div blocks or break tables into smaller tables. Browser could not render an element until its closing tag is not received. i.e. any object in big outer <table> could not be rendered until its </table> is not received.

3. Proficient <IMG>

Images are one of the big Time and Bandwidth consuming objects to download. Time saved in this regard will improve performance dramatically.

How?

Minimize the use of images.

Use CSS rollovers instead of Images in links. (See example RollOvers.html in AllInOne.zip)

Always specify WIDTH and HEIGHT parameters for all IMG. Even for smallest ones.

Carefully choose number of colors and then image format:GIF: works best for solid colors and sharp-edged transitions from one color to other, Maximum colors: 256.JPEG: works best for continuous gradations of many colors or grey tones.

When to use GIF examples below:

GIF

JPEGQuality: 10%

JPEGQuality: 60%

JPEGQuality: 100%

Bytes: 156

Bytes: 379

Bytes: 433

Bytes: 434

Colors: 2Bytes: 318

Bytes: 927

Bytes: 1,994

Bytes: 4,037

Colors: 17Bytes: 713

Bytes: 987

Bytes: 2,159

Bytes: 4,928

Colors: 3+1 (transparent)Bytes: 379

Bytes: 1,249

Bytes: 2,823

Bytes: 6,651

When to use JPEG examples below:

GIF

JPEGQuality: 10%

JPEGQuality: 60%

JPEGQuality: 100%

Colors: 256Bytes: 8,693

[x]Bytes: 4,370

Colors: 256Bytes: 6,952

Bytes: 863

Bytes: 1,962

[x]Bytes: 5,604

Please note: Different programs create different image sizes, I used Photoshop CS2, W100xH100 at 72dpi.

Avoid ANIMATED gifs and FLASH (because of long loading time and creates distractions.)

Design using nested tables instead of using cell merges and splits. Use separate table wherever possible.

Always give the width for each of cells in a table. Make sure that the total of cells in a row adds up to the table width. Use CSS table-layout:fixed (See example Table-ColGroup-2.html in AllInOne.zip) or use COLGROUP tags (See example Table-ColGroup-1.html in AllInOne.zip).

When using Width or Height less than 10px, then use 1x1.gif transparent image. (Netscape don't like measurement in percentage.)

5. Order of components in the page

CSS:

Place CSS on top of page inside HEAD, It helps Browser to know in the start about HOW to style and display content before having all content.

JavaScipt:

TOP of page (avoid): Only if JavaScript is required for page's initial display then keep it in the HEAD to be downloaded first, otherwise keep DHTML Script at the end of page.

BOTTOM of page (ideal): Place JavaScript at the bottom of page as much possible, because Browser may block rendering (or rerender) during downloading in hope of document.write() to induce HTML. Otherwise try to use DEFER attribute:

6. Reduce Request & Response Sizes

Why?

Generally, 80% to 90% time is spend in downloading HTML and other objects while 10% to 20% in rendering them, so minimizing the download time (by reducing content size) is key to get better performance. One of well supported method is to compress text-based files as gzip.

Most Browsers are capable of sending Accept-Encoding:gzip,deflate as part of their request, and in response, server can send Content-Encoding:gzip with compressed data.

HTTP compression tends to be more efficient on one large request than several small requests.

Browser Shots - See your site in various Browsers, (Linux, Mac, Windows)

Footnotes

Some experts claim, If your home page does not load within 8 seconds, as much as a third of your site visitors will get frustrated and leave. I hope that these guidelines and examples would help to quickly understand and apply improvements to your web development.

Share

About the Author

Assad Baig has been in Software Development since 1997, working for various Health Organizations, Media and Research Companies. Mainly worked on Microsoft Technologies and Development tools. He holds M.sc in Computer Science and MCSD.

Thanks for the effort you put into this. Any hints on simple statistical studies done related to these ideas? I do some of this already but not all of it. Would like to know relative payback if I tweak/change things around.

apart from the diagram at the top of the article, a lot of this information has already been disseminated by the likes of yahoo (see their performance blog) although the author did reference yslow (a yahoo plugin for firefox).

to me (imo), this is like taking someone else's good article from code project and sticking my name at the top of it, though in terms of the images and the work required to put together the article, I can't take away from the author.

short description from google:"The AJAX Libraries API is a content distribution network and loading architecture for the most popular open source JavaScript libraries. By using the google.load() method, your application has high speed, globaly available access to a growing list of the most popular JavaScript open source libraries."