|
|
The absolute worst thing that can happen to a web site, even worse than design, is slow speed. Bloated pages, full of unnecessary animations, unoptimized images, large JavaScripts that are not used, they all make the download time of a page very long. Not only does the visitor have to wait a long time to download the page, when the html is done badly, he or she doesn't even see anything before the whole page is loaded. The average time a user wants to wait for a page to load is 8 seconds give or take 2 seconds! That's a very short time.
What does it mean: "waiting for a page to load"? In general it means the user is waiting for something to apear on the screen. If nothing is presented on the screen in that time, the user must have a very good reason to wait for it to load. Most of the time this means that the user knows what the page contains. New visitors to the site are long gone. Getting something on the screen is more important than getting the full page on the screen. A user is willing to wait while he sees the page building up, but not when nothing happens. In other words: perceived speed is more important than absolute speed.
I'll give some tips on the matter here.
Table design
How can you avoid that the full page needs to be loaded before something is presented?
The trick to one is to know that a browser can only render a table when it has loaded the full table. Only then can it know where the different cells of the table are positioned. Many web site builders use tables to position elements on a page. If the whole page is put in one table, then the entire html file needs to be loaded before the browser can even begin redering. Most of the time there is some kind of header on the page. If that header is put in a different table or even in a DIV, then this part can be displayed while the rest of the page loads. This way the branding and the main navigation is loaded in most designs and the visitor knows where he is and can even navigate to a different section of the site, even before the whole page is displayed.
Many designs can be separated in horizontal sections. Cut the page up in tables, each section put in a table. This will add a little to the html as a whole, but the page will display a LOT faster.
|
Use CSS
Version four browsers only make up 1 to 2% of the browser market. Designing you rpage so that it looks the same for all browsers, version four and up, actually gives a disadvantage to 98% of the browsers! Those version four browsers know very little CSS, so styling and positioning needs to be done with regular HTML tags. This generates a lot of HTML code and make the page slow. Stepping off of teh fact taht pages shouls look the same in verion four and up, and instead using the fact that pages should be usable in version four browsers and up, is an entirely different ballgame. The majority of the visitors will be able to see the page exactly like you designed it, while the rest of them can see the content and navigate through it, although not as beautifully designed.
CSS1 and even CSS2 can be used if we agree on the above statement. This enables the entire styling and positioning to be moved to CSS. The html code of the page only contains the absolute necessary, while teh CSS file is cached at the client's side and isn't even loaded with every page. This speeds up the page tremendoesly. Take a look at the source of this page to see what I mean. The navigation at the left side is merely a list of regular <a href> links that are vertically stacked and styled using CSS.
|
Non visible content
Many pages on the web contain a lot of code that is not visible on the page. This includes
- spaces
- tabs
- html comments
- meta tags
Use a good html optimizer or a technology that gets rid of the useless white space in the html code. A browser contracts a series of spaces to 1 space. Indentations using spaces or tabs in the html code is useless, but the characters need to be downloaded anyways.
HTML comments like <!-- Start of content part --> or useless to the visitor, but you'd be surprised how many include them in their source. Using comments in server side scripting still allows you to comment the source of the page, but does not send the comments to the browser.
There are only a handful of meta tags that are relevant in the head of a web page. Many web designers put about 20 or more meta tags in the head of their page. A regular web page should only contain two tags in the head: teh <title> and the <meta description> tag. Search engines are relying less and less on the <meta keywords> tag, most of the m even ignore it. The relevant keywords are filtered out of the textual content of the page. The <meta description> is still used to by some search engines to give a description of the page in the result slist though. Most important is the title of teh page and should never be omitted!
|
A book on the matter
 Recently a very good and complete book has been written on this matter by Andrew King. I had the pleasure of doing the technical editing for New Riders, the publisher of the book. You can find out more about this book on the site of New Riders. It also includes lots of other techniques to get the page to the browser as quickly as possible like server side compressing, image compression, javascript optimization, and many others.
Loads of info can be found on Andy's site at websiteoptimization.com. Pay it a visit, it's well worth yoru time.
|
