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
IMA 4:1
• 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