CSS Variables performance benchmark 2021

2 min readAug 26, 2021

Custom properties are available since Chrome 49 (March 3, 2016). Although Internet Explorer 11 doesn’t support them, maybe it’s time to jump on the bandwagon? What about performance?

I’ve decided to create a simple benchmark to check if 5000 variables can slow down page rendering. If you want to review or reuse my code, you can find it here.

Testing conditions

Generate 5000 colors.
Create 10000 HTML nodes (reusability factor = 1).
Output one HTML file with standard CSS classes.
Output one HTML file with CSS variables.
Run local node HTTP server and benchmark both files five times (using Chrome performance tools).

Linux, Google Chrome Version 92.0.4515.159 (Official Build) (64-bit)

Guest profile, no browser add-ons at all.

Testing tool

git clone git@github.com:fedek6/css-variables-benchmark.git
cd css-variables-benchmark
yarn
yarn build
yarn start:compiled [number of random colors] [reuse factor]

This way you’ll get a directory called bundle with two files, static and dynamic.

You can use a package called http-server and benchmark both variants using Chrome performance tools.

Results

The dynamic file is obviously larger (because you need to output all variables and class names using them). Custom properties are advantageous when used in more complex situations or when you need to declare different themes.

Static CSS (ms)

Dynamic CSS (ms)

Conclusion

Using 5000 CSS variables on 10 000 HTML nodes is only 0.7% slower than raw CSS. You must take into account that this is a very simple usage scenario. From what I see, just by using custom properties, you won’t slow down your website rendering significantly.

You should be careful when using variables in CSS calc or when changing them often using JavaScript.