Web Site Optimization
Keys to Making Your Website More Efficient
Kara Anderson
Step 1: No tables! Use CSS for it's speed and efficiency:
- In CSS you can control the order in which things download on your screen. Users with slow connections are very appreciative of this.
- CSS is generally cleaner and slimmer code than tables. Example
- A browser has to read through the table twice: first to define structure, second to insert content.
[any material that should appear in print but not on the slide]
Step 2: Do Not Use Images as Text
- CSS allows you enough flexibility to create unique and interesting text without using images.
- You can also create hover links, or alter the text to do different things in different situations
- Images slow down load time
Step 3: Call Images through CSS
- This will load the text first, so your viewers have something to do while waiting for the image
- You can do this by setting the image as a div class in HTML, and defining it in CSS
- .pretty-image
{
background: url(filename.gif);
width: 200px;
height: 100px
}
- This will load a transparent image with alternate text instantly, awaiting download of your image
- Only good for DECORATIVE images. If someone has CSS disabled, obviously this will not work.
Step 4: Reduce HTTP Requests
- This can probably save your users the most time.
- If you have multiple script tags, combine them into one and save users the multiple trips.
- This can and should also be done with style sheets, when possible
- Avoid frames: if you use frames, the browser has to request at least three HTML pages, instead of just one -- those of the frameset as well as each of the frames.
- Avoid redirects, which would make the page load, then send it to another source, then load again
Step 5: Use CSS Sprites
- This technique will allow you to combine decorative or background CSS images into a single image
- Using CSS background display properties, you can choose only to display what you want
- NOT FOR CONTENT IMAGES (such as those with the img tag)
- For more details on this, go here
Sources
- http://www.sitepoint.com/article/web-site-optimization-steps/
- http://www.webcredible.co.uk/user-friendly-resources/web-usability/speed-up-download-time.shtml
- These and others are great resources with pertinent information on how to increase your website's efficiency and download time