WebSiteOptimization.com

Higher traffic and speed guaranteed.™™

Home Sitemap Publications Services About Contact

Speed Up Your Site: Web Site Optimization

Table of Contents (All Levels)

Acknowledgments
Foreword by Jakob Nielsen (JFIF)
Introduction (JFIF)

Every Site Can Benefit from WSO

What About Broadband?
Bandwidth Trends
Site Speed Trends

Who Should Read This Book?
Who This Book Is Not For
How This Book Is Organized
Companion Web Site
Conventions

Part I - The Psychology of Performance

Chapter 1 - Response Time: Eight Seconds, Plus or Minus Two

Speed: A Key Component of Usability

Shackel's Acceptability Paradigm
User Experience and Usability

A Brief History of Web Performance

Affective Computing
User-Rated Quality Models
Automated Quality Testing

Response Time and User Satisfaction
An Interview with Ben Shneiderman, Ph.D.
Negative Impressions and Perceived Quality

Perceived Usability
Perceived Quality of Experience
Perceived Quality of Service
Credibility

Bailout Rates and Attention Thresholds

Cumulative Frustration and Time Budgets
Provide Feedback for Longer Tasks
Page Design Guidelines

Attunability

The Chaotic Web
Consistent Response Rates
Design for Attuning

Summary

Chapter 2 - Flow in Web Design (PDF / HTML)

On Flow and Mihaly Csikszentmihalyi

Attention! Supply is Limited

What Causes Flow Online?

Speed and Flow
Experiential versus Goal-Directed Flow

An Interview with Mihaly Csikszentmihalyi

Shopping Site Design
Flow Can Be Measured
The Benefits of Flow Online

Enabling Flow with Web Design
Summary

Part II - Optimizing Markup: HTML and XHTML

Chapter 3 - HTML Optimization

What is HTML Optimization?

Why Optimize HTML?

Increasing Complexity = Higher Bandwidth Designs

The Ideal Web Page
A Trim Skeleton
Illegible HTML?
Bandwidth versus Beauty

How Modern Browsers Work with HTML

Line Length

How to Optimize Your HTML

Step 1: Choose the Right DOCTYPE

Standards Mode versus Quirks Mode
Coding Style

Step 2: Minimize HTTP Requests

An Optimized Example

Step 3: Remove Whitespace
Step 4: Tighten Up Comma-Delimited Attributes
Step 5: Omit Redundant Tags and Attributes

Redundant Attributes

Step 6: Omit Optional Quotes, If You Dare
Step 7: Omit Optional Closing Tags
Step 8: Minimize Colors and Character Entities

Character References
Colors

Step 9: Cut the Comments

Embed Labels in Elements
Pages Are Not Digital Dumping Grounds

Step 10: Minimize alt Values

Accessibility and Optimization

Step 11: Minimize the head

Minimize meta Tags

Summary

Chapter 4 - Advanced HTML Optimization

Table Tips

Complex Tables = Slow Rendering Speed
Enable Incremental Display

Row Groups
Column Groups
Calculating the Number of Columns
Calculating the Width of Columns

Consolidate Table Attributes
Fast Table Rendering

Fixed Table Layout
Overflow Control
Real-World Fixed Table Layout Example

Simplify
Unwind
Layer

Perceived Speed
Three-Panel Layout

The Table Trick to Increase Relevance
Optional Closing Tags
Tables and Returns
Colored Cells

Form Optimization

JavaScript and Forms
GET versus POST
Form Controls

Hidden Inputs
Replace DHTML Menus with Cascading Select Menus

The optgroup Element
Real-World Example of Nested Menu with optgroup

URL Abbreviation

Shorter URLs Are Better
Trailing Slash

HTML and Compression

HTML Compression Example

Summary

Chapter 5 - Extreme XHTML

Benefits of XHTML
XHTML versus HTML

XML versus SGML

Anatomy of an XHTML Document

Pull the Prologue
DOCTYPE Declaration

DOCTYPE Switching

DTDs
Namespaces

Multiple Namespaces

The Syntactical Rules of XML

Rule #1: Well-Formed Documents

Close All Tags
Netscape 6: No Sloppy Code Allowed

Rule #2: Quote All Attributes
Rule #3: Don't Minimize Those Attributes
Rule #4: Higher Court Says Lowercase
Rule #5: Handle Script and Style Differences with Care

Embedded Style Sheets and XHTML
External Style Sheets
Embedded Scripts in XHTML?

Rule #6: Fragment Identifiers: name and id, Please

Converting from HTML to XHTML

HTML Tidy
Dreamweaver Extensions

Optimizing XHTML

Transform Your Code

Think Outlines
Replace Tables with CSS

Summary

Chapter 6 - Case Study: PopularMechanics.com

Automatic Optimization
Manual Optimization

CSS Optimization
JavaScript Optimization
Trim the Tables
Cut the Comments
Use Short Relative URLs
Spacer GIF Redux

Summary

Part III - DHTML Optimization: CSS and JavaScript

Chapter 7 - CSS Optimization

Apply Styles Wisely
Remove Whitespace
Cut the Comments
Minimize HTTP Requests
Use Simple Selectors and Substitution

Use Type Selectors
Use Descendant Selectors to Get Specific
Use Short class and id Selector Names
Pseudo Selectors

Substitute CSS2-Based Rollovers

Use Grouping

Group Selectors
Group Declarations
Group Selectors and Declarations
Use Multiple Classes to Group Common Styles

Inheritance

Take Advantage of Your Inheritance

A Strange Inheritance

Layer Styles for Speed

Use Media Types

Use Shorthand Properties

The font Shorthand Property
The background Shorthand Property
The margin Shorthand Property

Value Replication

The border Shorthand Properties

The border-width Shorthand Property
The border-top, border-right, border-bottom, and border-left Shorthand Properties
The border Shorthand Property

The padding Shorthand Property
The list-style Shorthand Property

Optimize CSS Colors

Hexadecimal Colors

Shorthand Hexadecimal Colors

Named Colors
Web-Safe Colors

Length Units: Everything is Relative

Relative Length Units
Absolute Length Units
Length Units Summary

Summary

Chapter 8 - Advanced CSS Optimization

Optimizing CSS Rules
Substitution

CSS2 Image Rollovers
Pure CSS2 Rollovers

Simple Text Rollovers
Vertical CSS2 Rollovers

Real-World Examples of CSS2 Rollovers

Designmeme.com
Eric Meyer's CSS Edge
Horizontal CSS2 Rollovers

Dynamic CSS2 Menu Bar

List-Based Menus

Tables and CSS
CSS Layout Control

Raising Relevance

Summary

Chapter 9 - Optimizing JavaScript for Download Speed

When to Opt for Optimization
Trim the Fat

What About Legibility?
Remove Whitespace

Automatic Semicolon Insertion

Cut the Comments

Apply JavaScripts Wisely
Minimize HTTP Requests

Defer or Delay Loading
Place Compressed .js Files in the head
Conditionally Load External JavaScripts

Abbreviate and Map
Crunching and Obfuscation

Obfuscation Anyone?
Self-Extracting Archives

JavaScript and Compression
Summary

Chapter 10 - Optimizing JavaScript for Execution Speed (HTML)

Design Levels
Measure Your Changes
Algorithms and Data Structures
Refactor to Simplify Code
Minimize DOM Interaction and I/O

Minimize Object and Property Lookups
Shorten Scope Chains
Add Complex Subtrees Offline
Edit Subtrees Offline
Concatenate Long Strings
Access NodeLists Directly
Use Object Literals

Local Optimizations

Trade Space for Time

Augment Data Structures
Cache Frequently Used Values
Store Precomputed Results
Use Local Versus Global Variables

Trade Time for Space

Packing
Interpreters

Optimize Loops

Combine Tests to Avoid Compound Conditions
Hoist Loop-Invariant Code
Reverse Loops
Flip Loops
Unroll or Eliminate Loops
Duff's Device
Fast Duff's Device
How Much to Unroll
Fuse Loops

Expression Tuning

Miscellaneous Tuning Tips

Summary

Chapter 11 - Case Study: DHTML.com

Part IV - Graphics and Multimedia Optimization

Chapter 12 - Optimizing Web Graphics

Capturing and Preparing Images

Clean Up Your Image

JPEG Optimization

The JPEG Compression Algorithm
Baseline and Progressive JPEG
Preparing JPEGs for Better Compression

Digital Cameras and JPEGs
Scanners and PhotoCDs
Improving Compression and Apparent Resolution

Saving JPEGs

Use Weighted Optimization

Text and JPEGs
JPEG Optimization Summary

GIF Optimization

LZW Compression
Minimize Bit-Depth
Color Quantization
Minimize Dithering to Smooth Things Over
Maximize Horizontal Redundancy and Flat Color Areas
Consider Interlacing to Improve Perceived Speed
Use Weighted Optimization
Browser Issues
GIF Optimization Summary
Optimizing Animated GIFs

Optimizing Animated GIFs Summary

PNG Optimization

Deflate Compression for PNGs
Minimize Bit-Depth
Avoid Interlaced PNGs
Use Filters for Better Compression
PNG versus GIF
PNG Optimization Summary

Download Time: Packet Count versus Page Size
On the Horizon: JPEG2000 and Vector-Based Graphics
Summary

Chapter 13 - Minimizing Multimedia

Multimedia Basics

Web Multimedia Datatypes

Audio Data Types

MP3
Qdesign Music
Qualcomm PureVoice
MPEG-4 Audio
WAVE
QuickTime Audio

Video Data Types
Animation

Limitations to Multimedia

Processing Speed
Bandwidth

Codecs

Why Codecs Are Necessary
How Codecs Work

Streaming Media

QuickTime
RealMedia
Windows Media
Streaming versus Downloading

Multimedia Production Tips

Audio Compression and Optimization

Equipment
Level Matching
Normalization
Audio Compressors

Useful Compressor Settings

Encoding

Video Optimization

Equipment
Lighting
Capturing

Analog
Digital (IEEE 1394)

Optimizing Video After You Capture It

Aspect Correction
Pixel Aspect Ratio

Video Compression

Compressing Video for the Web
QuickTime Compression
RealMedia Compression

Flash Optimization

Programming and Optimization Tips

Shockwave Optimization
Cult3D Optimization

PDF Optimization

Creating Small PDFs

Dynamic PDF Creation

Saving PDFs
Avoiding Fat Forms
Optimizing PDF Files

Summary

Chapter 14 - Case Study: Apple.com

Output
Tracks
Image
Adjust
Encode
Audio
Final Results

Part V - Search Engine Optimization

Chapter 15 - Keyword Optimization

The Big Picture

Target Multi-Word Phrases
How Search Engines Rank Sites

Keyword Optimization Guidelines

Step 1: Determine Your Keyword Phrases

Brainstorm Keyphrases

Step 2: Sort by Popularity

Word Stemming
Proximity Grouping

Step 3: Refine Keyword Phrases
Step 4: Sort by Popularity Again
Step 5: Write a title Using the Top Two to Three Phrases
Step 6: Write a description meta Tag
Step 7: Write a keywords meta Tag
Step 8: Add Keywords into Key Tags and Attributes, and Mix Well

Keyword Density
Keyword Placement Priority

Step 9: Submit to Search Engines
Step 10: Watch the Hits Roll In

Spider-Friendly Design Tips
Page Characteristics of High-Ranking Sites
Summary

Chapter 16 - Case Studies: PopularMechanics.com and iProspect.com

PopularMechanics.com

Term-Limited title
Empty meta Tags
Big head
Missing alt Attributes

iProspect.com

Title with Keywords
Keyword-Rich meta Tags
Minimal head
Meaningful alt Attributes
Add Keywords into Key Tags and Attributes, and Mix Well
Keywords in body Text

Part VI - Advanced Optimization Techniques

Chapter 17 - Server-Side Techniques

Server-Side Includes

Conditional SSI
Setting and Testing Environment Variables

Advantages of SSI: Speed and Broad Compatibility

Disadvantages of SSI

Tuning mod_include

Consider XBitHack or .shtml
Run mod_include per Virtual Server
Use AllowOverride None
Enable Caching with XBitHack Full or mod_expires

Server-Side Browser Sniffing

Faster Browser Sniffing with BrowserMatch
PHP Browser Sniffing
Advantages and Disadvantages to Server-Side Browser Sniffing
browscap: The Browser Capabilities File
BrowserHawk: Advanced Server-Side Sniffing
Conditional meta Tags

URL Abbreviation with mod_rewrite

Tuning mod_rewrite
The Abbreviation Challenge
The RewriteRule Solution
The RewriteMap Solution for Multiple Abbreviations

The Replacement Pattern
Binary Hash RewriteMap

Automatic URL Abbreviation

The URL Abbreviation/Expansion Process: Step by Step

Form and CGI Optimization

Use mod_perl to Speed Up Perl Scripts

No More www
Summary

Chapter 18 - Compressing the Web

Text Compression Algorithms
Content Compression

GZIP Compression
Modem Compression Is Not Enough

Content Compression: Client Side

HTML and Compression
CSS and Compression
JavaScript Compression

JavaScript Compression Gotcha: Use Your head

Content Compression: Server Side

Content Compression in Apache

Serving Static Pre-Compressed Files with mod_gunzip
Serving Static Pre-Compressed Files with mod_gzip

How to Compile and Install an Apache Module

Dynamic Compression

Mod_deflate, Apache Version
Mod_gzip - Configurable Compression
Mod_hs - The Commercial Version of mod_gzip
Mod_deflate ru
Gzip_cnc - For Those Without Apache System Access

Choosing a Compression Module

Content Compression in Microsoft's IIS Server

Dynamic Content Compression for the IIS Server
PipeBoost
Inner Media SqueezePlay
HyperSpace i
VIGOS IIS Accelerator
HTTP Burst
Summary: IIS ISAPI Compression Filters

Proxy Server-Based Content Compression
Benchmarking Tools

PipeBoost Analyzer
ApacheBench
VIGOS Website Analyzer
Web-Based Benchmarking Tools

On the Horizon
Summary

Chapter 19 - Case Studies: Yahoo.com and WebReference.com

Abbreviating Yahoo.com
Abbreviating WebReference.com

Excerpt from Search Engine Visibility, Chapter 1, "Before You Build"
Back Cover

Copyright © 2002-2008 Website Optimization, LLC - Free website speed test - Privacy Policy
C Last modified: February 19, 2009.