Why you should care about CSS page performance

If there’s one thing I’ve learned over the years as both a user and creator of websites, it’s that performance matters.

If there’s one thing I’ve learned over the years as both a user and creator of websites, it’s that performance matters. Whether it is how fast the page loads or how it behaves once it’s in place, how well that page works has a direct impact on my and other user’s opinions of that website. A website that performs quickly and smoothly feels high-quality and that feeling translates to the brand it represents. Can you imagine someone like BMW having a website that was slow and clunky? Even if they weren’t aware of it, their customers would apply that impression to BMW’s cars, viewing them as inferior to the competition.

However, the mental association isn’t always so direct. BMW isn’t a very good example for most people because most people aren’t BMW, or even a car manufacturer. But everyone who has a website does provide a service. Even that person selling bespoke cupcakes from their kitchen to nerds across the globe is providing a service. One where the mental association can still be made because that’s just how the human brain works.

Packman Cupcakes

As such, it’s important to make sure that our websites perform at their best, both for business reasons and as a matter of professional pride.

How to measure page performance

Some of the best ways to test a page’s performance are also the least technical. Two of my favourites are simply to scroll the page up and down and resize the window. Watching as the browser tries to redraw the page can tell you a lot about how well that page is performing. A page that’s just raw text and images will scroll and resize more smoothly than the same text and images that’s been intricately styled.

Of course, I’m not suggesting that you should remove all styles from your pages. That’s would be silly and, quite frankly, ugly.

Let’s assume we’ve built a page, moved it around a bit and decided that we think it could perform better. The first thing we should do in that situation is try to discern where the performance issue is. To that end there are three tools that I like to use.

CSS Stress Test

The first is a javascript bookmarklet by Andy Edinborough called “CSS Stress Test”. This little bookmarklet does a combination of scripted scrolling and sequentially disabling each CSS rule in turn to give you a list of the top offenders. When it’s completed it displays a table of the rules that, when disabled, saved you the most amount of time. It also tells you how many items that rule was applied to. Using this data you can modify your styles so they work better, or simply remove them completely if they’re unnecessary .

Profile Tab

The second tool resides directly in the WebKit developer tools. For those of you who use Chrome (it’s not in Safari just yet) you can click the Profile tab of the Web Inspector and record CSS events. Once you stop recording it presents you with information about the selectors that were called in your CSS and how much time it took to parse them (a percentage of the total).

Timeline tab

Another related feature in Chrome’s web inspector is the Timeline tab. It allows you to record events as you interact with them on the page. By using it you get a breakdown of when things are recalculated, when layouts shift or when items are painted (rendered). This tool, while a little confusing, can be extremely powerful and very useful in narrowing down exactly where the performance starts to degrade.

A few quick tips on CSS performance

  1. One thing we’ve always been told is that CSS rules that target an ID perform better than rules that target a class. While this is true it’s only a tiny difference and usually not worth worrying about.
  2. Generally speaking, if a page is slow to resize it’s likely a layout property (float, fluid width, etc.) and if it’s slow to scroll it’s likely an aesthetic property (such as shadows and gradients) that’s slowing the page down.
  3. CSS 3 properties are some of the worst offenders when it comes to page performance. Especially animations and @font-face. Use them wisely.
  4. Javascript and Flash both have hardware acceleration support in most modern browser; CSS does not except in some implementations of WebKit and even then limited.
  5. Mobile is a thing and even the best mobile phones aren’t as powerful as the best computers from a decade ago.

Putting it all into perspective

When you’re testing the performance of a page it’s easy to get distracted by minutia. One thing I try to keep in mind is that the human brain has a perception delay of around 80 milliseconds. That’s 80 milliseconds of time which our brains view as a single moment. So focusing on a few milliseconds here or there isn’t overly helpful.

Instead of obsessing over getting the best performance you can, focus on the big problems that slow things down and then move on. It’s important to remember what’s truly of consequence and why we’re doing this in the first place: to improve the experience for our users. We are trying to give them the best website we can and how well our pages perform is only one part of a larger story.

As always web development is a collaborative process and I’d love to hear any other tips, tricks and suggestions the community has for testing and improving a website’s performance. Let me (and others) know your advice in the comments below.

Related Post

Minimum viable product (MVP). What is it and why should you care? A minimum viable product is a great way of building user centric digital services in a fraction of the time. It will also lead to big cost savings.
Designing with data and incremental development Designing with data and incremental development are great in principle. But practically they face problems. Problems a new generation of tool help us overcome.
Why you should want to be a user experience developer If you want to secure your future as a developer, become one of the new generation of user experience developers.
  • Good read.

    Spending a lot of time getting very small amounts of time performance is definitely a waste of time, so finding the big holes is definitely sound advise. 

    Bear in mind CSS specificity rules (right to left) and have an overall strategy for your CSS whether that be OOCSS, SMACSS or the best bits from both to ensure that your code doesn’t become too bloated and slow. The recent trend of people using SASS/LESS worries me slightly in that it will generate a lot of poor code because people don’t understand it enough. You should have total control or a full understanding of the CSS that is being generated.

    Your BMW site example is probably not the best however as looking at their site it doesn’t give me a good impression ;)

  • Азиз Газанчиян

    “CSS Stress Test” doesn’t respect iframes. I know they are ugly. but still…

  • As far as I know, Javascript isn’t hardware accelerated, but in some browsers CSS rendering can be. Namely, Safari mobile renders animations and 3D with the GPU. Since hardware acceleration refers to using the graphics chip, I don’t see how Javascript comes into play.

  • marcocarag

    Great post. Seconding Adrian above on CSS abstraction libraries; it’s all too tempting to pile on the specificity thanks to nesting in something like SASS. Looking forward to trying out these tools on my own sites.

  • Website development

    Hardware acceleration Javascript, you can in some rendering of CSS browser. In the mobile Safari browser, which makes GPU and 3D animation. It refers to the use of computer graphics hardware acceleration, I do not know Javascript or come out to play.