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.

CSS Stress TestA 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.

Tags: browser, CSS, CSS3, performance
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • pdb2011

    Thanks for you post, i just found your blog !

  • Sphamandla

    One question how do I get the tool ?

  • http://www.optimalworks.net/ Craig Buckler

    Visit the blog post page and drag the CSS Stress Test link at the top to your bookmarks toolbar.

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.