5 HTML Tips to Create a Fast Loading Free Website

html   5 HTML Tips to Create a Fast Loading Free WebsiteMy 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:

<body bgcolor=”#FF00FF”>

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:

<!–
<SCRIPT SRC=”my_script.js”>
</SCRIPT>
–>

Why did I put those comment tags around the call for the JavaScript? Because not every browser is set to read scripts. Adding the comment tags makes the browsers with scripting disabled just skip over it, instead of giving annoying error messages.

How to Call an External Cascading Style Sheet:

<link href=”my_style_sheet.css” rel=”stylesheet” type=”text/css”>

It’s that simple. The attribute href is where you set the location of your style sheet. The rest of the attributes tell the browser what that file is, so it knows what to do with it.

Some developers may use the @import method to call a stylesheet. In Internet Explorer, this is like having your <link> tag at the bottom of your file, causing it to load the whole page and THEN render the styles on it. Not good.

4. Combine Your Commonly Used Scripts in One File

Many web developers will use the same scripts over and over again. Perhaps there’s a clock script and a calendar script and maybe some sort of special effect script that they’ll use on every page. Instead of having 3 separate files, with 3 separate HTTP calls, put the scripts in one file and call it once. That cuts your HTTP calls by 66% and it gets cached as well. You speed demon, you! Before you raise your hand again, yes, you can do the same thing with CSS files.

5. Do Not Use HTML to Change the Size of Your Images

If you want to use an image that is 1000×1000 pixels on your web page, but you want it to be only 250×250 pixels, change it in an image editor. Some people will ‘shrink’ the image using HTML like such:

<img src=”BigPicture.jpg” height=”250″ width=”250″>

If that 1000×1000 pixel image is 2 MB in file size, resizing it with HTML doesn’t make the file size any smaller! In fact it may take longer to load, because now the browser has to put 10 pounds of poop in a 2 pound bag, so to speak. Not an easy task.

Hopefully these tips will help you. Give me a shoutback in the comments if you use them or have some other HTML optimizing ideas to share.

<link href=”myCSS.css” rel=”stylesheet” type=”text/css”>

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

33 Comments -

jollyrogue

good tips :) im learning html so this will be handy. Since im british, I occasionally still accidentally put colour instead of color.. :(

Wallace

Nice tips about the image resize issue. :)

André Felipe

This post is ridiculous. MakeUseOf should invite people who actually knows what they are talking about to write posts.

#2 – You shouldn’t be teaching people to put colour attributes inside the HTML code, especially after mentioning CSS.

#3 – The comment tags must be inside the script tags. Your code makes all browsers ignore the script. Nonsense! Anyway, only ten years ago you would use that trick. Browsers with javascript disabled don’t require it anymore. [url=http://www.codehouse.com/javascript/tips/xhtml/]You would use this[/url] today.

Matt

This article is a wee bit outdated… Concerning points 2 and 3:
– you shouldn’t use colour attributes in the code but use CSS instead
– tags should be lower-case to be W3C-valid
– external javascript is loaded like this :

– and inline javascript :

/* */

The rest is good advice.

Guy McDowell

I agree that colour attributes SHOULD be used in the CSS, however this article is targeted at people that are cutting their teeth with HTML on free web hosting.

That would be why I also recommended learning CSS.

Matt

Damned, HTML is stripped in the comments. Too bad, there should a codebox here for people to post code.

Guy McDowell

I think you can use the codes for the less-than and greater_than symbols and have them render correctly. Let’s see….

&lt &gt

tommy

Good tips, and glad tables were addressed at very top.

Seems a bit counterproductive, though, to emphasize CSS then advocate putting styling in the body tag.

Anyhoo, if I had to add some to this list I’d say don’t use Flash when JS/CSS would work just as well or better, and don’t use PhotoShop’s slice tool to export your mockup as a “completed,” tabled site. Crazy how often I see that being done.

Guy McDowell

The intended point is that using color attributes in HTML tags is better than tiling small images of a color. Yes, importing a CSS file is better in complex designs. However, if you are making a page that really doesn’t have much styling to it, why go that far? Just throw it in the body tag.

I also agree that generated code is usually inefficient.

James Stratford @JRStratford on Twitter

These are five handy tips. Having been a person that utilized tables in html as well as in CSS extensively a few years ago this is a good reminder. I quit using them unless they were an essential function and it’s definitely speeded up the page load times.

I can see why we’d want to avoid utilizing html to code the image to scale it down. It’s not a function that I use, but it’s now one I’ll never use. :) Thanks for an informative post that will stay bookmarked. It’s now on Delicious!

Guy McDowell

Thanks James, much appreciated.

PXLated

Good hints in general.
On the images issue though. It’s not so cut and dried. I’ve worked on some major sites with thousands of images (250K in one section) and we always created/optimized for each size needed. But, I’m not so sure I would anymore, but depends on the situation and image sizes.
In your example, using an original of 1K pxl down to 250 I would create a second image as there such a disparity in size. However, if the size difference was smaller – 200, 150, 100 – I might just do the 200. If three, three downloads. If one, one download into cache and a small browser calculation. I’m sure further downloads would take longer than that calculation.
Upside is less images to create and manage. And if a site redesign results in different image sizes, one may not have to redo them all.

Guy McDowell

I have heard of, but never used, a script to dynamically resize an image. So the size of the file residing on the server may be 1 MB but then it is resized server-side and served as, say, 250 KB. But, that’s a bit beyond the scope of this article.

PXLated

Have used scripts, that’s another option. Usually there is a hit the first time the image is requested but then it retrieves the resized images from cache. One such script is phpThumb.

podgorniy

The 5-th is wrong from the point of view of page render speed.

Without attributes, that set the image size browser has to calculate the size itself, and it takes time. With it — browser will show the picture faster.
And on the other hand if the set size differs from the actual, browser has to resize image, spending much time on this operation.

Think before using/not using height, width.

Guy McDowell

I think you misread the 5th point. One should set the height and width attributes. However, using the width and height attributes to re-size an image isn’t normally a good idea.

Having the width and height attributes not set does not make a noticeable difference in load time. It’s something in the order of hundredths of a second, But to do so is just good form!

Jake Rocheleau

Really awesome list. HTML5 has so many new tags and attributes to help you code pages in a manner where they will load much faster, code will be easier to read, and it will allow designers to follow standards a lot easier.

Peter

There’s no accident about putting the U in colour; it’s English-English. If you want to be an American, fine, but don’t apologise for your sprache; next thing you’ll be politically correct.

Back on topic; there are html crunchers/optimisers out there, and thumbnail creators too. I had a look the other day at some of the BBC’s html using notepad; it was filled with blank lines, with spaces and tabs. Why I ask? Have we become so lazy with our processors that we no longer give a damn? They can not only run faster but use less energy to do so, simply by not using redundant code and excessive fancy widgets that clever people put there because they can.

Guy McDowell

Believe me, I’m anything but politically correct! ;-)

Excessive whitespace in the code is a waste to me, I agree, yet I like to see proper indentation as well. It helps with code maintenance.

I’ve never used a cruncher/optimizer, probably because I’m a control freak when it comes to code. And lately, I’ve used nothing but WordPress, Joomla or Dolphin for sites I create. So, mostly I just make a template for the design.

I’ll have to look into these crunchers and have them go through some of my old code. Maybe do an article on it. Or, how about you do one and submit it? I’d love to read that! Seriously! Do it! You seem well written.

Cheers!

Peter

It was probably unfair of me to be so harsh without supplying links, so here they are. Downloads for compressors:

http://www.alentum.com/ahc/
http://www.softplatz.com/Soft/Network-Internet/Other/Optimize-GUITIDY.html
http://aciddrop.com/php-speedy/
http://www.brothersoft.com/lightspeed-website-optimizer-21016.html

Online compressors:

http://fixmyhtml.com/
http://wordoff.org/

And no, I do not believe in doing HTML code using an ascii text editor. There are some things where purism is more than dubious.

Tobey

Hehe, nice tips served in an amusing manner. Thx

Peter

Well that’s just me being very English when the man in Canterbury out of ignorance says it isn’t so. :-)

As to code maintenance, I used to have a departure area system; prior to FTP I’d copy the stuff to the appropriate sub directory, then crunch it and perform any other operations (gifs and stuff), fire up WSFTP_Pro, and that was the job done.

Well written? It’s nice to know that all of the letters after my name shine through, but I don’t consider myself to be a html expert.

I’ve not had a site for about 10 years. :-0

I read your remarks about css with a little discomfort. You see I’ve a put together a few css friendly html editors. Oops. I will never use notepad. :-)

ACheapChick

Thanks for the tips. I’m less than an amateur at this. I started my blog 4 months ago and used a template but hated the load time so I started at square one and created my own thing about a month ago. Since I’m still learning the basics, tips like these help a lot.

I can use all the help I can get. :)

Robin

FYI, bgcolor is a deprecated attribute, so it’s better to avoid that.