My site is extremely slow in Safari, practically unusable

Design help General
1

The title pretty much says it all. My website is unusable in Safari. I’ve never experienced this before and I’m not sure what the cause is.
This is for both the live site, and in the designer. Everything basically freezes.

Any ideas on how I can improve it?

Read-only link →

2

Does it load, but become unresponsive once you attempt to scroll?

Edit: scratch that idea, i’m getting that error on every webflow designer. I’ll keep looking.

3

Hello!

This is definitely odd behavior — when I open your read-only link in Chrome, it performs fine. But when I open it in Safari, it’s really slow. I’m sorry you’re experiencing this. I will ask within our team to see what the cause and fix is for this.

I have some questions:

  1. You mention you’ve never experienced this before. Were you able to successfully use the Designer for this specific project in Safari before?
  2. Are there any custom code snippets or filter effects that could be slowing down site performance?
  3. Can you share the live site? I would like to dig a little deeper into the issue!
2 Likes
4

hi @peej I have found that when you display:none your bg-elements everything starts to be responsive and “fast” again. May be it will be better to write custom css for styling this area and its children or look on each child if there is any another problem but… worth to try?

EDIT: Your problem are Aurora elements

2 Likes
5

Thank you @Stacy, to answer your questions:

  1. I mostly built this on Sidekick on my PC, I only tried to test it for the first time on Safari a few days ago and noticed the issue :frowning:
  2. Not much custom code, just two classes with the backdrop-filter: blur(); filter
  3. Here you go! →
6

Do you know what about the aurora elements could be causing the issue? There’s nothing crazy going on, they’re just a few circles with the blur filter applied :frowning:

It also seems really odd that Chromium and Firefox browsers have no issue handling the site, but Safari absolutely 100% craps out on it…

1 Like
7

I have run basic test in Safari devtools and it looks that this section (probably Aurora elements as when they not in DOM all work relatively smooth ) take tremendous CPU for rendering. Try to find on net similar issues of blur or whatever filter in Safari to find what cause CPU drain.

EDIT: I also see that you re using backdrop-filter on glass class but if you look on caniuse on Safari is this feature supported only with -webkit- prefix. It doesn’t mean that this is the issue but is something you should fix.

I have just search net for blur stats and it is pretty CPU intensive as it render and calculate pixels 1:1 and it is slowest filter in CSS filters options. You are using pretty large areas with large blur value this mean lots of CPU drain and slow rendering response.

Hope that someone will be able to give you some solution.

1 Like
8

Thank you for doing all this research and helping me out @Stan . I’m going to see if I can figure out a less CPU intensive solution, hopefully I can get my design to work!

9

Thank you for helping me find a solution @Stan !!!

The issue:

  • The blur filter is very CPU intensive
  • I had an instance of the filter for each of my “Aurora” elements

Solution:

  • Wrap the all the aurora elements in a div
  • Apply the blur filter to the parent div

In hindsight this is very obvious, I think as I was building it I thought having the blur filter on each “aurora” element would make things more modular if I needed it.

3 Likes
10

hi @peej glad to hear you have found solution :wink:

2 Likes
11

Hi, I have this same issue with the elements with filter: blur but I am not in quite position to wrap them in one parent as they are in various sections. Can anyone help with this?
Note: only iOS works bad, other devices are good.

https://preview.webflow.com/preview/mojetapetev2?utm_medium=preview_link&utm_source=designer&utm_content=mojetapetev2&preview=dac15b45e786a58d863987a0ba9f401c&workflow=preview