AbleDesign - Tutorials
Web Design Tutorials - Intermediate Design Considerations
Efficient HTML Coding Practices
Going back to the first tutorial of this series, Learn the Fundamentals, the single most effective way to ensure efficient page coding is to hand code. Take a look at some of the code produced by HTML editors. You will often see endless comment tags, needlessly duplicated font tags, a labyrinth of unused table cells (attempting to space the page layout, whereas a simple spacer image would accomplish the task much more effectively), and many improper HTML tags.
Take a look at the following two pages (each will open in a new window):
Inefficient Page (112k)
Efficient Page (65k)
(Header and navigation information has been removed from both example pages.)
The first example was a page produced in DreamWeaver, while the second example was gutted and re-coded by hand, making use of Cascading Style Sheets (CSS) to significantly cut down on font tags. As you can see, the difference in page size was quite significant. Take a look at the source code and note the differences. Also note how much easier the hand coded page's source code is to read, which can be a huge benefit when the time comes to edit your site.
How significant is a savings of nearly 60k in page size? Well, consider that most people recommend keeping the total page size (HTML and images) below 40k. The 65k is still a bit too big (it was later restructured into a multi-page directory of links) for a single page, but it is much closer to the acceptable limit.
Even though the average person's internet connection speed is steadily improving (i.e. getting faster through Cable, DSL, and the like), you would be wise to avoid the temptation to assume their connection is up to handling a large amount of graphics. I call it designing for the lowest common denominator. If you increase page size significantly, you will alienate visitors on slower connections. If you keep page size to a minimum, everyone will be able to view your wonderful offerings, and those on fast connections will be thrilled with how fast it loads.
Of course, never sacrifice browser compatability in order to make your page code more efficient. Browser compatibility is the first (although more advanced, so discussed later in the tutorials) and most important step, i.e. covering all your bases. Page efficiency is building on compatability and ensuring fast loading pages that are easy to edit and maintain.
