5 HTML Tips to Create a Fast Loading Free Website

My HyperText Markup Language (HTML) skills are rusty for certain, but perhaps that qualifies me for this article. Back in the day when Friends was still on TV and AOL was sending out free coasters and mini-frisbees daily, I was creating websites to load on dial-up modems. As time went on, I had the nerve to think that there are plenty of people still out there with non-broadband (dial-up) connections and continued to design web sites based on that.

Finally, I gave up web design and development when quality of content started to get pushed to the side by quantity of content. Flash sites, lots of images, pop-ups, pop-unders, sliders, etc. Trust your quality content and you don’t need this fluff. Trust your content and you can make your website blazingly fast.

With a website that is hosted on a free service, faster is definitely better. Why? Because ‘free’ tends to attract a lot of people and the server has to dish out your page plus thousands of other peoples’ pages that aren’t optimized. It’s like trying to pass a convoy of Kenworths pullin’ logs with your Jimmy haulin’ hogs. But if you have a small Porsche, that gets a lot easier to do.

Here are some tips to trim the fat, in no particular order.

1. Use Tables Sparingly

Tables are a catch-22. In the beginning, they were used to lay out design as well as put content into table format. As the design layouts got more complex, the tables got bigger and nested deeper, and that always means a slow down on load time.

Cascading Style Sheets (CSS) came along and really helped the problem of using tables for layout. Unfortunately, the browser makers couldn’t seem to wrap their heads around the idea of standards – and still can’t. What looked great in CSS in Firefox looked like a dog’s breakfast in IE and possibly didn’t even render in Safari. Don’t get me started on IE5 on a Mac. I’m still in therapy over that.

Please only use tables to layout content that must be in a tabular format – like a price list or hockey stats. That reduces the number of tables, and depth of nesting, which means speedier load times. Learning CSS will make a big difference, if you must have a fancy layout.

2. Use HTML to Create Colour

Yep, I’m Canadian, so it is colour with a ‘u’ to me. I know HTML is America-centric so the attribute is ‘color’. Learn your hexidecimal color codes and use them to to liven up content instead of images.

Try adding the color attribute to your HTML elements to spice it up. This works especially well in tables, or the body tag, like such:

If you were a browser, would you be faster at loading a simple 7 characters of #FF00FF or a 10×10 pixel image of the colour fuschia a few thousand times? That’s a rhetorical question, you in the back row. Put your hand down.

3. Link To Scripts/Style Sheets

If you use a certain JavaScript (JS) or CSS repeatedly throughout your website, think about creating their own file and calling it, instead of putting it on every page. Since a browser tends to cache a file and call that file first before checking with the server, your browser will already have that script or CSS ready to use. That means less HyperText Transfer Protocol (HTTP) calls which means a faster loading page.

How to Call an External JavaScript: