CSS perf: Colors

Published in

Sad developer

3 min readJan 10, 2017

tl;dr

If you are paranoid about performance, use hex when declaring your colors and short hex whenever possible. If you need transparency use RGBA and stay the hell away from HSL(A).

Let’s face it, performance is important.
And although we now have incredible internet speeds in developed countries, we can’t neglect the rest of the world.

And what’s better than a blazing fast website? Nothing I say. We already minify and gzip our assets, and distribute them over a CDN, but there is a lot more we can do.

Let’s start this series with a simple and cheesy one: colors. I say cheesy because we can argue that the way we specify our colors won’t hurt our loading times. I’m inclined to agree, but I can think of some use cases that require extreme optimization, and for those use cases this might be useful.

The problem

There are a lot of ways to specify colors in CSS. for example this color

can be specified like this:

The question is: Which one should we use? If we approach this from a size perspective, #639 is the smallest and therefor the best! But is it always like that? let’s analyze this further.

Tests

To test this, I used jsperf to automate the process.
I used the following browsers:

Safari 9.0.3
Chrome 47.0.2526
Chrome Mobile 49.0.2592

And I created three revisions to test three different things.

Rev 1

named color
short hex
long hex
RGB
HSL

Rev 2

RGBA
HSLA

Rev 3

lower case hex
upper case hex

You can check the tests and results here.You can even run the tests yourself to compare with my results.

Results

Note that those are my results with my machine and my browsers. Your mileage may vary.

Rev 1

This is the base of our tests. And we can see that the short hex is always the best option followed by long hex. The difference between Named color and RGB is marginal on Desktop Chrome, but it’s noticeable on Safari and Chrome Mobile. HSL is a disappointment.