Tuesday, October 14th, 2008

Runtime Page Optimizer: Fix performance on the fly

Category: Performance

Steve Souders posted on Runtime Page Optimizer a tool that you can think of as a performance proxy. It sits on the server side, and cleans up content before it is sent back to the browser.

What can it do? Steve let us know:

RPO automatically implements many of the best practices from my book and YSlow, so the guys from Aptimize contacted me and showed me an early version. Here are the performance improvements RPO delivers:

  • minifies, combines and compresses JavaScript files
  • minifies, combines and compresses stylesheets
  • combines images into CSS sprites
  • inlines images inside the stylesheet
  • turns on gzip compression
  • sets far future Expires headers
  • loads scripts asynchronously

RPO reduces the number of HTTP requests as well as reducing the amount of data that is transmitted, resulting in a page that loads faster. In doing this the big question is, how much overhead does this add at runtime? RPO caches the resources it generates (combined scripts, combined stylesheets, sprites). The primary realtime cost is changing the HTML markup. Static pages, after they are massaged, are also cached. Dynamic HTML can be optimized without a significant slowdown, much less than what’s gained by adding these performance benefits.

Steve had another couple of interesting posts recently:

  • Say no to IE6 discusses how we need to do something to help upgrade IE6 users (to IE7 is fine!)
  • Raising the bar talks about results from Steve’s UA Profiler tests and how new browsers are pushing forward

Posted by Dion Almaer at 8:11 am

4 rating from 26 votes


Comments feed TrackBack URI

“combines images into CSS sprites”

How does it do that?

Comment by Yansky — October 14, 2008

How it works: a page’s individual images (JPG, PNG, GIF) are combined into mosaics and cached on the server. Instead of a browser loading say a dozen JPG files, it loads a single mosaic then displays the different parts of the mosaic as each image. The process is fast and done automatically.
For an example, see this SharePoint site:
Use a tool like Firebug to examine the mosaic.
You can turn off the CSS sprites + other optimizations by using the ?rpo=off querystring parameter

Ed Robinson

Comment by EdRob — October 15, 2008

Wouldn’t this be considered one of those cases where an ounce of prevention is worth a pound of cure?
Or rather an ounce of proper development the first time is worth a pound of server processing and bandwidth…

Comment by TNO — October 15, 2008

Yeah, pretty sure I agree with EdRob on this one. Not that I’m suggesting it isn’t pretty damn cool.

Comment by leachryanb — October 15, 2008

oops, agreeing with TNO

Comment by leachryanb — October 15, 2008

Spriting at design time is a great option. But its seldom done for two reasons:
1. Most people don’t have the time, or the patience to re-sprite everything when an image changes.
2. Not every browser or search engine supports CSS sprites.

The RPO helps by instantly creating sprites, returning them only if the browser supports them – EG: spriting is turned off for the Google search indexer.

Most people are amazed to see the automatic CSS spriting, its very cool.

Ed Robinson

Comment by EdRob — October 15, 2008

Leave a comment

You must be logged in to post a comment.