Website Optimization
- Preface
- Organization
- Images
- Code
- Further Reads
- 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)