DEV Community

Cover image for Switching to Inline Styles Could Save You 15% or More on Page Speed
Daniel Nagy
Daniel Nagy

Posted on

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

#webdev #html #css

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.

Top comments (1)

Collapse
 
latobibor profile image
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.

Read next

lokesh_singh profile image

Understanding APIs and Building Your Own 🚀

lokesh singh tanwar -

fleek_ profile image

Introducing Fullstack Next.js Support on Fleek: Build, Deploy, and Scale Dynamic Apps with Ease

Fleek -

hkp22 profile image

Unwrapping JavaScript ES2024: Key Features Every Developer Should Know

Harish Kumar -

lithephp profile image

Improving the Performance of Your PHP Application with Lithe Cache

Lithe -