|
The Three Principles of HTML Code Optimization
|
By George Peirson
[Hits: 10148]
|
|
Just like spring cleaning a house, the html code of your webpages should get periodic cleaning as well. Over time, aschanges and updates are made to a web page, the code can becomelittered with unnecessary clutter, slowing down page load timesand hurting the efficiency of your web page. Cluttered html canalso seriously impact your search engine ranking.
This is especially true if you are using a WYSIWYG (What You SeeIs What You Get) web design package such as FrontPage orDreamweaver. These programs will speed up your web sitecreation, but they are not that efficient at writing clean htmlcode.
We will be focusing this discussion on the actual html coding,ignoring other programming languages that may be used in a pagesuch as JavaScript. In the code examples I will be using ( and )characters instead of correct html so that the code exampleswill display properly in this newsletter.
Up until recently when coding a page in HTML we would be usingtags such as the (font) tag and (p) paragraph tags. Betweenthese tags would be our page content, text, images and links.Each time a formatting change was made on the page new tags wereneeded with complete formatting for the new section. Morerecently we have gained the ability to use Cascading StyleSheets, allowing us to write the formatting once and then referto that formatting several times within a web page.
In order to speed up page load times we need to have fewercharacters on the page when viewed in an html editor. Since wereally do not want to remove any of our visible content we needto look to the html code. By cleaning up this code we can removecharacters, thereby creating a smaller web page that will loadmore quickly.
Over time HTML has changed and we now have many different waysto do the same thing. An example would be the code used to showa bold type face. In HTML we have two main choices, the (strong)tag and the (b) tag. As you can see the (strong) tag uses 5 morecharacters than the (b) tag, and if we consider the closing tagsas well we see that using the (strong)(/strong) tag pair uses 10more characters than the cleaner (b)(/b) tag pair.
This is our First Principle of clean HTML code: Use thesimplest coding method available.
HTML has the ability of nesting code within other code. Forinstance we could have a line with three words where the middleword was in bold. This could be accomplished by changing theformatting completely each time the visible formatting changes.Consider this code: (font face="times")This(/font) (fontface="times")(strong)BOLD(/strong)(/font) (fontface="times")Word(/font) This takes up 90 characters.
This is very poorly written html and is what you occasionallywill get when using a WYSIWYG editor. Since the (font) tags arerepeating the same information we can simply nest the (strong)tags inside the (font) tags, and better yet use the (b) taginstead of the (strong) tag. This would give us this code (fontface="times)This (b)BOLD(/b) Word(/font), taking up only 46characters.
This is our Second Principle of clean HTML code: Usenested tags when possible. Be aware that WYSIWYG editors willfrequently update formatting by adding layer after layer ofnested code. So while you are cleaning up the code look forredundant nested code placed there by your WYSIWYG editingprogram.
A big problem with using HTML tags is that we need to repeat thetag coding whenever we change the formatting. The advent of CSSallows us a great advantage in clean coding by allowing us tolayout the formatting once in a document, then simply refer toit over and over again.
If we had six paragraphs in a page that switch between twodifferent types of formatting, such as headings in Blue, Bold,Ariel, size 4 and paragraph text in Black, Times, size 2, usingtags we would need to list that complete formatting each time wemake a change.
(font face="Ariel" color="blue" size="4")(b)Ourheading(/b)(/font) (font face="Times color="black" size="2")Ourparagraph(/font) (font face="Ariel" color="blue" size="4")(b)Ournext heading(/b)(/font) (font face="Times color="black"size="2")Our next paragraph(/font)
We would then repeat this for each heading and paragraph, lotsof html code.
With CSS we could create CSS Styles for each formatting type,list the Styles once in the Header of the page, and then simplyrefer to the Style each time we make a change.
(head) (style type="text/css") (!-- .style1 { font-family:Arial, Helvetica, sans-serif; font-weight: bold; font-size:24px; } .style2 { font-family: "Times New Roman", Times, serif; font-size: 12px; } --) (/style) (/head) (body) (pclass="style1")Heading(/p) (p class="style2")Paragraph Text(/p)(/body)
Notice that the Styles are created in the Head section of thepage and then simply referenced in the Body section. As we addmore formatting we would simply continue to refer to thepreviously created Styles.
This is our Third Principle of Clean HTML Code: Use CSSstyles when ever possible. CSS has several other benefits, suchas being able to place the CSS styles in an external file,thereby reducing the page size even more, and the ability toquickly update formatting site-wide by simply updating theexternal CSS Style file.
So with some simple cleaning of your HTML code you can easilyreduce the file size and make a fast loading, lean and mean webpage.
|
|
|
|
|
|
