Home > Tutorials > Making Use of HTML > Speeding up Your Pages

Speeding it Up!

Life on the web is fast, and as a result - people want things now... so if your site takes over a minute to download, how many people do you think will wait that long? Not many! So what can you do to speed it up? Well, if you've never really paid much attention to the download speed of your site before, and you don't mind using HTML that wouldn't pass a test in a HTML validator - you can do quite a lot.

Take full control

The only way to ensure that your pages don't have unnecessary tags that can slow up your download time is to manually write (or polish) your own code. A lot of the early WYSIWYG editors had a habit of filling your pages with so much junk (for want of a better word) - that it was possible to save approximately 20% of the download time simply by removing it. If you use an editor to build you pages and you are familiar with HTML, then it is often a good idea to polish your pages by opening them up in a text editor like Notepad (but not Word) and remove all the extra tags in the page that are not really needed.

The Minimalist Approach

It is so easy to get carried away with a web page that you don't really stop to think if you are being efficient with your code. I have often seen pages (particularly those that make heavy use of font tags) that are filled with code that looks like it could serve a purpose, but could infact be written more efficiently without losing the overall desired effect. For example, the two pieces of code just below have the same effect, but just look at how much shorter the second more efficient use of the code is.

  • <font face="Verdana" size="2" color="red"><b>red</b></font><font face="Verdana" size="2"><b> and </b></font><font face="Verdana" size="2" color="blue"><b>blue</b></font>
  • red and blue

  • <b><font face=Verdana size=2><font color=red>red</font> and <font color=blue>blue</font></font></b>
  • red and blue

While this may seem to be an extreme example, this kind of code is commonly found in use by those new to HTML or those using a rather old WYSIWYG editor. While scanning your HTML code to check its effectiveness can be quite a chore, it can save anything up to 25% of your download time in particularly badly coded pages.

Don't Quote me on this...

You may or may not have noticed that I also removed the double quotes from the HTML in the efficiency example above. This was deliberate, because surprisingly you can remove a lot of HTML quotation marks from your code without having too much of an effect on your page.

The trick to making this kind of page optimisation is to know when you can get away with removing them. Basically, if the value of an attribute contains spaces, then you must use quotation marks. In general you do not have to use it for data without spaces in it, but doing so can cause problems with some of the older browsers, so if you know that a lot of the visitors to your site use old browsers then it is best to use them for data that uses more than alpha numerics, periods or hyphens.

If you are considering removing quotes from your HTML code then it is a good idea to be aware that XML (which is predicted to take over from HTML at some point in the future) requires that all tag attributes, including numeric values, require quotes.

Relatively speaking

You don't need to use absolute URLs for links to other pages on your site if all the pages are on the same server; this is just a waste of server space and your time! Use relative URLs whenever possible. Not only will this make your file size smaller and speed up your page download time, but it will also make it much easier to move your site to another server should ever you need to do so.

A waste of space

The final way that you can speed up your page is really only of use to people who hand code their pages and those who are able to follow their HTML without having it laid out in a way that is easy to read. Simply remove your white space so that your page is on a single line, if you do want to keep some readability to your code - use tabs rather than spaces to indent your code, this will keep your file size to a minimum.

Compressing your pages like this not only speeds up the download time of your page, but also makes it harder for other people to read your HTML code and so offers a little protection against those looking for a particular piece of code (but it will not stop anyone that is really determined to steal a snippet of HTML code from doing so). Compression however is not for everyone.


Noticed a problem or got a question or comment?


This site will look much better in a browser that supports web standards, but it is still accessible to any browser or Internet device.


About this Page

Author: Rosemarie Wise
Originally Published: Fri 15th Dec, 2000
Last Revised: Fri 7th Dec, 2001
URL: http://websiteowner.info/tutorials/html/speedpages.asp

Want to use this tutorial on your own site? Learn more...


The Web Site Owner's Resource © 2000-2007 Rosemarie Wise