Slow loading of customizations

[m1ke-hub]

Hey Marius, I hope you are doing well!

Since a few days - at least I didn't notice earlier - the customizations sometimes take a long time (5-10 sec.) to load. This happens when I reload (F5) a page on my Windows PC in Edge and Firefox, but not on the iOS companion app.

Are you guys experiencing similar problems?

[Mariusthvdb]

no not really, but did a lot of tweaking lately to the resource... and of course updated HA. So, to begin with, which versions are you running?

[m1ke-hub]

Everything is up-to-date (HA 2021.5.3 & custom-ui 2021.05.11)

Correction: It's also happening on my iPhone, but only when swiping down to reload..

I will downgrade to "1 month ago" and see if the problem was already there, but I didn't notice. Will report back here.

[Mariusthvdb]

Ok let us know please, because it is immediate here, on the most customized Ha instance I use.

[m1ke-hub]

So I was able to test this today. I went back to HA 2021.4.6 & custom-ui 20210409, cleared browser cache - and the customizations were always applied instantly (or a split-second) after reloading the page.

When I went back to up-to-date, cleared cache again - the problem returned immediately. BTW Here's how it looks like:

https://user-images.githubusercontent.com/57773976/118265798-0114f700-b4ba-11eb-9eb0-67e45e9d0211.mp4

As you can see, sometimes it's instantly, but sometimes it takes pretty long.. I've seen even way worse than the third reload in the video. I know, who tf reloads pages that often - it was only for demonstration purposes to show how it differentiates (it also happens when I only reload once).

Edit: I will do some more tests tomorrow, where I'm going to combine 2021.4.6 with newer versions of custom-ui.

[Mariusthvdb]

this is a bit difficult to check, it can be many things in a system. As said, in my 3 configs, they all respond as before. Maybe its Windows? I don't have that, so can't test.

Do you have anything in the inspector Console log indicating a problem? btw, I don't think you should test on older HA versions, we need to function going forward on the latest HA. Until I have a clear lead on what could be an issue in incompatibility between custom-ui and HA, I cant reach out to frontend devs, because this is not their issue.... can be caused by what they change in HA frontend handling of course. But maybe not, so please update HA, and re-check?

Also, did you check another browser? Chrome maybe? I always test locally on Chrome, Safari and Fox. Have one instance that could be said to act slower 1 out of 4 reloads, and its the one using the full UI for configuration. My other instances use Yaml mode for Lovelace, and are spot on 100%.

I went back, testing all versions, to 20200528, which was a direct copy, only Js'd, of the original, and behavior is identical. reloading repeated quickly shows identical behavior in these situations.

So guess it either always was there, or HA changed some of its innards to cause this.

[m1ke-hub]

Do you have anything in the inspector Console log indicating a problem?

I don't think so - but then again I don't really know what to look for to be honest.

Also, did you check another browser? Chrome maybe?

Yes, just tested in Chrome, same slow behaviour as in Firefox and Edge. Also dusted off my old MacBook to check on there - same thing in Chrome and Safari. In my case it happens in storage & yaml mode - where yaml is even worse.

I will spin up another instance in the next few days to test everything extensively - maybe I have some bad templates/codes somewhere.

[Mariusthvdb]

is it only on reload of the page, or also on state change?

and on the templates: well, that should be in inspector really. And the really bad ones throw frontend errors that prevent the frontend from loading completely....

just to give me an idea, what templates do you use, and how many.

On my 3000+ entities instance almost all are customized, and that without issue. some quite complex ones, using state of other entities too. Those are the most difficult ones for HA, because they require backend calculations, and could hurt performance

[m1ke-hub]

It does only happen on page-reload - so switching views is usually no problem at all, as well as state changes. When I for example turn on a light, while the customizations are not applied yet, it immediately applies all of them.

Well haha, I barely have 300 entities, most of them either have the icon, icon_color or unit_of_measurement customized - but not all are templates. My customize_glob.yaml has ~650 lines.

Here's how my templates usually look like:

sensor.update_addons:
  icon: "mdi:home-plus"
  friendly_name: "Update Addons?"
  templates:
    icon_color: if (state === '0') return '#444444'; else return '#aeaeae'
    unit_of_measurement: if (state === '1') return 'Update'; else return 'Updates'

I'd say, the most customized are my lights (as I have added a templated attribute), which look like this:

light.all:
  templates:
    icon: if (state === 'on') return 'mdi:lightbulb-group'; else return 'mdi:lightbulb-group-off';
    icon_color: >
      if (attributes.brightness < 51) return '#666666';
      if (attributes.brightness < 111) return '#858585';
      if (attributes.brightness < 162) return '#aeaeae';
      if (attributes.brightness < 223) return '#d1d1d1';
      if (attributes.brightness < 256) return '#ffffff';
      return '#444444';
    brightness_pct: >
      var brightness_percent = Math.round(100/255*Number(attributes.brightness));
      return brightness_percent;

[Mariusthvdb]

that doesn't seem to be that special ;-)

only thing I always do is replace the '===' with '==', and leave out the 'else'. Also, always delimit the template with a ';'

  templates:
    icon_color: if (state === '0') return '#444444'; else return '#aeaeae'
    unit_of_measurement: if (state === '1') return 'Update'; else return 'Updates'

would then become:

  templates:
    icon_color: if (state == '0') return '#444444'; return '#aeaeae';
    unit_of_measurement: if (state == '1') return 'Update'; return 'Updates';

the first 2 probably wont matter, but the latter might. please add that everywhere, just in case.

[m1ke-hub]

Right?! :-)

Thanks a lot for these suggestions - I really appreciate your help! Just employed them, but unfortunately it did not solve the problem..

I guess, I will start another HA instance later today and test everything thoroughly in there..

[cschillings]

Right?! :-)

Thanks a lot for these suggestions - I really appreciate your help! Just employed them, but unfortunately it did not solve the problem..

I guess, I will start another HA instance later today and test everything thoroughly in there..

Had the same issue after one of the last HA Core updates, fixed it with uninstall and reinstall custom-ui.

[Mariusthvdb]

I see this too now, in 2 of my 3 instances. The one still responding immediately is the biggest instance though, with many thousands of customizations. So I suppose it isnt that. I have an instance with only the ZwaveJS server add-on and only a few entities/devices, and it is displaying that mentioned behavior of slow loading customizations.

Would be good to know if you see the issue too, only reverting the 2021.4.6 to see if the frontend has changed anything that could affect this, and then I could ask Bram or Philip with a direct lead.

[m1ke-hub]

Yep, I still see the same behaviour, now on 2021.6.0b6. I did not find the time to install an additional instance for testing yet, though. The lack of icons in this beta round made me somewhat forget about this a bit 😉

@cschillings Thanks for your suggestions - unfortunately, that did not solve it..

[Mariusthvdb]

update:

since people in the community are reporting timing issues on recorder, I checked to see whether this could be causing the slow loading too. I had already been drawn in that direction, because when one checks the network tab in the inspector window, you can see the customizations kick in, and it is after quite a wait sometimes.

so first I disabled several add-ons, without effect. Then, I turned to MariaDB, which is supposed to have better handling of the DB than the default SQLLite. And DuckDns. This has a huge effect on the timing of the customizations. DuckDNS is essential, so after initial testing I enabled it again. Do think it made a difference though, but cant live without it.

Still this made no sense to me, as I have both running on my main instance, which acts perfectly as ever. I then realized, my main instance has a carefully curated include list of recorded entities, domains and services.

So I did copied this over to my troubled instance, et voila, much better indeed. Still not as before, (which didn't filter the recorder) but much better. Guess we're on to something in the backend with the DB handling.

Please give that a try too, to see if things get better on your side. If you can reproduce this, we should close this here, as it is not a custom-ui issue, but a backend HA issue. Remember, custom-ui is (almost, depending on your templates) all Frontend, and can only act when the backend serves the info.

Set the DB and point to included_entities.yaml, and exclude domains and services:

db_url: !secret db_url
purge_keep_days: 5

include:
  !include included_entities.yaml

exclude:
#  !include excluded_entities.yaml

  event_types:
    - service_removed
    - service_executed
    - platform_discovered
    - homeassistant_start
    - homeassistant_stop
    - feedreader
    - service_registered
    - call_service
    - component_loaded
    - logbook_entry
    - system_log_event
    - automation_triggered
    - script_started
    - timer_out_of_sync

  domains:
    - alarm_control_panel
    - alert
    - automation
#    - binary_sensor
    - camera
    - climate
    - counter
    - cover
  #  - device_tracker
    - geo_location
    - group
    - input_boolean
    - input_datetime
    - input_number
    - input_select
    - input_text
    - light
    - media_player
#    - person
    - proximity
    - remote
    - scene
    - script
    - sensor
    - sun
  #  - switch
    - timer
    - updater
    - variable
    - weather
    - zone

and then in your included_entities.yaml do something like:

entity_globs:

#  - device_tracker.life360_*
#  - sensor.*_power_daystart
#  - sensor.*_usage_daystart
  - sensor.*_temperature
  - sensor.*_actueel
#  - sensor.*_state
  - sensor.*_totaal
#  - sensor.solaredge_*
#  - sensor.speedtest*
#  - switch.*
domains:
  - binary_sensor
  - switch
  - person

entities:

  - device_tracker.life360_marijn

of course this can be included in the recorder.yaml file too but for now I simply copied the file structure of my main instance, which has way more in the listing ;-)

[m1ke-hub]

Thanks a lot for the update, Marius! Don't get me wrong, but I somewhat feel relieved it also started happening to you 😉

I just did some tests where I simply inverted my "10-entities-long" exclude list to an include list. But that did not improve it at all - so I also tried removing the MariaDB url and going with the standard DB, which sadly did not work either. I did not create extensive lists like yours, so that might be explaining the different results - but I was under the impression that if you include only certain things, everything else will be excluded. Will definitely copy and adapt your recorder configurations for more similar pre-conditions in the next few days and report back!

[unknown0816]

I guess I have a similar issue. I installed custom-ui via lovelace resource (UI) and the changes worked, but every time I reload the page all the changes were not visible. I have to actively use entities to get the correct behavior. However, I just tried to install custom-ui in the configuration.yaml in the frontend: section and voila it works fine.

I don't know if this is a different issue, or if this behavior is already known, but I thought I share my experience.

[Mariusthvdb]

the slow loading seems to have improved a lot lately, and that must have been because of changes in HA, because I havent touched Custom-ui since a longer time now ;-)

the install method suggestion you bring up is interesting, Ill have a look at that most certainly, thanks for that!

I recognize the need for states to change before the customization kicks in, although that isnt always the case. Never bothered me though tbh. Seems fair that it only does kicking upon the next change after the reload doesnt it?

[Mariusthvdb]

separate post, so everyone sees this. please check https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/2293 where Thomas explains about changes in card-mod and suggests setting up via

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

you can give card-mod a head start.

seems @unknown0816 noticed the same behavior ? interesting, I didn't know about that.

[Mariusthvdb]

let's close this now.

[patrickli]

separate post, so everyone sees this. please check https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/2293 where Thomas explains about changes in card-mod and suggests setting up via

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

you can give card-mod a head start.

seems @unknown0816 noticed the same behavior ? interesting, I didn't know about that.

I know this is closed, but I did have performance issues with this plugin until I put it in extra_module_url. It now applies the customizations almost instantly.