Home | Toolshop | Guides | FAQ's | Inside |
Submit Corner Logo
Browse Submit Corner

Submit Corner : Guides : Bandwidth Guide : HTML Speed Tips

Toolshop

Assessment Tools
Keyword Thesaurus
Link Popularity Tracker
META Tag Generator
META Tag Scanner
Robot Generator
Submit Engine
Top Keywords
Word Tracker

Guides

META Tags
Description Tag
Keywords Tag
Revisit Tag
See Complete List

Search Engines
Google
Yahoo!
Overture
See Complete List

Site Improvement
Image Tags
Title Optimization
Effective META Tags
See Complete List

Software Packages
Ultimate Demon
SENuke XCr
See Complete List

Website Assessment
Editor's Viewpoint of Directories
Assess Your Site Indexing
Who's Linking To You
Competitor Identification

Bandwidth Conservation
Background Images
External Javascript
Optimize HTML
See Complete List

FAQ

Our Recommendations
Read FAQ

Webposition Gold - Download Now!

Inside Submit Corner

Advertise
Linking Info
Privacy Policy
Rave Reviews
Terms of Use

HTML Speed Tips
By Submit Corner
Tell a Friend About This Page

Overview: Speed up your web page load time with these speed loading techniques and tips

One of the most common tricks to shortening wait time is to change the order in which content loads. Instead of slashing out file size or bandwidth, many web designers can use additional HTML code to pre-define sizes of images and tables and cut out valuable wait time. Below, we present the most commonly used tips and suggestions that you can use to shorten the wait time for content to load.

Essentially, there are two areas where load time can be cut: Images and table layout. We deal with each of these areas below:

Speeding up Images

Defining Image Sizes
Because a browser cannot tell in advance what dimensions an image should be, web designers should indicate in the HTML the dimensions to use. This will allow a blank space to be allocated for the image while continuing to load the remainder of the page rather than waiting for the entire image to load. This technique is done by using the "width" and "height" tags in conjunction with the Image tag as shown below:

<image src="image.gif" width="X" height="Y">

Width = The horizontal width of the image in pixels
Height = The vertical width of the image in pixels
Using Interlaced GIF's
Interlaced GIF files have the advantage that they can begin to display even as they download. This helps give the effect that a web page is loading faster because it takes a shorter time to view. Despite this impression, the effect is actually opposite, most interlaced GIF files are about 10-15% larger than non-interlaced GIF's. To create interlaced gif's, check your graphic software options, most applications have an option to check off to enable your images to be interlaced.
Speeding up Tables

Creating Many Small Tables
Tables can be used to easily align and position elements on a web page, however, they cannot display any content embedded within the table until the close table tag is found. This means that each cell, each row, each sub-table cannot be viewed until the </table> tag has been found. This being the case, a lot of web designers may find it convenient to separate each row in a table into a separate table.

For example, let's assume a web page we are viewing has a large table that consists of 5 rows, each having 2 cells. Rather than having one large table, webmasters can cut valuable load time by slicing the table into five independent tables, each having one row (which consists of 2 cells each). This way, each table can load and be displayed rather than forcing users to wait until the entire page to load.

Sample Code Before Changes:
<table>
<tr><td>Cell 1, Row 1</td><td>Cell 2, Row 1</td></tr>
<tr><td>Cell 1, Row 2</td><td>Cell 2, Row 2</td></tr>
<tr><td>Cell 1, Row 3</td><td>Cell 2, Row 3</td></tr>
<tr><td>Cell 1, Row 4</td><td>Cell 2, Row 4</td></tr>
<tr><td>Cell 1, Row 5</td><td>Cell 2, Row 5</td></tr>
</table>

Sample Code After Changes:
<table><tr><td>Cell 1, Row 1</td><td>Cell 2, Row 1</td></tr></table>
<table><tr><td>Cell 1, Row 1</td><td>Cell 2, Row 1</td></tr></table>
<table><tr><td>Cell 1, Row 1</td><td>Cell 2, Row 1</td></tr></table>
<table><tr><td>Cell 1, Row 1</td><td>Cell 2, Row 1</td></tr></table>
<table><tr><td>Cell 1, Row 1</td><td>Cell 2, Row 1</td></tr></table>

Comments:
Notice that the HTML code changes very slightly such that there is only one row per table. This allows for speedier load time and offers code simplification as well.

Sponsored Links



Latest Headlines

All links open in a new window
View All Headlines

Searches for Holidays to Africa Overtake North America and Close Gap With Europe
Source: Film Imaging

Google-backed DMARC system aims to block phishers
Source: ZDNet UK

Book reviews: Google books
Source: ZDNet UK

Searches for Holidays to Africa Overtake North America and Close Gap With Europe
Source: DMN Final Cut Pro

Earthquakes, Demi Moore and ACTA drive Google searches
Source: Yahoo Philippines News

Stop poaching staff, Jobs told Google
Source: Cyber India Online

Google, Facebook, Twitter Execs Grilled By UK MPs On Privacy
Source: Yahoo! Finance

There are 23 additional news headlines. Click to View All Headlines

Copyright ©2000 - 2009 Wired 2000 Corporation
All Rights Reserved
Privacy | Terms of Use