Improve Load Time: Lets first ask the question, how important
is your "html load time"? An estimated, 7 billion dollars, are lost every year, from
websites that just don't load in a quick enough time. With the demand for exotic imagery,
are allways faced with this loadtime challenge. If your webpage takes longer then
45 seconds to load, you will loose many fast paced viewers and even some search engine robots
have a wate state. The real name of the game is "30 Seconds or Bust".
This article will show you 6 ways how to improve, webpage loadtime. Hopefully,
with a little focus you can achieve a 30 second or less, html loadtime.
1. HTML Errors: A very important aspect of programming
is that you write "error free code". Any HTML tags misplaced or open tags can
be very costly when considering loading a page. If you have multiple errors you
Make sure you proof read all your code, to always double check, for any errors.
Poorly written code can also cause a load factor. So always strive to learn better programming
technique. You will find that HTML is sometimes a very open structure, that there may be more
then one coding method that proves to be the fastest..
2. Elliminate White Space: Another drag on the servers is caused
from overextended white space. Computers like reading exact code, any spaces, skips or
blank lines can create a stressfull environment. So if you are hard pressed, to shorten your
webpage load time,
eliminate any extra white space and any "comment lines" when not needed.
3. Table-Layout = Fixed:
The Table-Layout method is a most important way of fast loading any html
content. We at Portal Depot use this method vigorously within our web pages.
When you setup your page architecture, you might have code that resembles
This table is considered a free floating system. Where the only stipulated width is for
the entire table. The individual columns will size according to the content
that is found within each td element or column. This table setup loads very slowly, even
if you were to put width attributes within each td element, it will still load sequentially.
However, the following code uses the style attribute "table-layout = fixed" to allow the
servers to load the table, as a total entity, in a fixed format.
<table width="90%" style="table-layout:fixed">
<col width="30%" /><col width="60%" /><col width="30%" />
You will notice that there are only two changes made, to the free floating
code, to make the fixed format code. The first change is to setup inline
style with the
table-layout:fixed attribute. And the second change is to set
the column width of each td element,
<col width="30%" /><col width="60%" /><col width="30%" />. However, both of these changes must
be incorporated to totally fix the table-layout. When you apply the fixed format to a table
the servers will load the entire table as a fixed table-layout, instead of free floating the
width sequentially, according to the amount of text written. This will
improve your html loadtime significantly. However to accomodate your website content
you might put in a separate table within each column and fix the table-layout,
of the table, within each column. Whatever your architecture might be the
"table-layout: fixed" method will certainly shorten html loadtime.
4. CSS to Minimize HTML Code:
Another way of saving html load time is by using CSS style, in the form of either
style sheets or header blocks. By incorporating CSS in header blocks, you
can eliminate recursive html attributes. Instead of inputing, font charcteristics, within
each html tag you could simply put any style attributes in a header style block and
apply it to all similiar html elements. This is of course the beuty of CSS style, so
you can set up font characteristics in one statement and have it applied to any and
all similiar html elements. You then can make changes to one statement and it will
be applied to the entire page.
In using this practice you will also lessen the amount of html code, displayed on document.
This will in turn shorten html loadtime.
One thing to remeber is that your page is made up of html code (in bytes), images
displayed, and once you get rid of any extraneous white space and comments, then you can focus
on optimizing your images.
5. Image Optimization:
There are three ways you can save HTML loadtime with images. The first is caching images.
You should allways keep in mind that any images loaded from one page will be cached
by your clients computer. So any further page viewing using these same images will
automatically be loaded from cache. So if
you think you are going to have a webpage loadtime problem, focus on reusing header images,
menu bars, footer images ... for each page.
The second way to shorten, image loadtimes, is by optimizing each image. This process will
lessen the amount of pixels used by each image. Of course you would have to decide if
an image needs top quality resolution or not. You can decrease the pixel size of an image
as much as 50, 60, even 70% without any critical distortion. On the front page of portaldepot.net we went from
42 seconds to 30 seconds by optimizing each image. It was a must to reach that 30 second or bust
goal. Image optimization is the easiest way to shorten your html loadtime, especially with
this image optimizer from DynamicDrive.com Image Optimizer
. The image optimizer app can be applied to jpg's, gif and npg images.
The third way to load your images faster is with image preloading programs, usually
and when you find this code you will have to experiment with your apps to meet qualifications.
6. PHP Include Files (For Reuse HTML):
PHP Include files are soon becomming a new web development craze. With these
on the include file to display the code. This method will shorten your html content saving valuable
html loadtime. But the real magnatism for this method occurs when you have code like a menu or
footer that is displayed on a multitude of pages. So if you decide to make any changes to the code
you just have to make the change to the PHP Include file. To get a full report on how
to make PHP Include files, for reuse html, check out our article at:
How to Make PHP Include Files For (Reuse HTML)
Check Your HTML Load Time: Here's a good link that thoroughly
checks, HTML loadtime, and also analyzes your pages for intrinsic disorder.