Discussion on Emotion's performances (LightHouse "performance" score)

[Vadorequest]

I came across https://daily.dev/blog/why-i-moved-from-styled-components-to-tailwind-css-and-whats-the-future-of-css-in-js today, and although I had noticed my app has relatively bad performances (score of 40-80, kinda random) I hadn't linked it to Emotion.

I would like to know if there are any plans regarding improving the performances, I have very little background regarding how Emotion works behind the wheel.

Is it possible to have a summary of the known performance issues, what's planned to improve those, and how I, as a developer, can improve performances.

For instance, I write most of the styling using css=css() (inline), is that worse than using the Styled Component approach?

Here's an example of a Btn component.

Here is the LightHouse score for our production build: https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fnrn-v2-mst-aptd-at-lcz-sty-c1.vercel.app%2Fen (Score of 67)

Any advice/guide/doc regarding those would be very much appreciated! 😄

[Andarist]

Emotion should not yield a noticeable perf impact if you SSR stuff correctly - caching is helpful as well.

I know success stories of the very perf-oriented brands using Emotion with success (and actually praising it for its perf and API) so I don't really think that there is that much to improve on our side.

[Vadorequest]

I'm not sure if I "SSR stuff correctly", I'm using Next.js and there is some high complexity behind how it works with Emotion.

What do you mean by "caching"? Browser pages caching?

[Andarist]

I'm not sure if I "SSR stuff correctly", I'm using Next.js and there is some high complexity behind how it works with Emotion.

It's hard for me to comment on this one without knowing more about your setup.

What do you mean by "caching"? Browser pages caching?

Yes, both this and caching things server-side. This depends highly on your architecture and the nature of your application.

[Vadorequest]

The setup is open-source: https://github.com/UnlyEd/next-right-now/tree/v2-mst-aptd-at-lcz-sty

To install the project locally:

1. git clone https://github.com/UnlyEd/next-right-now.git nrn-quick-start
2. cd nrn-quick-start && git checkout v2-mst-aptd-at-lcz-sty
3. cp .env.local.example .env.local
4. yarn
5. yarn start
6. Open http://localhost:8888

I don't do anything particular regarding Emotion and SSR, everything is handled by Next.js directly.

The one thing I notice in particular is the bad Performance score given by LightHouse, even using static pages in production mode.

[Andarist]

Thanks for the links - I would love to jump into analyzing the situation there but I'm afraid that my backlog of stuff to handle in OSS is just too big at the moment to do that right now.

[Vadorequest]

It's fine, I totally understand. I don't even know for sure if it's related to Emotion. I'd need to completely rewrite the app and replace everything using tailwind or something similar to compare both, that's quite some work and I'm also too busy to do this at this time, if ever.