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

williamsdev profile image

Horóscopo com IA: Uma Experiência com Next.js e Gemini

Frank William -

thisweekinjavascript profile image

JavaScript vs. Deno, Vite 6, Astro 5, and more

James -

xmanhugo profile image

How to understand the ins and outs of how DNS really works.

xmanhugo -

dazevedo profile image

What is SignalR? A Real-Time Communication Framework for .NET

Daniel Azevedo -