Performance Comparison Between Panda and Tailwind with CVA

[kris-ellery]

Hi there!

I'm an big fan of Panda and have recently conducted performance comparisons against other CSS tools. My focus has been on component render times. I've found that Panda's runtime is notably slower than Tailwind when using cva equivalents.

I've set up dummy Next 14 apps using React 18, each rendering 100 instances of a Button component. These instances vary in size and tone props. For performance insights, I utilized the React Profiler in DevTools' console, which records both the mount phase and the update phase triggered by a forced re-render button.

Here are the links for reference:

Panda with its own cva

• App: https://codesandbox.io/p/devbox/panda-button-render-performance-5d2xwh
• Preview: https://5d2xwh-3000.csb.app/

Tailwind with cva (Class Variance Authority)

• App: https://codesandbox.io/p/devbox/tailwind-button-render-performance-yjdmdr
• Preview: https://yjdmdr-3000.csb.app/

From my tests, Tailwind with cva outperforms Panda by a factor of 2-3x. I'm unable to pinpoint the exact bottleneck in Panda. This performance gap makes me hesitant to recommend Panda for production environments, especially considering that extensive use of its features might further impact the styled-system size and slow down render times.

I would greatly appreciate any insights or suggestions to enhance Panda's render performance. Thanks!

[astahmer]

hey, thanks for reporting this ! since Panda has to transform style objects to classes, it will always have a little bit of overhead vs just writing the final classes.

that being said, a quick & easy fix is to cache the object -> string functions, for example you can edit your styled-system/css/cva.mjs file:

• add memo in the list of imports from ./helpers.mjs
• line 52, change return Object.assign(cvaFn, { to return Object.assign(memo(cvaFn), {

it should be much better now and is in fact what I did here

also, if you're using anything that can pre-render to HTML (Astro, RSC, etc) you can avoid this issue entirely by automatically inlining classes at build-time, without ever needing those runtime functions

[kris-ellery]

Thank you @astahmer for the quick reply and patch in Panda. I'll run more tests with the memo applied.

As I am working on a React design system library that requires shipping static CSS, build info file, and a preset for various use cases, I cannot pre-render HTML on my side, nor can I expect that from my consumers. However, thats good to know we can pre-render HTML via RSC in the future.

[segunadebayo]

Thanks for reporting this @kris-ellery.

In addition to what @astahmer mentioned, I should also add that the comparison is slightly uneven. The cva in Panda is equivalent to using tailwind-merge and class-variant-authority since it merges and deduplicates at the same time.

cva = tailwind-merge + class-variant-authority

We need to update the comparisons and measure the runtime diff again. That said, I'm certain there are areas in the code we can optimize further.

[kris-ellery]

@segunadebayo great point, apologies for not considering the merge functionality and deduplication.

[segunadebayo]

Ran some tests based on @astahmer PR, the performance should be much better now
#1986 (comment)

[SlexAxton]

curious if there’s a discussion anywhere of a build time transpilation system for object hashing to strings and stuff, since i think most if that work is doable at build time.

[astahmer]

did that here https://github.com/astahmer/pandabox?tab=readme-ov-file#pandaboxunplugin

[SlexAxton]

Beautiful. Amazing. Thank you.