(thing) by Palm Tree Mon Nov 27 2006 at 18:18:44

Website Optimization

  1. Preface
  2. Organization
  3. Images
  4. Code
  5. Further Reads
  6. Sources
Preface

"I want my websites to look good. My websites are very flashy, I created it with frontpage. It loads just fine on my computer!" --Name Disclosed
This person's website took 10 minutes to completely download on a connection via dial-up. Techdirt.com says "34% of all internet connections in 2006 are dial-up". And only in the fastest connections, in Internet Explorer did this website have a decent load time.

Evolt.org states: Most people leave a website if it takes over 8 or 10 seconds to load.

Organization

The biggest 'no-no' in website organization (according to W3c) is using tables for layout. DIVS (dividers) should be used instead of tables because it eliminates unnecessary code. Also dividers don't jump about the screen while loading.

Reading organization is also an essential: headers should have extremely brief summaries of the article/paragraph. Links should have somewhat of a description to what it leads to; don't 'click here'.

Linking to commonly used files on your site can impact a page's load time. Such as linking stylesheets, javascripts or any other relative attribute to the link element. --This is so the browser can cache the file, thus making it load faster in future rendering.

Flash is a bad idea for website layout: some browsers aren’t equipped with a flash plug-in; some people are browsing the web with dialup or just have a slow computer. Additionally, flash usually formidable for any type of screen readers or brail screens (government funded websites cannot do this in ordinance with section 508). Navigation in flash is also horrible: the back button does nothing (but lead you off the site), and you cannot link or bookmark specific pages.

Images
“..There are three image formats in constant use on the net — GIF, JPG and PNG. Each is suited to a specific type of image [meaning no universal format], and matching your image to the correct format should result in a small, fast-loading graphic..”(1).

GIF (Graphics Interchange Format): Properly used for: small images, web icons or any general computer generated images (Applies to images made in Microsoft Paint or another 2d/pixel image editing program). Created by Compuserve, the GIF is mostly popular on the web due to the animation features (as PNG has, however not widely supported), transparency and the small file size. A GIF is compressed using a compression technique called LZW. GIFs have a maximum color palette of 265 colors. Meaning, it is definitely not ideal for photos.

JPG or JPEG(Joint Photographic Experts Group): Properly used for Photos, or high color definition/detailed images. Created for photographs: the JPEG format allows millions of colors to be rendered-- Without dithering. Ross Shannon says:

JPGs use a complex compression algorithm, which can be applied on a sliding scale. Compression is achieved by ‘forgetting’ certain details about the image, which the JPG will then try to fill in later when it is being displayed. You can save a JPG with 0% compression for a perfect image with a large filesize; or with 80% compression for a small but noticeably degraded image. In practical use, a compression setting of about 60% will result in the optimum balance of quality and filesize, without letting the lossy compression do too much damage.

PNG (Portable Network Graphics): Properly used for the same function as a GIF, however, the PNG format is superior to the GIF format in almost every way. The PNG format was created in response of a $5,000 Royalty Fee of the GIF format within software. Other features for the PNG format include:

  • Alpha Channels
    • Rather having a pixel be transparent or opaque, Alpha Channels allow specification the opacity of any pixel from 0–255. Internet Explorer (V. 6) does not support alpha channels.
  • Animation
    • Frame animation: also not supported in PNG format by Internet Explorer (V.6).

Conclusion to PNGs: Stick with GIFs for your animations, but use them in place of GIFs for icons/navigational graphics.

Code

The organization of your HTML is important. Html Validators such as the ones available from W3c, usually fix these problems. A list of items that usually help speed up loading processes:

  • Defining the doctype
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> would be an example of defining the doctype for XHTML 1.1. Since XHTML is the standards today, it would be wise to use it in replace of HTML.
  • Closing tags properly, as defined by your doctype
    • Web browsers can't think for themselves. So when you place <br> in a XHTML document, or close tags improperly (<em><big>text</em></big>) it takes longer to load.
  • Unnecessary Images
    • Using images to make a website 'pretty' is always a bad idea. People on a slow connection usually care more about getting the page to load than it being pretty.
  • Document Source No Larger Than 50kb
    • Web browsers have enough things to load (images, scripts, stylesheets, favicons etc.) so why make your source a bother? Try to get the browser to cache files via a link attribute instead of having the objects embeded. 50kb is munificent.

Some browsers can load flawlessly with code errors such as: unclosed tags, disallowed tags (ex: some HTML tags are different in XHTML, and when you define the doctype as XHTML it will confuse the browser) etc.

Further Reads

The W3c website (http://w3c.org) contains many articles on optimization.
HTMLSource (http://yourhtmlsource.com) includes articles on optimization. A trusted site, used for a source in image optimization in this document.

Sources

(1)Shannon, Ross. Image File Formats. 2005. August 2006-12-29
<http://yourhtmlsource.com/images/image%20file%20formats.htm>

(Posted By *Asterisk, However My Account Was Hacked.. By My Brother)
I like it!