thomasloven
Extremly Slow and Stuck
HA: 2024.2+ Card Mod: 3.4.2 Logs: Clear Cache: clear Chrome Same problem on Phones
From new Update HA 2024.2+ every Card where is Customized with Card Mod extremly slow load i mean few seconds 5-20, i dont know is this problem in Card Mod or HA Frontend, or after few minutes Dashboard it gets stuck and freezes
Same here. Heavy use of card-mod. Complex pages. Gone from 3-4 seconds update time to a 30-60 seconds. Often the pages stops without finishing loading all elements, or finish "modding". All browsers. Good HW and network. Revert to 2024.1.x solves the problem. Profiler shows that scripting uses up "all" the time, card-mod js. Lovelace seems to be a bit slower on 2024.2.x on pages not using card-mod too, but not sure about that. HA is not eating CPU, but the browser uses a lot!
Same here. Heavy use of card-mod. Complex pages. Gone from 3-4 seconds update time to a 30-60 seconds. Often the pages stops without finishing loading all elements, or finish "modding". All browsers. Good HW and network. Revert to 2024.1.x solves the problem. Profiler shows that scripting uses up "all" the time, card-mod js. Lovelace seems to be a bit slower on 2024.2.x on pages not using card-mod too, but not sure about that. HA is not eating CPU, but the browser uses a lot!
I have exactly the same thing, and I'm already really dialed in, today Dashboard didn't work at all through my PC, HA is seriously unusable.
Holy crap... I'm on HA: 2024.3 and Card Mod: 3.4.2 too and I spent literally a day to try to understand what card was causing the issue. In my case I saw the browser became unresponsive until showing an out of memory issue. The server works fine as expected, just the browsers, Chromium on linux and Chrome for Windows, are killed. Didn't realize it could be a possible issue with Card Mod. As a test I replaced the customized cards (mostly mushroom) with some stock cards and the lags disappeared. I know CSS mod and templating can hammer the CPU but I think that's really too much. Here is a YAML snippet of a card causing the lag issue, perhaps @thomasloven could find some useful tip:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: null
icon: null
icon_color: null
picture: '{{ state_attr(''sensor.forecast_d5'', ''picture'') }}'
primary: '{{ states.sensor.forecast_d5.state }}'
secondary: '{{ state_attr(''sensor.forecast_d5'', ''condition'') }}'
layout: vertical
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 22px !important;
position: relative;
top: -130px;
left: 0px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
font-size: 22px !important;
position: relative;
overflow: visible !important;
top: -15px;
left: 0px;
}
mushroom-shape-avatar$: |
.picture {
top: 16px;
left: -50px;
position: relative;
}
.: |
:host {
--mush-icon-size: 120px;
}
- type: custom:mushroom-template-card
primary: '{{ state_attr(''sensor.forecast_d5'', ''temperature'') }}°C'
icon: mdi:thermometer
icon_color: gray
secondary: none
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 15px !important;
position: relative;
top: 8px;
left: 0px;
overflow: visible !important;
white-space: normal !important;
}
.: |
ha-card {
width: 66px;
margin-left: 50%;
top: -163px;
background: none;
text-align: right !important;
}
:host {
--mush-icon-size: 35px;
}
- type: custom:mushroom-template-card
primary: '{{ state_attr(''sensor.forecast_d5'', ''humidity'') }}%'
icon: mdi:water-percent
icon_color: gray
secondary: none
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 15px !important;
position: relative;
top: 8px;
left: 0px;
overflow: visible !important;
white-space: normal !important;
}
.: |
ha-card {
width: 66px;
margin-left: 50%;
top: -194px;
background: none;
}
:host {
--mush-icon-size: 35px;
}
- type: custom:mushroom-template-card
primary: >-
{{ state_attr('sensor.forecast_d5', 'rain_probability')
}}%
icon: mdi:weather-pouring
icon_color: gray
secondary: none
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 15px !important;
position: relative;
top: 8px;
left: 0px;
overflow: visible !important;
white-space: normal !important;
}
.: |
ha-card {
width: 66px;
margin-left: 50%;
top: -225px;
background: none;
}
:host {
--mush-icon-size: 35px;
}
card_mod:
style: |
ha-card {
height: 180px !important;
width: 264px !important;
--ha-card-border-width: 0;
}
I'm really hoping the cause of the issue is my bad CSS styling... :P This card is part of a collection I have in a dashboard for my display in the living room (WIP):
Since are all new cards, I can't really say if the browsers were responsive before the latest updates.
For the sake of knowledge, I noticed the very same issue on my phone. Here's a dashboard with a single, custom weather card based on mushroom template cards:
After a couple of minutes the companion app will hangs for some seconds when trying to open the input select list on top. It doesn't happens with a built in weather card:
I may have made some contributions but I'm not involved in it and haven't used it since it was switched to card-only mode.
Nope, I was in a hurry then I switched all my mushroom card to simple markdown cards with the help of layout cards, another big one mod from Thomas:
I don't need interactive cards, just displaying them is enough. For me all the issues are gone: CPU usage lowered and no more ram hogging on clients until Chromium die.
Bottom line: I never used the markdown card before and I must admit it lacks a bit of flexibility but, hey, it works just fine and is lighter than mushroom cards with card-mod on top. In some way I need to thank Thomas (I'm serious) because he gave me the opportunity to learn something new!
As usual: mixing together lots of custom cards like mushroom - and blaming card-mod. Good that at least one person has sorted it out.
@ildar170975 I tend to agree with you when we speak about a "use but not abuse" situation but I'm really thinking something happened passing from HA 2024.1 tp 2024.3.
Look at my other post where I said the companion app hangs with just two modded cards in a vertical stack.
Now, I'm pretty sure mushroom cards are to blame too , in the end customization come at the cost of performance, but I never saw memory running out on my devices because a dashboard goes berserk, even with mushroom cards.
It doesn't means the guilty is card-mod, I can't say it. I've just wrote down my experience on an existing issue because I saw some serious performance degradation on a low end device, more sensible to CPU/Memory loads.
If and when someone will add some more feedback we will find the culprit, but for now I'll continue my journey learning how to optimize my dashboard without relying on custom components.
- My observations are: every new HA version causes a bit more load. Old iPhone 5S became too slow even with standard cards. iPad Air 2 (which may be also considered as "old") still works even with custom cards - but slower & slower. I bet you can recall lots of simple applications whose new shine versions work slower than old versions (with a less amount of added useful functionality). This are consequences of "lots of humans started programming".
- A usual way: when you see any issues test with standard cards first.
The same problem, HA 2024.2.5, frontend CPU usage is very high, but after downgrading card_mod to v3.4.0, the problem seems to be solved. Maybe it is the same problem as #346 ?
I had the same issue and down graded card mod to 3.4.0 and things are much better. It does seem related to something in card mod that's changed between 3.4.0 and 3.4.2
I came here ready to grab a pitchfork and blame card mod for breaking my UI. Every time the HA wall panel turned on some cards would be frozen, after 10-20 secs card mod elements would finally load in & cards would unfreeze. But I downgraded to 3.4.0 & then totally removed card mod and the issue persisted, timers were still freezing, card mod was just the most visually obvious thing not loading correctly.
I reverted to a backup from mid Feb & just not updating anything now, everything is running smoothly again.
My dashboard was loading slow and not displaying properly at times forcing me to close and re-open home assistant (or refresh on a browser). Downgrading to 3.4.0 seems to have fixed this for me.
I cannot reproduce this problem, but maybe version 3.4.3 will help.
Updated right after seeing this and seems to be working so far. Thanks! I'll report back if that changes.
v.3.4.3 restored pre v3.4.1 performance levels.
Thanks for keep this amazing and unique project alive.
Sorry to say that it doesn't appear to have fixed the issue for me. I updated from v3.4.0 to v3.4.3 - cleared cache, reloaded and even restarted HA (and checked the version in the dev console was correct) but if I leave one of my dashboards on a tab and go off to do something else when I try to switch back to it it's either hung or is displaying "out of memory". Looks like for me I'll have to revert back to v3.4.0.
Again I strongly suspect something other than card mod is potentially causing this issue, at least for me.
Some elements of dashboards were still taking 10-20 secs to load even after I totally removed card mod.
The solution for me was to revert to a month old backup, which also stepped back a version or two of HA core and supervisor. (Edit: I think there may have also been a Mushroom Card update in there)
I would be happy to troubleshoot by updating HA components one at a time to try and identify the problem, but unfortunately I have limited free time for the next couple months.
I updated from v3.4.0 to v3.4.3 as well. It doesn't seem to fix the slow loading. I've recorded a short comparison, first you see the behaviour of 3.4.0, and then 3.4.3. As you can see, in the earlier version, the loading of elements is more smooth. In 3.4.1, 3.4.2 and 3.4.3, everything seems to freeze for a moment before loading : https://www.youtube.com/watch?v=ivXEGBygLvI This apply to multiple elements in my dashboard, making every elements loading "blinking" into existence. For now I'll stuck with 3.4.0, but I'll happily try the future version hoping it'll solve this issue.
Went back to 3.4.0 a while. Seems card-mod 3.4.3 has resolved the performance and hung formatting issues experienced in lovelace... at least so far with my setup.
Even on the most problematic devices (due to slow/old processors), e.g. iPad Air 2 and iPad Mini 5 are working OK.
Just got 3.4.3 and it has boosted performance significantly. I generally use Safari and it would take 2 or so seconds to load up, its instant now.
Again I strongly suspect something other than card mod is potentially causing this issue, at least for me.
This! Even removing card_mod AND mushroom cards, on my living room display the browser die every now and then. It's better than before but I agree: the issue is buried somewhere deeper in HA. For now ,to solve the out of memory error, I've simply added a cron job pressing F5 every 6 hours. Have a look, that's my average ram consumption with a fresh page (please note the cpu usage too):
And that's after 4-5 hours:
No human interaction and no change on display page.
Now, my display is based on a Celeron E3050 with just 2 GB Ram. It's nothing fancy but should be enough to show just a chromium page and nothing more.
I would like to add another piece to the puzzle, further reducing the possibility that cardmod is the culprit of the issues with RAM usage. One of the views I have on my living room display is also the one causing more problems with ram. It had an iframe card picking data from windy (satellite info for weather). I replaced it with a fake camera image grabbed from windy.com trough puppeteer feeding a picture-elemens card every 5 minutes and done. My RAM/CPU usage dropped a bit and doesn't increase over time even with 3 mushroom cards with card_mod on top:
No more out of memory for me since two days. I make @ildar170975 's words my own: experimenting with standard cards before moving on to custom ones helped a lot in finding the problem. What I'm trying to say is that there isn't just one guilty, each one of us can have a strange combination of things that create the issue.
My two cents.
For me it hit me like a wall. My low power kitchen pc locks up after sometime, even with card_mod 3.4.3. It does not on a lovelace page where no card_mod is used. For testing:
- add a powerflow card and another card with card_mod applied.
- On a second lovelace page, do the same without using card_mod.
Expected:
- The flow dots will make it clear, when the browser is bogged up: the dots get jumpy and stuck at times. Do F5 and they flow smoothley again.
- On the second page, no reload will be needed.
On the second screen I have this with 2 heavy apex charts and the mini pc doesn't get stuck. But does so on the front page where card_mod is present.
I wish I could make it more specific when this became an issue, as the frontpage ran nicely for hours. Either with an HA update or card_mod update :-/
