Performance issues

[areyoufserious]

Checklist

• [ ✅] I updated the card to the latest version available
• [ ✅] I cleared the cache of my browser

Describe the bug This card seriously affects Frontend Performance, especially if I use tens of buttons

Version of the card Version: latest

To Reproduce Any, even clean installation of HA. Reproduces on any device I tried: MacBook Pro, latest iPhone pro, android tablet Worst performance on safari on Mac

I read a lot of same reports in caed’s thread On official HA forum

any information about performance improvements ?

[RomRider]

I run 50 buttons on some of my views without any issues. Obviously, it depends on the complexity of your configuration.

TBH, a MBP shouldn't have any problem rendering hundreds of those cards. If it doesn't, you probably have another issue.

Also "performance issue" doesn't mean anything without details, configurations and proof other than "a feeling".

[samuele2723]

I run 50 buttons on some of my views without any issues. Obviously, it depends on the complexity of your configuration.

TBH, a MBP shouldn't have any problem rendering hundreds of those cards. If it doesn't, you probably have another issue.

Also "performance issue" doesn't mean anything without details, configurations and proof other than "a feeling".

Hello Rom! Thanks for your awesome card. It’s my most used card in the configuration.

i quote this because i also encountered severe performance issue and doing tests i noticed that this happens not by quantity but how they are templated.

i use some template and have custom_fields containing other template with again custom_fields.

this matrioska slows down A LOT the loading, can i share code to you for some check?

[areyoufserious]

I run 50 buttons on some of my views without any issues. Obviously, it depends on the complexity of your configuration. TBH, a MBP shouldn't have any problem rendering hundreds of those cards. If it doesn't, you probably have another issue. Also "performance issue" doesn't mean anything without details, configurations and proof other than "a feeling".

Hello Rom! Thanks for your awesome card. It’s my most used card in the configuration.

i quote this because i also encountered severe performance issue and doing tests i noticed that this happens not by quantity but how they are templated.

i use some template and have custom_fields containing other template with again custom_fields.

this matrioska slows down A LOT the loading, can i share code to you for some check?

@samuele2723 Thanks for describing your case. I also use a lot of custom fields and maybe this is the cause of problems with performance

@RomRider what information will be helpful for you ?

[Spirituss]

I run 50 buttons on some of my views without any issues. Obviously, it depends on the complexity of your configuration.

TBH, a MBP shouldn't have any problem rendering hundreds of those cards. If it doesn't, you probably have another issue.

Also "performance issue" doesn't mean anything without details, configurations and proof other than "a feeling".

@RomRider I have very serious performance issues with my Lovelace (about 7k+ lines) with mostly custom-buttons. It rediculously slow on Mac M1 Pro on Safari, but fast on Chrome. And it is always very very slow on iPhone 14 Pro.

[areyoufserious]

@Spirituss btw how intense do you use templates?

[Spirituss]

@Spirituss btw how intense do you use templates?

@areyoufserious I use about 45 templates, ui-lovelace is about 5k lines. It was not fast from the very beginning, but from some iOS/HA version the situation became awful. If I open HA mobile client on the iPhone 14 Pro - the loading of the lovelace takes about 20 sec!!!

[samuele2723]

I mitigated my performance issue with this awesome card (thanks so much Rom for this) reducing matrioska nest card in card to 2 or 3 level max, and not having stack-in-card nested in button-card

not sure why tho but hope it helps

[Spirituss]

not having stack-in-card nested in button-card

Do you mean the using of button-card inside stack-in-card? How do you create vertical stack of cards?

[samuele2723]

Yes, i mean prevent having also button-card inside stack-in-card solved a lot of my performance issue.

to achieve that i use the grid layout like this, you obtain same result

```yaml
type: custom:button-card
custom_fields:
  card_1:
    card:
      type: button
      icon: mdi:home
      icon_height: 48px
  card_2:
    card:
      type: button
      icon: mdi:alpha-b-circle
      icon_height: 48px
  card_3:
    card:
      type: button
      icon: mdi:alpha-c-circle
      icon_height: 48px
  card_4:
    card:
      type: button
      icon: mdi:alpha-a-circle
      icon_height: 48px
styles:
  grid:
    - grid-template-columns: 1fr 1fr 1fr 1fr
      grid-template-areas: |
        "card_1 card_2 card_3 card_4"
      align-items: stretch
    # defaults for each card
    - '--ha-card-box-shadow': none
      '--ha-card-border-radius': 0
      '--ha-card-border-width': 0
  card:
    - padding: 0
      box-shadow: 2px 2px gray

[samuele2723]

So you use a button card to be container of other button cards (custom as well) you can do both vertical and horizontal