• Embed Doc
  • Copy Link
  • Readcast
  • Collections
  • CommentGo Back
Download
 
 
5 HTML Tips to Create a Fast Loading Free Website
Jul. 19th, 2009 ByGuy McDowell
My
H
yper
T
ext
M
arkup
L
anguage(HTML) skills are rusty for certain, butperhaps that qualifies me for thisarticle. Back in the day when
Friends
 was still on TV and AOL was sendingout 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 withnon-broadband (dial-up) connections and continued to design web sites based on that.Finally, I gave upweb designand development when quality of content started to get pushedto 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 canmake 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 Kenworthspullin’ logs with your Jimmy haulin’ hogs. But if you have a small Porsche, that gets a lot easierto 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 putcontent into table format. As the design layouts got more complex, the tables got bigger andnested deeper, and that always means a slow down on load time.
C
ascading
S
tyle
S
heets (CSS) came along and really helped the problem of using tables forlayout. Unfortunately, the browser makers couldn’t seem to wrap their heads around the ideaof standards – and still can’t. What looked great in CSS in Firefox looked like a dog’s breakfastin IE and possibly didn’t even render in Safari. Don’t get me started onIE5 on a Mac. I’m still intherapy over that.Please only use tables to layout content that must be in atabular format– like a price list orhockey stats. That reduces the number of tables, and depth of nesting, which means speedierload times.Learning CSSwill 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 theattribute is ‘color’. Learn yourhexidecimal color codesand use them to to liven up contentinstead of images.Try adding the color attribute to your HTML elements to spice it up. This works especially wellin 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 a10×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
J
ava
S
cript (JS) or CSS repeatedly throughout your website, think aboutcreating their own file and calling it, instead of putting it on every page. Since a browser tendsto cache a file and call that file first before checking with the server, your browser will alreadyhave that script or CSS ready to use. That means less
H
yper
T
ext
T
ransfer
P
rotocol (HTTP) callswhich means a faster loading page.
 
 
Add MakeUseOf to: 
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 everybrowser is set to read scripts. Adding the comment tags makes the browsers with scriptingdisabled 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 islike having your <link> tag at the bottom of your file, causing it to load the whole page andTHEN 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 clockscript and a calendar script and maybe some sort of special effect script that they’ll use onevery page. Instead of having 3 separate files, with 3 separate HTTP calls, put the scripts inone file and call it once. That cuts your HTTP calls by 66% and it gets cached as well. Youspeed demon, you! Before you raise your hand again, yes, you can do the same thing withCSS 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 beonly 250×250 pixels, change it in an image editor. Some people will ’shrink’ the image usingHTML 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 filesize any smaller! In fact it may take longer to load, because now the browser has to put 10pounds 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 orhave some other HTML optimizing ideas to share.
Enjoyed the article? Subscribe to MakeUseOf to get daily updateson new cool websites and programs in your email for free. You'llalso get free printable cheat sheets to your favorite programs
Your Email:
More about:
 free website,html,quick tips,webdesign,webmaster tools
View all tags
(By) Guy likes words and occasionally forms complete sentences. He can count to potato. Checkout his USB shilling atUSBDriven.com.
Subscribe Me!
Follow MakeUseOf on Twitter!
[ DOWNLOADS ] FREE PDF Guides from MakeUseOf 
10 Essential Cheat Sheets To Download A Computer Geek’s Smart Productivity Guide A Newbie’s Getting Started Guide to Linux '
 
 The Easy Torrent Guide for Everyone The Idiot's Guide To Photoshop The Ultimate iTunes Manual The Idiot’s Guide To Building Your Own Computer The Laptop Buying Guide For 2009 
Related Posts
How To Install Firebug on IE, Safari, Chrome & OperaTop 10 Professional Sample Code Websites For ProgrammersWrite & Develop HTML Offline with First Page “TEST EVERYTHING”… 100+ ‘Website Check’ Tools in-one! Selected 25 CSS Applications and Tools
2009-07-19 08:11:55 
good tips im learning html so this will be handy. Since im british, I occasionally stillaccidentally put colour instead of color..Reply to this comment 
2009-07-19 08:42:23
 
Nice tips about the image resize issue.Reply to this comment 
 
2009-07-19 10:13:15 
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.Reply to this comment 
2009-07-19 11:09:34
 
I agree that colour attributes SHOULD be used in the CSS, however this articleis targeted at people that are cutting their teeth with HTML on free web hosting.That would be why I also recommended learning CSS.Reply to this comment 
2009-07-19 10:14:35 
 
Damned, HTML is stripped in the comments. Too bad, there should a codebox herefor people to post code.Reply to this comment 
2009-07-19 11:10:44
 
I think you can use the codes for the less-than and greater_than symbols andhave them render correctly. Let’s see….&lt &gtReply to this comment 
2009-07-19 11:23:06
8 Comments
Add Comment
 jollyrogueWallaceMattGuy McDowellMattGuy McDowell
of 00

Leave a Comment

You must be to leave a comment.
Submit
Characters: ...
You must be to leave a comment.
Submit
Characters: ...