mdo/css-perf

css perf

This project is archived and will not be maintained or updated.

css-perf is a completely unscientific way of testing CSS performance. Most of these tests will revolve around methodologies and techniques for determining effective CSS architecture. Put another way, I want to know what works best given a particular comparison of CSS strategies.

Table of contents

• How "testing" is done
• Original test results
  • Attribute vs class selectors
  • Box-sizing resets
  • Grid techniques
  • background vs background-color
• Average test results
  • Safari 7.0.1
  • Chrome 33
  • Differences between original test results
  • Updated conclusions from averages
  • A note on CSS performance testing
• Feedback
• License

How "testing" is done

Yes, it's in quotes for a reason. None of this is super accurate, but it's all very interesting to me. I merely use page loads at this point to gauge overall time spend on a particular page by Safari and Chrome.

More specifically:

• I open the page, open the Inspector, and reload the page.
• In Chrome, I have the cache disabled when Inspector is open. I also Cmd-Shift-R for a full refresh. (Unsure about doing this Safari—there's no clear preference.)
• In Safari 7.0.1, I use the computed time after the finished page load from the top middle of the Inspector.
• In Chrome 33, I use the Timeline pane's Event view for a final computed time.

Things worth noting about this process:

• None of this is super accurate.
• These are local page load times via file:/// URLs.
• Nothing is averaged. This is a single page load.
• The only platform tested is OS X (currently 10.9.1).
• I'm no developer tools expert (in any browser).
• Firefox's dev tools are horrible to use and I haven't included them in testing for now.

Additional context and background information is provided in the test results sections below.

Original test results

Explanation and analysis between sample pages featuring high number of elements.

Attribute vs class selectors

This tests the rendering performance of the same page of 5,000 elements with the same class. An attribute selector looks something like [class^="column-"] { ... }. A class selector looks like .column-class { ... }. At first glance, the class selector page renders 43ms faster (a 9.3% improvement) in Safari 7.0.1.

The time spent recalculating styles is neglible I think, but the difference here is interesting. Consider the following context for this test:

• The test page contains only one element, with one class, and the same content.
• The CSS contains two selectors—the body and the repeated element. Most pages, and most sites/applications, don't work this way.
• In many situations, sites might have a few dozen or couple hundred repeated elements per page (think tables, buttons, icons, grids, etc). Each of those series will have it's own CSS, with any kind of CSS selector.

In other words, this super edge case comparison of a large number of the same elements isn't that accurate. I'd wager most sites would see a larger disparity when sticking to classes only, as opposed to wide use of attribute selectors.

Conclusion? Based on this test, my personal experience with Twitter, Bootstrap, and GitHub, and the feedback of others, I'd stick to classes for widely used components.

Box-sizing resets

This tests the rendering performance of the (relatively new) standard box-sizing: border-box; reset. Popularized by Paul Irish with his * { Box-sizing: Border-box } FTW post, it looks like this:

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

I've had a hunch that this is slower for one reason or another than say splitting up the selectors like so:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

And as it turns out, it is slower in the first run. Splitting the selector up saves 8.2ms (a 16% improvement) in page render time as reported by a single load in Safari 7.0.1.

The problem with this test is that the page rendering time is super inconsistent. The first test numbers are above. Subsequent refreshes yield wildly different numbers in both Safari 7.0.1 and Chrome 33. Sometimes the render time is doubled or the improvement reversed between the two options.

Conclusion? I have no idea.

Grid techniques

This test compares three CSS grid techniques: floats, display: inline-block;, and display: table-cell;. The test page has a few hundred columns in standard layouts, so it's a super basic set of pages. The only differences are in the actual grid CSS.

Some background and context:

• Use floats is super straighfoward—float the columns, clear them with a row. I honestly don't see why folks don't love floated grid systems more.
• inline-block grids require some white-space: nowrap; or font-size: 0; hackery to collapse whitespace. Why bother resetting something at such a high level in your page?
• Flexbox is interesting, and this test doesn't make full use of available flexbox properties for the columns.
• Tables are super impractical for grids because there is no perf gain when using table-layout: fixed;, a property that tells the browser to only scrape a table's first row of cells to determine every cell's width for super fast rendering.

Conclusion? Floats have been CSS stable for many years, and I see no reason to move away. That said, I have no idea why the numbers are so crazy different between Safari and Chrome—especially for floats and inline-block.

Background vs background-color

Comparison of 18 color swatches rendered 100 times on a page as small rectangles, once with background and once with background-color.

While these numbers are from a single page reload, with subsequent refreshes the render times changed, but the percent difference was basically the same every time.

That's a savings of almost 42.6ms, almost twice as fast, when using background instead of background-color in Safari 7.0.1. Chrome 33 appears to be about the same.

This honestly blew me away because for the longest time for two reasons:

• I usually always argue for explicitness in CSS properties, especially with backgrounds because it can adversely affect specificity down the road.
• I thought that when a browser sees background: #000;, they really see background: #000 none no-repeat top center;. I don't have a link to a resource here, but I recall reading this somewhere.

Conclusion? Stick to background, I guess. Ugh.

Average test results

This is a second set of test results, averaging 10 page load times in Safari 7.0.1 and Chrome 33. Cache was always disabled in both browsers with Inspector open. All times are in milliseconds.

Safari 7.0.1

Chrome 33

Differences between test results

The differences in times between these averages and the individual tests earlier is astonishing. Further testing—without me at the helm—is definitely needed. Here's what's different:

• In the original tests (all still documented above), single page loads were used for each test. Each browser had it's cache disabled with the Inspector open during those tests.
• In the averaged tests, the same conditions applied—cache disabled, Inspector open. Larger bumps in times can be seen, but very few like the ones I saw originally.
• The above averages are from my second attempt at averaging. The first set (of three refreshes) produced much higher inconsistencies that matched the original tests. I cannot explain the change, save for the larger sample size.
• Ever after this larger average test run, I still see crazy differences in numbers. One part of this can be the cache. With the cache re-enabled, the numbers vary even more greatly with each refresh, in Safari and Chrome.

Bottom line, though? The disparity is not at huge as I saw earlier when averaged out, apparently.

Updated conclusions from averages

Let's revisit the conclusions I had earlier from single tests against the averages:

• Attribute vs class selectors: Winner is still class selectors. Only thing faster than classes is ids.
• Box-sizing reset: All together or broken apart, they're still about the same. This sounds way saner to me.
• Float techniques: Apparently display: table; beats out floats now. I think this is the case because we repeat the same grid examples several times, so there's less computation to do still given table-layout: fixed;.
• Background or background-color: Safari says background, Chrome says whatever—I'm in the same boat. I still lean towards specificity here as a more maintainable property in larger code bases.

So, the averages match some of the earlier expectations. That last one is the most important since it blew up on Twitter. The difference is clearly not as stark when averaged out.

A note on CSS performance testing

These kind of tests are cheats and always going to be somewhat inaccurate from the real world. They involve duplicating series of the same elements over and over to stress test a page. That's useful, but that's not everything. In the future, a more accurate real world example page is needed.

Feedback

Tell me I'm wrong, that I'm an idiot, or that I'm missing a test case you'd like to see. Let me know with an issue, or open a pull request. Whatever it is, just go for it.

License

Released with <3 under MIT by Mark Otto.