Join the Webstudio community

Updated 2 months ago

Slow performance when using new templates in the marketplace

At a glance

A community member is experiencing performance issues when clicking on new templates in the marketplace, where everything slows down and becomes almost impossible to navigate. Other community members try to help by testing various approaches, such as clearing assets, removing pages, and removing global CSS variables. They find that removing the global CSS variables resolves the issue, but they are unable to reproduce the problem consistently. The community members discuss potential causes, such as the quantity of CSS variables, recursion, or specific browser versions, but they are unable to pinpoint the exact issue. They continue to collaborate and seek input from other team members to find a solution.

Useful resources
Hey everyone, is anyone else experiencing this? When I click on the new templates in the marketplace, everything slows to a crawl, and navigating around becomes almost impossible. Would love to know if it’s just me or a broader issue
1
J
M
O
99 comments
Okay once more. this time i cleared all assets and everything else remains the same
Sorry no beuno
can you share the cloned project with me? so add a share link to that last one and send to me
setting up another
I'll have to ping u more often then, jkz
i have some good news this time
testing the 3rd link now
Sweet. I got off an the wrong tangent with assets. Looking back assets weren't something that was the culprit. But we did remove css vars before in the test that worked. That is progress!
Okay CSS vars it is
@TrySound You around? Summary: Cloning a project with global css vars is causing MAJOR performance issues for a subset of users. They can't even move around the cursor (See vid https://discord.com/channels/955905230107738152/1309213239581610075/1309221679934869574)

While Moon Studio is here (as he can reproduce it, we can't), is there anything you want to test or see from his machine?
if it helps this is the specs of my laptop:
Attachment
image.png
So odd! Huge specs. We had someone on a new Mac report this as well
Yeah, I don't have anything else running or taking up memory at the moment either, just Discord and one Chrome tab
@John Siciliano do you have now a minimal reproduction? as in removing everyything that isn't necessary for the repro
Removing CSS vars from global root makes it go from broken to working
I don't have any more tests right now. You could see if you can start removing css vars from the global root (option click) to see if modifying one or a certain one impacts it.

Otherwise I'll let you Bogdan or Oleg chime in with theories and hopefully you can validate them @MoonTime Thanks so much for the help and we'll hopefully get them working soon
Appreciate your time man
To be very clear,

  1. Cloned Positivus (though others have the issue too)
  2. When to global root and click "clear styles"
  3. Create share link and send to moonstudio.
That's how we got it working. We tried deleting so much stuff and nothing fixed it besides delete css vars
ok but can we repro it by creating a few variables or something?
as in minimal amount of steps and instances involved
maybe it will help narrowing it down
Ah two things we can try

  1. I will provide the CSS vars in Craft to manually paste in
  1. I will create a project with a few vars
For a serious perf issue though Im guessing it has something to do with the quantity of CSS Vars + some recursion or something. But who knows, maybe 1 var with recursion can cause it
yeah, that would be interesting, but if neither me or you can repro the original problem, we need someone to verify it every time
@MoonTime can you try another test? Clone this. It contains just two css vars that reference each other https://p-6dcf4b85-1fad-44f7-8fbe-672e9c40e6a6.apps.webstudio.is/?authToken=8590a7a6-c7d8-4210-842f-f1ee86cabc56&mode=preview
Attachment
image.png
yes this is responsive.
Okay thanks. I'll have to think. The fact that the other projects came from the marketplace may impact it
as an idea it may be not the variables itself but whatever was using it in a certain way?
to narrow it down there, you would need to delete instances until the issue stopps
then start deleting values until issue stops until we know which value is doing that
ok but the values on the global root could still be complex values
so my point is that there is maybe one value that has complex parsing that uses the vars and causing it
but then why can't we see it?
Im at a loss for why some machines and not others. Can't wait to find out.

I'll wait for Bogdan to provide a theory. There are over 400 vars. I think some knowledge about how the Global Root works in regard to Marketplace insert could help provide a better theory than my brute forcing.
can it have to do with a specific browser version?
I'm on Chrome/131.0.0.0
@MoonTime what if you go into incognito mode?
yeh still having performance issues in incognito mode
sorry guys Im going to have to head to bed. I'll be back on in 5 or 6 hrs
please come back tomorrow when you get time, so we can experiment more
this is such a painful issue when we can't even repro it
appreciate the the help!
Maybe some basic caching between updates will help
John is waking up a bit later, since he is in the US
I will let him try and nail it, but if you can try and experiment and find the exact cause of this, that would be huge
Hey @MoonTime. I added some caching. Please test the first link without it to reproduce the issue on test environment and the second with it and tell us please if there is a difference.

https://p-418189fd-9bcb-4155-ad96-7c4e14967bd3-dot-main.development.webstudio.is
https://p-418189fd-9bcb-4155-ad96-7c4e14967bd3-dot-cache-styles.development.webstudio.is
Secret: 0000:test@moonstudio.com
Hey Bogdan I just tested those 2 links and still experiencing perf issues
Hm. Can you go to the marketplace > CMS Sitemap > and insert temp test
Attachment
image.png
This contains just two css vars. I want to test Marketplace + minimal CSS vars
and make sure its on a project that isn't already experiencing issues πŸ™‚
hey @John Siciliano this has good performance on a new project
I'll come up with a handful of more tests that range in between the two scenarios right now which are two vars work fine and all the vars don't. Not right now but need to figure this out
The other unknown variable right now is whether or not the marketplace impacts this. I'll need to come up with this test too
3.no vars - no issues
6.only new font on root - no issues
7.no color vars - no issues
Everything other clone had performance issues @John Siciliano
Amazing well thanks for testing!

So nearly certain its CSS vars. No vars works, with sizes vars breaks, but without colors works. So maybe its sizes that break it or maybe its just that gutting that many css vars fixes it.

Stay tuned πŸ˜…
lets try this, if that breaks, then i'll come up with next batch
This is useable, still a slight lag though.
I don't if the latest response helps provide more clarity or creates more confusion πŸ˜‚
No you've been very helpful. I just realized i confused myself though
7.no color vars - no issues
I should have produced a test of only color vars, instead I did only size vars. πŸ€¦β€β™‚οΈ
lol, I have to hit the hay now, but I'll be back on tomorrow for moral support
Still getting performance issues with this one
@TrySound TLDR:

  • Removing all global vars works
  • Removing all "color" vars works (tried to remove anything with colors including box shadows)
  • Removing all vars except size ones causes some perf issues but not terrible
  • Leaving just color vars has perf issues
My guess is its just the sheer volume of vars and not related to anything in particular. I think this because colors just have a f-ton of vars and leaving just size vars still causes some perf issues but not as bad so it seems like no matter what, perf issues are there
If it's just the amount, why can't we repro it?
beats me. I just added over 10,000 vars to mine and it only added a slight lag (very impressive honestly).

But not entirely sure if its related to marketplace or not.

Or something to do with using vars within vars πŸ€·β€β™‚οΈ
I mean if it's just perf issue, you would see issues in those other projects
It must be hardware related
@TrySound is there anything you can think of that could have a browser specific bug? E.g. structured clone API or something
Since computing does not affect I would guess the issue can be in canvas renderer
Maybe some hover triggers rerendering
afaik you can just go to navigator and clicking on different navigator items will have multi-second delay, without even hovering anything on style panel or canvas, is that correct @MoonTime ?
@MoonTime check now should be fixed πŸ™‚ Issue was CSS Preview in the bottom left
Heyy! it's working! brilliant man. good effort with working it out πŸ™‚
Good stuff. Thanks a lot for your help! Sometimes the brute-force problem solving is all that can be done. @TrySound Came through to narrow it down more and fix it. Great work
Time to delete the 90 copies of Positivus lol
Lol glad to have been able to play a part. I'm going to screenshot the page with all the copies first, and add it to my archive of times u guys have been helpful.

Cheers.
Add a reply
Sign up and join the conversation on Discord