"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.
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.
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:
{URL}s from all src={URL}, HEAD-LINK's href={URL} and CSS's url({URL}) tags and then sends separate request for each resource. background-image and background-position to display required "window" of image. (See example CSS-Sprites.html in AllInOne.zip) <html> <head> <title>Cache - Example</title> <meta http-equiv="Expires" content="Sat, 16 Jul 2016 18:45:00 GMT"> ..... </head> <body> ....... </body> </html> <html>For Images/CSS/JavaScripts, configure Web Server as follow:
mod_cache, mode_file_cache modules to configure caching. <html> <head> <title>No Cache - Example</title> <meta http-equiv="CACHE-CONTROL" content="NO-CACHE"> ..... </head> <body> ....... </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>DTD - Example</title> ..... </head> <body> ....... </body> </html>
document.write();)
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. <div>s and less <table>s. WIDTH and HEIGHT parameters for all IMG. Even for smallest ones. When to use GIF examples below: |
|||
| GIF | JPEG Quality: 10% |
JPEG Quality: 60% |
JPEG Quality: 100% |
 Bytes: 156 |
 Bytes: 379 |
 Bytes: 433 |
 Bytes: 434 |
 Colors: 2 Bytes: 318 |
 Bytes: 927 |
 Bytes: 1,994 |
 Bytes: 4,037 |
 Colors: 17 Bytes: 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 | JPEG Quality: 10% |
JPEG Quality: 60% |
JPEG Quality: 100% |
 Colors: 256 Bytes: 8,693 |
 [x] Bytes: 4,370 |
||
 Colors: 256 Bytes: 6,952 |
 Bytes: 863 |
 Bytes: 1,962 |
 [x] Bytes: 5,604 |
<div>s instead of <table>s, develop page in chunks (tables or div) instead of big outer table. (See example in Table-vs-Div(3-Even Better).html in AllInOne.zip) 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). Width or Height less than 10px, then use 1x1.gif transparent image. (Netscape don't like measurement in percentage.) HEAD, It helps Browser to know in the start about HOW to style and display content before having all content. HEAD to be downloaded first, otherwise keep DHTML Script at the end of page. document.write() to induce HTML. Otherwise try to use DEFER attribute:
<html> <head> <title>CSS and JS defer - Example</title> ..... <link rel="stylesheet" type="text/css" href="rich-layout.css" media="screen"> <link rel="stylesheet" type="text/css" href="simple-layout.css" media="print"> <script type="text/vbscript" src="fval1.0.2.js" defer></script> </head> <body> ....... </body> </html>
Accept-Encoding:gzip,deflate as part of their request, and in response, server can send Content-Encoding:gzip with compressed data. 
mod_gzip, mod_deflate modules to configure compression. $import()) or load in background with some delay. <base href="http://www.domainname.com"> if absolute referencing required. .HTML..........Simplify design.
.HEAD
.LINK......CSS file(s) required for page appearance.
.SCRIPT....JS functions required during page load.
.BODY
...........Small chunks (DIVs, TABLEs), minimize images.
.SCRIPT....JS functions required after page load, validation etc.
.PRELOAD...If required, Pre load any images here.
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.
Lasted Updated: Monday, May 26, 2008.
| You must Sign In to use this message board. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
