Frontend overall performance issue (see video)

samuele2723 commented 8 months ago

Hello there, thanks for your work! It’s very nice and cool. I would really like to use it.

After few tests i tried to implement bubble in my main interface (quite heavy on frontend) and my need is to implement it for my floorplan, that needs pops up when i click floor icon and inside there is a floor black and white floorplan where i have some input_select on each floor selecting and changing color state of a room (it is a visual selector, lime green)

the selector works flawless and responsive in a normal page without bubble card popup, and also everything is fine with bubble card popup if the page behind is light and is not my main dashboard…..

THEN PROBLEM HAPPENS if i use bubble cardpopup with same code with my heavy background interface in the back, as you can see from second video the input_select and color rendeing of the system is unresponsive.. i am trying to troubleshoot but hard to tell what’s wrong for me

samuele2723 commented 8 months ago

Expected responsiveness when selecting rooms (lime green)

https://github.com/Clooos/Bubble-Card/assets/66970905/775fce52-ea18-459b-9a12-3553c7e98434

samuele2723 commented 8 months ago

Super slow responsiveness when in main dashboard

https://github.com/Clooos/Bubble-Card/assets/66970905/5bd4166a-dff6-4b07-b12a-cbd938fbc38b

samuele2723 commented 8 months ago

Here another video from mobile, i noticed that whenever i select input select all the items (button cards with just a circle and box shadow) contained in the image-element card are re-loaded. Maybe that’s the reason why is so unresponsive? It is maybe try refreshing the whole dashboard? Other popups like browser-mod with same cards don’t behave like that

https://github.com/Clooos/Bubble-Card/assets/66970905/5fa0c850-cfa9-4bd4-94ab-9dbd25cf6dd4

Clooos commented 8 months ago

Hi and thank you for your feedback.

Can you tell me what is your Bubble Card version?

samuele2723 commented 8 months ago

Hi and thank you for your feedback.

Can you tell me what is your Bubble Card version?

First of all merry xmas!🎄 My version is 1.5.3

i did several other test using input number or bolean instead of select to change my room selector but the behaviour is the same, when selecting something takes time to load (not the initial popup loading that is fine)

please let me know if you need my code to check

Clooos commented 8 months ago

Thank you! Merry Christmas to you too!

Could you try the new 1.6.0-beta.2 available on HACS and tell me if there is some improvements?

samuele2723 commented 8 months ago

Thank you! Merry Christmas to you too!

Could you try the new 1.6.0-beta.2 available on HACS and tell me if there is some improvements?

hey, just tested and is definitely improved. Now responses always with 1/2 sec delay.

https://github.com/Clooos/Bubble-Card/assets/66970905/b620c20e-b43f-436e-a0d6-f6f111b103a6

https://github.com/Clooos/Bubble-Card/assets/66970905/9325f30d-8981-4882-9255-ee12a83509be

Seems anyway with a significant delay on the main page compred to a test one where i still kept the main picture element card but still way faster, please look

Clooos commented 8 months ago

I've released a new beta, can you try it? https://github.com/Clooos/Bubble-Card/releases/tag/v1.6.0-beta.4

samuele2723 commented 8 months ago

I've released a new beta, can you try it? https://github.com/Clooos/Bubble-Card/releases/tag/v1.6.0-beta.4

I was testing beta3 and looked good, but i am with laptop till 30th that i am back home so it’s a different device but looks either perfect or very good compared to start

i will test now beta4 as well but not sure if i can notice difference till i get home with slower tablet

for the time being really thanks!!!! Super support

Clooos commented 8 months ago

Can't wait to have your feedback after testing it on on your tablet 🤞

And you're welcome!

samuele2723 commented 8 months ago

Hello @Clooos ! unfortunately no good news.. seems very similar to beta2 but strange iphone vs tablet performance

here videos showing behaviour on

1) full dashboard 2) test dashboard without other cards

I did the video from:

surface 4 pro tablet (my tablet) chrome
Iphone SE 2022 ios app
macmini m1 chrome

Usually, the iphone is the slowest among all in general usage but for some reason the tablet is kind of unusable with the popup card.. i am getting crazy and seems not related to having more or less thing in the popip but rather in the background cards

https://github.com/Clooos/Bubble-Card/assets/66970905/a6d08cfe-6d39-4e05-8a33-9a150bdecd6c

https://github.com/Clooos/Bubble-Card/assets/66970905/12c21eec-7baa-4a1a-921c-3954f2a702ad

https://github.com/Clooos/Bubble-Card/assets/66970905/f6a65e4b-8370-4392-b533-89c859a8c44e

Clooos commented 8 months ago

Can you try the latest beta? 🤞

https://github.com/Clooos/Bubble-Card/releases/tag/v1.6.0-beta.5

samuele2723 commented 8 months ago

Dear Cloos, please find results with beta5:

overall seems that even initial loading of card content is slow compared to desktop opening of the dashboard, so please also take a look at my code to see what cards are slow (seems the auto-entities is the slow one rendering)
Once loaded, still when i switch seems that the input_select is immediate because i see the change on the other devices, but again is slowly rendering the changes on the tablet

So maybe i can't appreciate changes beta to beta but we need first to understand what's wrong loading the specific content, please check the text file in zip?

popup with auto entities.rtf.zip

samuele2723 commented 8 months ago

https://github.com/Clooos/Bubble-Card/assets/66970905/17d3e402-2972-46d0-bd2a-ffada86653f6

https://github.com/Clooos/Bubble-Card/assets/66970905/c6b9d834-01e6-4b52-9405-165e57e76ccc

Clooos commented 8 months ago

I've just looked at your YAML and it seems that you are using a lot card_mod in your cards, this is maybe not related but could you try to remove card_mod to see if it can be the cause of this?

Clooos commented 8 months ago

Any chance that this is better now? 🤞 https://github.com/Clooos/Bubble-Card/releases/tag/v1.6.4

samuele2723 commented 8 months ago

Thanks, i already updated it. I will test soon because i think i’ve found the issue in my card. Seems is the auto entities particularly slow in the queries i needed (domain and entity tipe) i am doing something different with entity_id and joker * with name query and it’s faster.

Give me this week so i can give you better feedback

regards

samuele2723 commented 8 months ago

Hello there, performance now seems way better, some small things still there:

with card_mod, the card is kind of fuzzying, i had to remove all card_mod style and use button-card styles
with 1.6.3 compared to 1.5.3 the popup triggered by entity state is not working. I tried several time rolling back to 1.5.3 and works, i'm using an input_boolean entity to trigger the popup

samuele2723 commented 7 months ago

Hello @Clooos ! New test with 1.64. I noticed something very curious! Problem is not device (tablet is faster) is related to cards in the background. After the optimization (removed card mod etc) it works really well on iphoneSE, and on tablet instead super slow BUT look, it depends if i keep in the background the big floorplan, if i scroll down without changing page the speed on tablet goes up

Here iphone

https://github.com/Clooos/Bubble-Card/assets/66970905/230821a1-f0fb-446a-a347-bf34e492cd01

here tablet please notice how changes when i scroll down without floorplan

https://github.com/Clooos/Bubble-Card/assets/66970905/8ec61f43-83f6-4d03-af67-deb7a4706bf5

samuele2723 commented 7 months ago

I really hope this thing i noticed helps you get the solution. Is frustrating it gets so slow when you have something in the background. Of course is related perhaps to the fact that i use auto entities and entity switch inside your popup card but should not care about what is in the back for loading the new selection right?

drashish87 commented 7 months ago

Admire your work, but having the same issue! I liked your bubble card so much that for all my home dashboard items created a popup card for it, maybe 20 popup cards 😄 , but this cause a lot of crashing on my iPhone and constant reloading of my dashboard and even crashing at times, now limited to about 5 popup cards and it works fine, not sure if you can further optimise so that we can add more cards on single page which less resource intense. Anyways love your work

Clooos commented 7 months ago

I was working on that for the past weeks, and I can say that the next release will be much more efficient! I should be able to release it next week!

samuele2723 commented 7 months ago

I was working on that for the past weeks, and I can say that the next release will be much more efficient! I should be able to release it next week!

thank you about that!

drashish87 commented 7 months ago

I was working on that for the past weeks, and I can say that the next release will be much more efficient! I should be able to release it next week!

Very excited to hear that, looking forward to it, thanks for your efforts

Clooos commented 6 months ago

Hi! Have you tried the new v1.7.X? It might resolves your issue 🤞

https://github.com/Clooos/Bubble-Card/releases/tag/v1.7.1

drashish87 commented 6 months ago

Yes it much more faster, looks like it's fixed! Excellent work, thank you

Clooos commented 6 months ago

Hell yeah! And you're welcome! 🍻

Clooos / Bubble-Card

Frontend overall performance issue (see video) #260