Fast display speed is the key to success with your website. It increases profit, decreases costs,
and improves customer’s satisfaction.
To maximize web page display speed, you can use the following techniques:
• Resize and optimize images
• Optimize multimedia
• Convert Javascript behavior to CSS
• Convert table layout to CSS layout
• Replace inline style with CSS rules
• Minimize initial display time.
• Load javascript wisely.
High Performance Web Site Tips
The following tips are derived from the book High Performance Web Sites (O’Reilly) by Steve Souders:
• Make fewer HTTP requests to reduce object overhead.
• Use a content delivery network.
• Add and Expires header.
• Gzip/ compress text components
• Put stylesheets at the top in the head
• Put scripts at the bottom of the body
• Avoid CSS expressions which are CPU-intensive and can be evaluated frequently.
• Make Javascript and CSS files external.
• Reduce Domanin Name System (DNS) lookups to reduce the overhead of DNS delay by splitting
lookups between two to four unique hostnames.
• Minify Javascript
• Avoid redirects which slow performance.
• Remove duplicate sripts to eliminate extra HTTP request in Internet Explorer
• Configure ETags for sites hosted on multiple on multiple servers.
• Make Ajax cacheable and small to avoid unnecessary HTTP requests.
Step 1: Minimize HTTP request
The key to minimizing HTTP requests is to combine files and convert graphics-based techniques to CSS.
You can convert graphical text to CSS text;
combine external images, scripts, and CSS files; and eliminate frames and Javascript includes.
By converting graphical text to styled text you lose some
control but gain in speed, potential search engine rankings, and accessibility.
So this:
<div align=”center”><img src=”banner.gif” width=”900” height=”150” alt=”graphic text example”></div>
Becomes this:
<style type=”text/css”>
H1 { font: bold 18px palatino, times, serif; color: #CCCCFF; text-align: center;}
</style></head><body>
<h1>CSS Text</h1>
Step 2: Resize and Optimize Images
We see sites with full-size unoptimized or partially optimized JPEGs resized into small thumbnails with height and width dimensions.
A better way is to crop and resize your images to the final dimensions that you want them to assume on you page.
Then optimize them in a good graphics program such as Photoshop or Fireworks.
You can find the techniques to fully optimize your images at
http://www.websiteoptimization.com/speed/tweak/graphic-optimization/
Step 3: Optimize Multimedia
Movies Optimized for the Web shoud be short in duration, small in dimension, and optimized with the appropriate codec.
Here are some tips in creating high quality videos that optimize well:
Minimize camera motion with a tripod if possible.
Minimize subject motion.
Use a lot of light.
Use a simple background or blur the background ( avoid background movement).
Avoid camera pans and zooms.
Use professional equipment.
Use a digital format.
If a tripod is not an option,
use a gyroscopic stabilizer or an image –stabilized lens.
Step 4: Convert Javascript behavior to CSS
Javascript is used for form validation, menus and rollovers, browser sniffing, statistics, and more complez Ajax applications.
You can accomplish a number of this techniques with more efficient methods, however.
You can use CSS to control-drop down menus and rollovers with the :hover pseudoclass.
Typically you will save 40% to 60% off HTML and Javascript file sizes by converting to CSS :hover techniques, with a slight increase in CSS file size.
Step 5: Use Server-Side Sniffing
Browser sniffing is one area where Javascript is in widespread use. To minimize the Javascript
overhead that your user must download,
you can substitute server-side or PHP and JSP sniffing instead.
BrowserHawk from cyScape (http://www.cyscape.com) uses server-side
browser sniffing of hybrid sniffing to detect a wide variety of parameters, including Flash,
screen size, connection speed, cookies, and browser and software versions
.
Step 6: Optimize Javascript for Execution Speed and File Size
After replacing as much Javascript as possible with CSS and server side techniques, optimize any remaining Javascript to minimize file size.
You can use abbreviated object, variable and function names to save in bytes.
You can automate the process by using a tool such as w3compiler to automatically abbreviate and whitespace-optimize your scripts.
Step 7: Convert Table Layout to CSS Layout
Using CSS to lay out your page can save you a significant amount of markup, typically 25% to 50%.
Look at the layout to see whether you can substitute CSS lists and positioned divs to simulate the
effects that are typically done with tables.
Step 8: Replace Inline Style with CSS Rules
Replacing table layout with CSS layout certainly saves you bandwith and reduces maintenance headaches.
Inline style such as:
<p style=”font-size: 11px;color:black;”>Text here</p>
<p>Bulks up your code a makes it harder to make style changes. It is more efficient to abstract multiple duplicate styles into CSS rules, like so:
<style type=”text/css”>
p {font-size:12px;color:#CCCCCC;}
<style>
<head>
</body>
<p>Text here</p>
Step 9: Minimize Initial Display Time
You can improve the perceived speed of your web page by loading something useful fast.
You can ensure that your useful content loads quickly by layering your tables or divs.
Multimedia can also benefit from fast start techniques. Flash presentations can load a separate file quickly while others stream in the background.
Movies can load a static placeholder image or preview to show something quickly to help engage de user.
Step 10: Load Javascript Wisely
External scripts referenced in the head of your pages are especially harmful because they delay
the display of your body content.
Delay before your body content displays make it more likely that users will bail out.
This is a summary about Website Optimization, to find out more about this topic read the book
"Website Optimization" by Andrew B. King
