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.
