Switching to Inline Styles Could Save You 15% or More on Page Speed

https://danielnagy.me/posts/Post_capv6evei09g

So easy, a backend developer could do it.

TL;DR

I switched from CSS-in-JS to inline styles and improved the load performance of my website by 18%. I also decreased the complexity of my website, and I decreased the size of my JavaScript bundle by 6.36%. All while maintaining the same developer experience for styling.

Comments

[András Tóth]

I feel a lot of frustration as someone who never drank the CSS-in-JS koolaid because I had decent skills in CSS.

This will be the most efficient way to work with CSS:

• define a small set of defaults that gets you 90% there
• use specificity rules to laser target your elements that needs a bit of difference
• maybe encapsulate repeating patterns into mixins in SCSS or into utility functions

This will result in the least amount of CSS with the most amount of speed.

Why? Because CSS is an exception-based language. It was written for this use case. Forcing CSS not to be CSS and then allowing it to be CSS a little bit will of course result in performance improvements, but it will yield sub optimal solutions still.