/css-in-js-benchmark

Performance comparison of css-in-js libraries

Primary LanguageJavaScriptMIT LicenseMIT

Libraries compared:

About the setup:

  • This is a Next.js SSR repository with three URLs - one for linaria (/linaria), one for styled components (/styled-components) and one for the css modules (/regularcss).
  • All the URLs load the same component - containing 22 buttons that change their color every 1 second as the React component is rerendered (via state change).
  • The styling CSS for these URLs is setup to be generated on the SSR and set internal via <style> tag within the page's HTML.
  • The URLs are:
    • /linaria - the page's styling is handled via linaria.
    • /styled-components - the page's styling is handled via styled components.
    • /regularcss - CSS modules.

Page Loading Performance:

  • The page loading test was done via WPT (Fast 3G - Virginia, US - Emulated Moto G4):
  • The start render and the LCP for all the three URLs were similar (no notable deviation).
  • The amount of JavaScript loaded for the three routes (sizes in gzipped kBytes):
    • CSS modules : 70.3 kB
    • linaria : 72.4 kB
    • styled-components : 84.1 kB

Re-rendering Performance:

  • The rerendering performance was measured by loading the page on Xiaomi Mi A2 mobile (on Chrome 94.0.4 measured via Remote Debugging devtools - Performance tab).
  • The library versions for this run were - linaria 3.0, styled components 5.3.3
  • The runs were undertaken 5 times and below are the median numbers: Rendering Performance styled-components vs linaria vs baseline (css modules)

Relavent reading material: