Lovelace performance keeps getting worse (Websocket pending?)

Configuration
1

Hi,

I’m not sure if this has directly to do with Lovelace. I noticed that Lovelace performance became worse and worse over the past year. Everything is loading slower and device that were rapid fast a year ago are a lot more sluggish. Especially when changing lovelace tabs you notice it and with loading in elements/cards and icons. It didn’t happen overnight, so I can’t pinpoint what cases this. I looked at the Network performance I noticed this:

image
image855×18 1.18 KB

For reference, I use these custom plugins. I have created test dashboards where I delete auto-entities, card-mod, decluttering-cards to see if that has impact on the load, but made no difference speed wise.

lovelace:
  mode: yaml
  resources:
    - url: /hacsfiles/alarmo-card/alarmo-card.js
      type: module  
    - url: /hacsfiles/numberbox-card/numberbox-card.js
      type: module  
    - url: /hacsfiles/config-template-card/config-template-card.js
      type: module      
    - url: /hacsfiles/decluttering-card/decluttering-card.js
      type: module      
    - url: /hacsfiles/light-entity-card/light-entity-card.js
      type: module  
    - url: /hacsfiles/lovelace-thermostat-card/main.js
      type: module  
    - url: /hacsfiles/scheduler-card/scheduler-card.js
      type: module  
    - url: /hacsfiles/atomic-calendar-revive/atomic-calendar-revive.js
      type: module      
    - url: /hacsfiles/lovelace-auto-entities/auto-entities.js
      type: module  
    - url: /hacsfiles/stack-in-card/stack-in-card.js
      type: module
    - type: module
      url: /hacsfiles/weather-card/weather-card.js
    - type: module
      url: /hacsfiles/button-card/button-card.js
    - type: module
      url: /hacsfiles/swipe-card/swipe-card.js
    - type: module
      url: /hacsfiles/mini-graph-card/mini-graph-card-bundle.js
    - type: module
      url: /hacsfiles/lovelace-layout-card/layout-card.js
    - type: module
      url: /hacsfiles/media_player-popup-card/media_player-popup-card.js
    - type: module
      url: /hacsfiles/cover-popup-card/cover-popup-card.js
    - type: module
      url: /hacsfiles/light-popup-card/light-popup-card.js
    - type: module
      url: /hacsfiles/lovelace-state-switch/state-switch.js
    - type: module
      url: /hacsfiles/mini-media-player/mini-media-player-bundle.js
    - url: /hacsfiles/lovelace-time-picker-card/time-picker-card.js
      type: module

So I created a new Lovelace dashboard with nothing except ONE entities-card with only ONE entity. Performance still shows websocket pending and my network performance and overal it shows:

image

Now mind you, on my desktop it’s not a big issue since it’s a powerhouse, though I definitely notice that stuff load less fast than a year ago. But on tablets and mobile it’s a huge difference. Even on high end devices (Galaxy FoldZ 2). On cheaper tablets it takes around 5-6 seconds to switch to a different tab.

I don’t know what I should test and what the culprit can be (if it’s something I can even fix). So I hope I can get some help/advice so I can further investigate what causes this.

Edit: I noticed Simple Icons (custom integration) had around 500ms. I removed that integration and the total load is now around half (450-500ms). It does load somewhat faster, but I still notice performance isn’t that great on mobile. Especially animations of turning on/off button-cards.

1 Like