Formatting Tips To Speed up Your Website

Formatting Tips To Speed up Your Website

While more and more people are getting access to high speed internet, there are many left on dial up. Be kind to those visitors and do a few, simple things to speed up your webpages. Not only will these tips give you a faster load time, most will also help keep your bandwidth fees low as well!

Use CSS For Faster Pages

Even if you decide to use tables, CSS can greatly improve your web sites load time! With your styles in an external .css file, the browser can cache all the formatting and stylizing for your pages instead of having to read each and every single tag all over again. Also it cuts down on long drawn out tags and replaces them with smaller class styles instead.

Use External Scripts

Use the same script on multiple pages? Switch to an external script. I'm not talking about remotely hosted, I mean loading javascript files from one source instead of adding all that code to each of your pages like this:

<script type="text/javascript" src="yourscript.js"> &;t;/script>

That way the browser already has it in it's cache and won't have to read it each time another page loads. This one saves a ton of load time, specially for larger scripts!

Remove Anything You Don't Really Need

OK, while this might sound obvious sometimes the hardest thing about creating a website is not using every fancy trick that you know. Images, flash and sometimes even sound files are very impressive.. but do you really need to showcase all your talents on one page?

Embedded sound files are something many people just find annoying anyway. You'd be surprised how many are surfing at work ;-). The last thing anyone wants is a loud music or sounds announcing to their boss that they're surfing. Also many people have their own music playing... hearing a song over top of what we're listening to is less than pleasant. As for Java applets, try to ditch them or if you want those effects, JavaScript unusually loads faster and can do just as much or more. Stand back and take a critical look at your website, you may see a few special effects that can be let go of for the sake of faster load time.

Avoid Nested Tables

OK, I'm not a big fan of using tables for layout anyway (I'm one of those people that believes content and presentation should be separate.. but thats another tip page). With that said, if in your templates tables seem necessary (or the easier way to do it), try to avoid nesting. Why? When you place a table inside another table, it takes a lot longer for the browser to work out the spacing since it has to wait to read the entire html and then work out the layout. If at all possible, try using CSS to create the columns on your page.

Avoid Full Page Tables for Faster Rendering

If you use tables, try avoiding the whole page being one big table. The browser won't show anything until it's read the whole thing that way. For a faster loading webpage, either try multiple tables (not nested) or having stuff above the main table to make your content in the first table show up faster. That way your visitors will have something to read while the rest of your page loads. It may not really make you page faster, but it will feel like it to your visitors.

Split Up Long Pages - Multiple Short Pages Load Faster

By splitting up long pages into multiple pages you not only make the content show up faster but many people that see a very long scroll bar give up. Remember, people's attention spans are often shorter than a grasshoppers (OK, not literally, but you get my point) since so much information is available at our fingertips. Try breaking it up into more readable lengths.

Remove Excess "Whitespace"

Whitespace is the spaces between your coding, removing the unneeded tabs and spaces can help a lot! Doing this will take a lot of extra bytes off the total size of your page and will speed up load time quite a bit. (Careful using automatic squishers, I find they often squish too much and makes it rather hard to edit later.)

Keep Your Code Clean

If you do use a wysiwyg editor, most times the will add useless code to your pages for example, many will leave empty tags (ie. &;t;font> ). Removing any of those excess tags will not only speed up your load time, but make you pages validate a lot cleaner.

Speed up Images Load Time

Don't Go Overboard On Images

While images can greatly enhance the look of a site they can really slow it down if there are too many. Try to decide if all your images are really needed (quite a few nice effects can be done with css, so sometimes images are unneeded.)

Height And Width Tags

When the page loads and the image size is already defined (ie. you've used the height and width tags), the browser knows where everything will be before the images are loaded. Otherwise the page has to wait and load the images before the text. Same goes for tables, so try to use width tags when possible on those as well for a speedier page.

Faster Images? Reduce Their File Size

There are many totally free, online image optimizers so you don't even have to install anything and it's extremely easy! Online Image Optimizer will greatly reduce the file size of your gif, jpg, or pngs and neither you or your visitors will be able to see the difference other than a page that loads a heck of a lot faster. They also keep the transparency and animations in gifs! For another JPEG reduction, try JPEG Wizard, also free, this one will only work with pictures in your hard drive not ones from the net. You can also choose some simple effects to be done (flip, mirror and rotate).

GIF vs JPG vs PNG

Personally on new sites I design I tend to go for optimized pngs. They have lossless compression (unlike jpgs and can be used without worry (gifs have the potential to have copyright issues) and load fast! With all that said, if you still want to use gifs and jpgs, here's a bit of fast info... If you don't need sharp resolution, choose GIFs over JPEGs, as GIFs generally load quicker. JPGs are generally best for photos, GIFs for anything else.

(I'd add a rant here about how Microsoft had held up the web's development with not making IE6 support png transparency... but *sigh* I've ranted about this already to anyone who will listen. Firefox, Opera and other modern browsers however have been able to show alpha transparency in png for years... oops, sorry, that was a mini rant after all!)