CSS vs CSS-in-JS Performance

Ever wanted to redo CSS all over again, but with a new tool/framework?

What is it?

`styled-components` is a CSS-in-JS styling framework that uses tagged template literals in JavaScript and the power of CSS to provide a platform that allows you to write actual CSS to style react components, while being boasted about its developer experience (also known as DX) and performance.

But is the hype well-deserved or are developers being led astray?

Let’s get the first thing out of the way.

You basically write CSS, but in Javascript. You can actually name your tags so it’s easier to identify them. Just for that, this tool is an automatic 10/10 for most React developers (myself included).

You can also change the values of properties with Javascript. This is great for apps with dynamic content.

So then why not use styled-components for all projects?

The question I want to pose, would people still use it if they knew they are leaving 30% or more money on the table? No, they wouldn’t care about it at all.

But in certain cases, it does affect the revenue of your app. One thing I learned during my time creating web apps for phones is that NOT all people (surprinsingly) use the latest iPhone. There are still people who use devices with Android 4.4.4. I know, unbelievable!!!

So before you create your new project with this technology (or before you change the current one in production), take a minute and consider how important is performance to your app.

I couldn’t really find on the internet an article which talked about this, but it made sense to test the hypothesis that modular CSS may be more performant. So I spent a few days and switched the entire codebase of an in production app from styled-components to modular CSS.

Pain points of styled-components

• one extra package
• bigger JS bundle
• affecting CSS performance? (what we’re trying to find out here)
• CSS files and JS files are not processed the same

How I measured

The process was pretty straight-forward, but of course I had some road blocks, more specifically where more logic was involved in the styling. The tests show the average between 3 runs on both Lighthouse and the Performance tab on Chrome. I have set throttling to Slow 3G and CPU throttling to 4x.

Without further ado, let’s see what Lighthouse had to say about the changes:

Lighthouse performance audit

Styled Components Performance

Average performance range: 13809 ms
FCP: 2.2
SI: 9.1
LCP: 13.1
TTI: 13.2

Modular CSS Performance

Average performance range: 8995 ms
FCP: 2.1
SI: 7.6
LCP: 12
TTI: 12.5

Wow, this is a very big difference, considering it’s almost the same CSS. In the performance range, we are saving 4814 ms, almost 5 seconds! A 35% reduction. That’s insane!

The boost in Speed Index and the other metrics is also pretty big, considering the fact that CSS rules are not changed at all.

Of course, this increase happens with older devices, so don’t expect the latest phone to have the same metrics, but it paints the picture needed for us. If your product is used by people who use lower-end phones, you are missing on revenue.

Conclusion

You can use both technologies in React and achieve amazing websites. It’s just a matter of selecting the right tool for the right job.

If you have a very highly customizable dashboard, where your usual users are on a desktop, it may not make sense to change your codebase to modular CSS. Whereas, if your users come from mobile devices, I would suggest to try and see how faster your website is with modular CSS.

I’m expecting to see some of your personal results in the comments!

You’ll probably like these, as well:

React State Management in 2022

I wanted to create a SaaS and failed before I started

Create a Chrome Extension with React and inject it into webpages