Slow website picocss.com

[ricardasjak]

I don't know if this falls into a bug category or maybe nice to have feature... Sorry in advance, if this is a bit off topic.

Describe the issue

open https://picocss.com/docs/version-picker switch browser tab back and forth and the switch back is noticeably slow. There were some other cases too, when UI feels very slow at times. I don't think it's version picker specific problem.

Reproduction URL

Open https://picocss.com/docs/version-picker Switch to other tab in your browser, and then switch back

Environment

Chrome latest Mac M1 Pro, 32GB RAM

[marko878]

the wut now?

[mwargan]

@ricardasjak hmm.

There does seem to be some sort of leak on this page. I am seeing a continuous increase in listeners and JS heap.

[brtz]

Hi there,

can confirm, happens on Edge on two different Macs (m1 air and m1 pro) after a few clicks. I could not reproduce this with a Windows device yet, but that might be because the machine's heavier speced.

[FWeinb]

Also noticed this issue and tracked it down to be related to this: https://github.com/picocss/pico/blob/1039a4788d6abc368d5485ae6bac84a8f0e3096f/scss/components/_card.scss#L15 https://github.com/picocss/pico/blob/1039a4788d6abc368d5485ae6bac84a8f0e3096f/css/pico.css#L322 https://github.com/picocss/pico/blob/1039a4788d6abc368d5485ae6bac84a8f0e3096f/css/pico.css#L271

But the main issue is the use of box-shadow inside the transition property here: https://github.com/picocss/pico/blob/1039a4788d6abc368d5485ae6bac84a8f0e3096f/scss/forms/_basics.scss#L186

As chrome based browsers don't support box-shadow compositing (see below) (Taking 342ms on a M4 Pro blowing the frame budget of ~8ms (120hz) by ~38x)

[benhovinga]

Also seeing performance issues with this CSS Library. M2 Macbook Air, Brave browser.

I notice it most when open the DevTools (F12) with it docked to a side of the window. Resize the DevTools dock back and forth fast and it lags so much. Visit any other website or remove the CSS Library and do the same thing, you will notice no lagging.

[benhovinga]

I agree with @FWeinb that the Card Component (<article> tag) is the cause of the performance issues.

If I disable the card component module within my styles.scss file the performance improves.

@use "@picocss/pico/scss/pico" with (
  $modules: (
    "components/card": false
  )
);

Brave Browser Version 1.78.102 Chromium: 136.0.7103.113, M2 Macbook Air

[benhovinga]

I have traced down a little further and believe that the shadow helper function is the root cause of the performance issues.

https://github.com/picocss/pico/blob/1039a4788d6abc368d5485ae6bac84a8f0e3096f/scss/helpers/_functions.scss#L18

It is called from _light and _dark default themes

https://github.com/picocss/pico/blob/1039a4788d6abc368d5485ae6bac84a8f0e3096f/scss/themes/default/_light.scss#L60

https://github.com/picocss/pico/blob/1039a4788d6abc368d5485ae6bac84a8f0e3096f/scss/themes/default/_dark.scss#L60

If I change these lines to use a basic value instead of the function, the performance issue is fixed.

// Example
#{$css-var-prefix}box-shadow: 10px 5px 5px red;

The shadow function generates a 7 layered shadow. Does it need to be 7 layers?

[benhovinga]

I had a few more moments to work with it and I think I have come up with a solution that isn't so computationally expensive.

// scss/themes/default/_light.scss [ln 60]
#{$css-var-prefix}box-shadow: functions.shadow($slate-400);  // Before
#{$css-var-prefix}box-shadow: 0 0 1.5rem -0.2rem #{rgba($slate-400, 0.25)};  // After

// scss/themes/default/_dark.scss [ln 60]
#{$css-var-prefix}box-shadow: functions.shadow(color.mix($black, $slate-950));  // Before
#{$css-var-prefix}box-shadow: 0 0 1.5rem -0.2rem #{rgba(color.mix($black, $slate-950), 0.25)};  // After

To me and my old eyes these look visually identical and with less load on the browser. Performance is fixed.

Light mode

Before

After

Dark mode

Before

After

[jackyscript]

I had similar performance issues and for a project of mine, I fixed this by overwritting the box-shadow css using scss, see here https://codeberg.org/dejafu/jackyscript/src/commit/117846b40ce512d3bef7e320b609cb0fa3f40e62/app/assets/scss/main.scss#L20

But it would be great, if this fix of @benhovinga or something similar could be applied!