Web Performance Optimization moves into the design layer


One of the problems with Web Performance Optimization is that it has been ‘siloed’ – it is well-understood by hardcore coders and system engineers but often unrecognized at the level of front-end web development, much less design and art. Only a small minority of “web designers” today are even aware that there is an issue with optimization.

But in a post on the new blog Performance Calendar (), David Calhoon discusses new tools which push the measurement of web performance into the Ui layer, especially css:

http://calendar.perfplanet.com/2011/beyond-bandwidth-ui-performance/

The key is a new CSS profiler in both Opera and Webkit-based browsers. It shows CSS style recalculations and document “reflow” events (where the new CSS requires re-formatting the page layout). Inefficient CSS and HTML will result in lots of reflows (e.g. leaving out ‘width’ and ‘height’ in the <img> tag).

Here’s another link discussing CSS Profilers.

http://bricss.net/post/13884376788/the-css-profilers-are-coming

Apparently, some of these tools aren’t really tabulating preceived performace. In contrast, Opera Dragonfly style profiler times things to show te moment and location of paint events and layout reflows. This will be a great help to re-evaluate a specific CSS design.

http://my.opera.com/dragonfly/blog/style-profiler-preview

Obviously, more of us have to work with Opera! At present, the browser’s market share in the US is low, and many designers and developers don’t bother to test on it. This is a double problem since Opera Mini is a very popular alternative to standard mobile browsers.

Well, this is repeating much of David’s post, but these tools are extremely relevant to Sustainable Virtual Design:

CSS Performance Bookmarklet

http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

https://github.com/andyedinborough/stress-css

DOM Monster

http://mir.aculo.us/dom-monster/

This site also has some great e-books on loadtime and runtime web performance.

Let’s hope we keep “moving up” the optimization issue. I look forward to the day when an Art Director can test their work in the same way as a CSS – writer. Both may need to re-think their work to enhance performance, indirectly enhancing sustainability. Here we see an example of what that world might look like:

http://calendar.perfplanet.com/2011/pure-css3-images-hmm-maybe-later/

Pure CSS3 is all the rage – entire iPhone interfaces have been coded using CSS as an intellectual exercise. But, despite hardware acceleration, it may not be best overall in the Life Cycle Analysis (LCA) for a web page – fast download, slow User Experience.

http://calendar.perfplanet.com/2011/mobile-ui-performance-considerations/#comment-11802

The main site is a great aggregrator for WPO news:

http://www.perfplanet.com/

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