https://danielnagy.me/posts/Post_tsr8q6sx37pl
TL;DR
I recently migrated my website from CSS-in-JS to inline styles and was pleasantly surprised by the performance improvement. Encouraged by this, I wrote a blog post suggesting that inline styles could enhance website load times.
However, some skeptics rightly pointed out that my migration from a specific CSS-in-JS library to inline styles wasn't sufficient evidence to claim inline styles were faster than CSS. Determined to uncover the truth, I embarked on a comprehensive experiment.
The experiment involved migrating my entire website to CSS, a painstaking process. I meticulously crafted over 2,000 lines of handwritten CSS, utilizing BEM for component styling and atomic CSS for non-component elements. Then, I built three versions of my React app: one with inline styles, one with a separate CSS file, and one with CSS inlined in the document head.
Deploying all versions to a single testing environment, I meticulously measured various metrics including server render time, HTML and JavaScript sizes, browser render time, and web vitals.
Server render times showed no significant correlation between inline styles and CSS. HTML size comparison revealed inline styles producing larger documents, yet after compression, they were smaller than inline CSS due to compression efficiency. JavaScript bundle size increased slightly with inline styles but became negligible after compression, resulting in the fewest bytes over the wire.
Browser render performance favored inline styles, particularly in putting pixels on the screen quickly, especially evident on low-powered devices. Web vitals, including first contentful paint and largest contentful paint, often favored inline styles over CSS.
In conclusion, my experiment suggests that inline styles could offer better performance than CSS, especially considering factors like browser rendering and initial page load. However, I acknowledge that this may not be universally true and encourage others to conduct their own experiments to gather more data.
Top comments (1)
Maybe the reason for your improvement lies more in the way you used CSS before. CSS in JS can be convenient, but may influence the way a site is rendered.
Rendering takes place in at least two steps:
In fact there are much more steps, but this are the main stages. Building the DOM usually is much faster than rendering, regardless if you build the DOM from HTML or build or manipulate the DOM with Javascript - if HTML and JS are located on the main page.
But this may change, if your system consists of multiple external libraries, that need to be loaded, specially if the browser does not know they will affect CSS. It may happen, that part´s of the pages start do be rendered before all CSS is finished. If the browser recognizes some changes in the CSS setup, he might be forced to start again. This might be even worse if a framework like react is working in the background, that needs to by loaded and executed before any other library is loaded.
I am using inline sytles very frequently (in a probably very different setup than yours), but could not really find any difference in performance of standard CSS and inline CSS, the pipelines here seem to be highly optimized. I did not make any real validation or measurements, so it is just an impression.