How to make HTML load Faster- speed tips

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:

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

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:

Cell 1, Row 1 Cell 2, Row 1
Cell 1, Row 2 Cell 2, Row 2
Cell 1, Row 3 Cell 2, Row 3
Cell 1, Row 4 Cell 2, Row 4
Cell 1, Row 5 Cell 2, Row 5

Sample Code After Changes:

Cell 1, Row 1 Cell 2, Row 1
Cell 1, Row 1 Cell 2, Row 1
Cell 1, Row 1 Cell 2, Row 1
Cell 1, Row 1 Cell 2, Row 1
Cell 1, Row 1 Cell 2, Row 1

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.

Leave a Reply

Your email address will not be published. Required fields are marked *