WebUI and Android Mobile App performance when using layout pages with 20+ labeld cells

Hi,
My “OH3 home showroom” got bigger but also slower. When changing pages it’ll takes up to 6 seconds.
This is the overview page:


The label cell for the “Heizung” opens this page:

The change on the android mobile app is not responsive and also the web ui on PC browser is not fluent.

There are similar threads in the community forum:

The CPU load is low (top and docker stats are low <10%)

  • Platform information:
    • Hardware: Quadcore i7
    • OS: debian 10, OH3 in docker environment
    • openHAB version: 3.1

Any hints on how to proceed here?

Thanks
Marco

In the meanwhile I added similar configuration to a powerful i7 Labtop (also using the docker container).
Same issue: When switching to a new page on the mobile app it can take a couple of seconds until the new page shows up.

As I think hinted in the previous threads, the performance of your server has very little influence - it’s the device that you’re viewing the UI on which makes a difference. Viewing the UI on a browser from my powerful PC is better (faster) than viewing the UI on a browser on my underpowered phone. The MainUI requires your UI client to perform a lot of maths!

Thanks for the hint. It would be good to have a responsive UI on the Mobile App as I believe that is what many use for controlling their smarthome. This is basically the first user experience, a button is pressed and a couple of seconds later the page is opened.

2 Likes

Did you in the end find a solution or a reason why its that slow?
For me the UI got unusable as I have to wait around 10 seconds for every page transition.

Hi Alexey,
I replaced a normal page with a tabbed page in the main UI which increased the speed. Furthermore I bought a new server and I got also a newer mobile for running the openHAB app.
Now the speed is ok.
Cheers
Marco

I see. Thanks for the info. I´ll give it a try with the tabs.

Hi Alexey,
the topic is now actual to me again. I replaced the standard roller-shutter widgets on a page with a custom widget witch has automated timing functions.
The widget does a bit more like showing blinds position, showing the next run, changing color on movement etc.
Now I have 15 of them on one page and the loading time increased quite a lot.
In the custom widget are some calculations like

text: =(items[props.vItemShutterMoving].state == "OPEN")?"fährt...":"Blinds " + items[props.vItemShutterBlinds].state + "%"

text: ="▲ " + dayjs(items[props.vItemDateTimeUp].state).format('HH:mm')

visible: "=items[props.vItemActiveTimer].state === 'ON' ? 'true' : 'false'"

I could imagine that the java time calculation takes time and I have two of them per widget instantiation. Maybe some of the OH maintainers can give some advice if it would be better to do the calculations in rules instead of having them in the widget to save loading time.

I moved all the calculations away from the UI. I prepare a JSON and put is into a item to control the widget.

the yaml for the widget then looks someting like this:

- component: Label
  config:
   text: '=JSON.parse(items.Lueftung_in_world_Haus_EG_Bad_EG_ui_widget_controller.state.trim().charAt(0)=="-"
	? "{}" :
	items.Lueftung_in_world_Haus_EG_Bad_EG_ui_widget_controller.state.trim().startsWith("NULL")
	? "{}" :
	items.Lueftung_in_world_Haus_EG_Bad_EG_ui_widget_controller.state)["room_detail_edit__toggle_label_value"]'
   style:
	display: '=
	  (JSON.parse(items.Lueftung_in_world_Haus_EG_Bad_EG_ui_widget_controller.state.trim().charAt(0)=="-"
	  ? "{}" :
	  items.Lueftung_in_world_Haus_EG_Bad_EG_ui_widget_controller.state.trim().startsWith("NULL")
	  ? "{}" :
	  items.Lueftung_in_world_Haus_EG_Bad_EG_ui_widget_controller.state)["room_detail_edit__toggle_label_visible"]
	  == "True") ? "flex"
	  : "None"'
	color: '=JSON.parse(items.Lueftung_in_world_Haus_EG_Bad_EG_ui_widget_controller.state.trim().charAt(0)=="-"
	  ? "{}" :
	  items.Lueftung_in_world_Haus_EG_Bad_EG_ui_widget_controller.state.trim().startsWith("NULL")
	  ? "{}" :
	  items.Lueftung_in_world_Haus_EG_Bad_EG_ui_widget_controller.state)["room_detail_edit__toggle_label_color"]'
	font-size: '=JSON.parse(items.Lueftung_in_world_Haus_EG_Bad_EG_ui_widget_controller.state.trim().charAt(0)=="-"
	  ? "{}" :
	  items.Lueftung_in_world_Haus_EG_Bad_EG_ui_widget_controller.state.trim().startsWith("NULL")
	  ? "{}" :
	  items.Lueftung_in_world_Haus_EG_Bad_EG_ui_widget_controller.state)["room_detail_edit__toggle_label_fontsize"]'
	text-align: left

The strange thing is that on iPhone (all browsers) its quite fast. A particular page with around 30 widgets loads in less than 1 second on iPhone and takes 14 seconds on my Samsung Galaxy A71.

I also tried to install different Webview implementations, but this does not change loadingtime.