Velocity Workshop on Progressive Enhancement

Progressive Enhancement: Tools and Techniques

Anne Sullivan (Google)
3:45pm Tuesday, 06/22/2010
Web Performance 209/210
Please note: to attend, your registration must include workshops.
The painful impact JavaScript has on page load times is well understood – scripts block downloads and rendering, even in newer browsers. The solution to this problem is progressive enhancement – rendering the visible elements immediately as HTML and adding JavaScript interactivity later. Web performance experts often recommend using progressive enhancement to optimize page load times. However, there isn’t a lot of practical information available on how to implement progressive enhancement in a complex web application. In this workshop, we’ll cover tools and techniques for implementing progressive enhancement including Closure Compiler, Google Page Speed, and other JavaScript frameworks.

People planning to attend this session also want to see:

  • Psychology of Performance
  • Stupid Web Caching (and Other Intermediary) Tricks
  • Building Performance Into the New Yahoo! Homepage
  • Keeping Track of Your Performance Using Show Slow

Notes on this Session

First question is “what is progressive enhancement?” Take a look at this post which does a good job explaining. Here’s another good explanation. Here’s a good presentation.

Progressive Enhancement is a powerful methodology that allows Web developers to concentrate on building the best possible websites while balancing the issues inherent in those websites being accessed by multiple unknown user-agents. Progressive Enhancement (PE) is the principle of starting with a rock-solid foundation and then adding enhancements to it if you know certain visiting user-agents can handle the improved experience.

PE differs from Graceful Degradation (GD) in that GD is the journey from complexity to simplicity, whereas PE is the journey from simplicity to complexity. PE is considered a better methodology than GD because it tends to cover a greater range of potential issues as a baseline. PE is the whitelist to GD’s blacklist.

Implementing Progressive Enhancement

  • Finding serial requests
  • Finding requests that block rendering

What is JavaScript Closure Compiler? Can it be implemented in our build environment?

Fixing UI Generated by JS

  • Progressive Enhance HTML
    • Research the impact of Accessibility (Speaker mentioned ARIA)
  • Event Queuing
  • Late loading

Tools

  • Webkit Timeline
  • MySpace Performance Tracker
  • Google Page Speed
  • Rhino for Static Analysis of JavaScript
    • Closure Compiler Finds Unused JavaScript
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s