Some tips on cutting down the bandwidth of each of your pages to increase the speed of loading your website
Invalid HTML/CSS can slow down your site loading time. Here are some tips to help you.
Save your CSS stylesheet in a external file
This is very simple. If you don't do this then you should give it a try; it's easy and well worth it. Not only does it cut down on your loading time, but it can make it easier to edit the CSS for a group of pages, by only editing one file.
To start, get the CSS on your site. You don't need to include the style tags. It should look something like this:
.big {font-size:20px;}
Once you have that, create a new page. Name it anything you like. I made mine stylesheet.css. The file must end with .css. Paste your stylesheet on that page. Next you'll need to put this code on every page where you'd normally have the CSS. Of course you need to put the URL to the page of the stylesheet where it says URL HERE:
<link rel="stylesheet" href="URL HERE" type="text/css">
Alternative for Tables
Tables are inflexible, and take up a lot of space. They don't help the actual content of your website show up on search engines, and they use a lot of bandwidth to display. The <table> tag is for tabular data (statistics, numbers etc.) not for holding content like layouts -- with tables, every time you re/load a page, you are actually downloading the same data again each time. Not to mention they take much longer to display then using CSS (especially in Internet Explorer).
If you're writing in XHTML, tables are only valid if you're inserting tabular data. The alternative to using tables are <div>s -- a tag that can be configured to do just about anything a table can, without all the hassle.
Not that I'm trying to copy Thomas or anything - but Livio's article can also help you convert your tables into div's. And if you're having trouble transforming your table-layout into a div layout, Jem has a great tutorial on tutorialtastic. Good luck!
Use Less Images
Ever notice how images are almost always the last thing to load on a page? So try to limit the amount of images you use and display on your pages. We all know how FUN it is to stare blankly at the screen while dozens of images take their sweet time loading.
And keep in mind that just because YOUR layout takes no time at all to load, that it will be the same for everyone. Once you load an image, part of it is stored in your cache. That's why when you're visiting a page a second time, it won't take quite as long as the first time.
What can you do? One, for your images, you can add the width and height tags.
<img src="IMAGE URL" width="WIDTH" height="HEIGHT" alt="ALT">
This causes the webpage to spend some less time processing the page since it doesn't have to load the image before deciding how much space the image would take up. And when saving your images, you can read this article to determine the best format to use for that particular image.
When it's possible, use CSS instead of images. Or if you're displaying a group of images linking to different websites, consider replacing them with simple text links. This is especially key when creating your navigation - the links people use to explore your site. You want those to load quickly, so they're one of the first things a visitor sees. They are the map to your site, after all!
If you have your navigational links spread horizontally across your layout (using images or image map) -- instead, try your knack at making some block navigation, using the Unordered List Tag! (Guide here and here)
Check your HTML and CSS with a validator
A validator will search through the Page Source of your site and look for errors and list them. All you need to do is enter the URL of your site. Of course it does not need to be perfect but it will make a difference. It increases loading, and can improve your cross-browser compatibility.
And after you validate your CSS/HTML, you can try optimizing your stylesheet further with this handy tool. In less then a minute, it had compressed my stylesheet by over twenty percent! Definitely something worth looking into.
