Debugging Slow Dashboards: Websocket Events for Every Change

Hello all,

I’ve been trying to work through some issues with my dashboards and could use some help. Thanks in advance for any insights!

Background

My main dashboard has been pretty slow recently, and I thought that (because it was so large), that splitting it into several different dashboards would help. It doesn’t seem to have been much help (though it did seem to help a little).

The slowdown is most prominent with the initial load time of the dashboard. It spins the loading circle for longer than it used to. But after being open in the background for a while, the Android app is pretty slow to re-render whatever updates need to be re-rendered when I bring it back to the foreground. This causes the app to feel incredibly laggy. The Android app also sometimes seems to get stuck and needs to be killed in order to access things again. (Splitting the dashboards helped a good amount with this, though.)

Debugging the Issue

I just looked at the websocket communication via Chrome’s Dev tools in the browser and I appear to be getting every single state change coming through the websocket even if it doesn’t pertain to the dashboard. Is this normal?

With several devices that are providing constant near-constant updates, i.e. temperature, voltage, power, illuminance, I’m getting 6-7 updates pushed per second. A lot of these are probably ignored.

Questions

  • Could the excess websocket messages be the reason that things are slow?
  • What else can I check and/or change?

More Details

Things I use on my primary dashboard:

  • Mushroom template cards
  • Conditional cards

And things I use across all of the frontend:

  • clock-weather-card
  • custom-sonos-card
  • lovelace-mushroom
  • lovelace-xiaomi-vacuum-map-card
  • timer-bar-card
  • ZHA
  • HACS
  • A decent number more builtin/custom integrations… happy to list them if it helps