What I’m Reading

CSS3 backgrounds, rounded corners, box shadows, text shadows, opacity and transformations save web developers hours of time. Basic effects can be achieved without resorting to image slicing, additional elements or scripting.

Despite this, not all is rosy in the CSS3 world. When I first dabbled with the techniques a couple of years ago, I was shocked by the impact effects could have on browser performance. A single CSS property could result in visible redraws and page-scrolling treacle. On one site, I had to scrap rounded corners and revert back to images to solve a performance issue. I cursed a few times but simply considered it to be another development gotcha to file in my browser bitch box.

Fortunately, US web developer Andy Edinborough has investigated the issue further and developed the CSS Stress Test bookmarklet.

The CSS Stress Test uses a novel approach to detect performance issues:

1. A single ID or class is removed from a DOM element to disable (some) CSS effects.
2. The page is scrolled and the time taken is recorded.
3. The ID/class is replaced and the loop continues until all have been analyzed.

A table of results then shows how each removal affected the scroll speed — time is either added (slower without the effects) or saved (faster without the effects). If the removal of a specific ID or class saves significantly more time than the others, you should be able to isolate the cause of the performance issue.

The bookmarklet runs in all modern browsers but note that it’s a work-in-progress and there are a few drawbacks:

• Styles applied to HTML elements are not removed. For example, if you’ve applied effects to the header tag, the tool won’t highlight a problem. However, it will reduce the number of suspects down to a manageable level for further manual investigation.
• Complex pages can take several minutes to analyze.
• It fails in some older browsers although they offer reduced CSS3 support so they’re usually less susceptible to performance problems.
• The table of results cannot be moved and may become corrupted or hidden by conflicting elements or styles. To solve this, use Firebug or a similar tool to remove overlaid elements or extract the data.

Overall, the tool’s a great idea and it’ll lead to surprising conclusions. On his problem page, Andy discovered that a root element with many children was adversely affected when border-radius was applied in IE9.

For more information about CSS Stress Test, refer to Andy’s blog post and the GitHub project pages.