CSS performance

Do you ever wonder about the performance of using CSS-reset? Well, until today I didn’t either.

I’m currently in the middle of implementing a new webapp based on AngularJS. We’re implementing extremely complicated swipe-functionality in this webapp, and this presents us with huge performance difficulties – especially on older tablets and smartphones. My old iPad 1 is having a very hard time trying to keep up with the demands.

That’s why I was investigating and debugging performance bottlenecks today.

I used Google Developer Profiler tool to investigate both the JavaScript and the CSS performance on the site. And to my surprise one of the most important performance issues was the usage of a universal CSS-reset matching all elements in the DOM. As you can see in the picture below, the reset uses a lot of processing power. (click on the image in order to view it properly)

CSS_reset_performance

The picture displays the result of a profiling being made of a single swipe. The consequence is that each time a user swipes, the tablet has to do all this rendering over and over again – which makes the screen flicker and gives the end-user a very poor experience. In fact, a single swipe would result in the desktop browser spending as much as 79 ms to render.

The solution to this – of course – is to make the reset more specific. Instead of matching the * selector – match tags. The result of this was that I went from a render time of 79 ms to 20 ms. I know that this is not much – but these measurements were done on my desktop PC with all its processing power. The effect was noticeable when I loaded the site on my iPad 1 – and the end-user will appreciate this simple fix.

Advertisements

One thought on “CSS performance

  1. Great post Peter – and thank you for sharing your hard earned performance tip 🙂
    I was watching a “code-through” (a variant of walk-through) where a slider was build in a tutorial – http://thecodeplayer.com/walkthrough/make-an-accordian-style-slider-in-css3 – I noticed a part in the tutorial where some CSS hack was added to avoid flickering and now I thing perhaps you could reuse that part. So watch the above accordian being build and listen in for a way of avoid flickering.
    Actually you can go right to the end of the tutorial and inspect this:

    /*A small hack to prevent flickering on some browsers*/
    .accordian ul {
    width: 2000px;
    /*This will give ample space to the last item to move
    instead of falling down/flickering*/
    }

    /Sten

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