Do you like to wait for a website to load? No and neither do your visitor like it. Here are some tips that will help you make your website faster

Use Divs instead of Tables for your website layout

• If you have a table based layout, then nothing will appear in the browser until the entire table is downloaded and rendered. An this may be very frustrating for the users.
• Generally browsers read the through the tables twice. Once for the table structure and another time to fetch its content.
• Table layout stored in each HTML page has to be downloaded each time a fresh page loads, but if you have a div based layout. You can store all the designing code in an external stylesheet. Which the browser can put in its cache.
• CSS probably requires less code that complex table structure.

Write smart HTML code

The un-smart way is:

<p class=”para”>This is a paragraph</p>
<p class=”para”>This is a paragraph</p>
<p class=”para”>This is a paragraph</p>

But smart will write it as:
<div class=”para”>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</div>

The point is there is no sense in repeating the same style class individually for each and every paragraph. This may not look that significant. But believe me by doing this you can easily wipe off 15% – 20% of unnecessary code.

Use shorthand CSS properties

Use CSS shorthand properties like

Use margin: 10px 3px 15px 5px (top, right, bottom, left)

Instead of

margin-top: 10px
margin-right: 3px
margin-bottom: 15px
margin-left: 5px

Remove unnecessary white space

Many may not know that every single white consumes one bite. This may not sound like a much of a concern, but it all adds up. You may be able to save 10% of the total size.

You can do some server side scripting to wipe off all the white space from your html documents.

Put JS and CSS in external files

Always try and put JS and CSS into an external file.

Any external file is just called once by the browser and they cache it. Next even if the user navigates to another page, browser will fetch it from its own cache, making it very fast.

To place CSS in an external document use:

<link type=”text/css” rel=”stylesheet” href=”stylesheet.css” />

To place JavaScript in an external document use:

<script language=”JavaScript” src=”script.js” type=”text/javascript”></script>

Posted in Uncategorized | 2 Comments »