Dashboard slow to load

Dashboard
1

I have a quite large Dashoard (13 tabs, full of controls) and it is very slow upon starting/loading. After then, operations are normal.

I was watching at the "Network" tab in the browser's developer windows and I noticed that it took more than 7 seconds to load this css:

CSS for https://www.<my-domain>:1880/ui/css/app.min.less generated in 7750ms
Less has finished. CSS generated in 7750ms

Is there any way to expedite Dashboard loading?

2

Where are you running node-red? On a Pi?

3

Yes, Raspberry Pi3B+ (bookworm)

4

Are you accessing the dashboard from a remote machine or using the Pi's local browser?

5

From a remote machine. The Pi is headless.

6

That's good. I cannot help any further as I don't use the dashboard. Others here will be able to help though.

7

What do you have displaying on the dashboard? Any Graphs? If so how many and how many points on the graphs?

8

No, just 1 graph. Mainly ui-switches, text, buttons, gauges, level and leds.

9
  1. What model pi? Never mind this I see you mentioned it previously
  2. what is are you running? and never mind this
  3. are you using docker or HomeAssitant?

Can you provide the flow?
In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote ```)

``` 
   code goes here 
```

You can edit and correct your post by clicking the pencil :pencil2: icon.

See this post for more details - How to share code or flow json

10

What machine are you running the browser on?

11

Dashboard is heavy. And there's nothing you can do about it.
I haven't had time to stress test the new dashboard 2.0 but as technology behind it is modern I do believe there is improvements.
But if performance is important, one and only option is to make it from scratch.

1 Like
12

The code? The full code of the whole project? 13 dashboard's tabs?

I know how to do this...

13

Many.

  • Mac
  • Linux
    -iOS and Android

it is not machine-dependant. Always slow load

14

Well, not quite :wink:

There is always UIBUILDER which might help.

The downside of Dashboard is that, while it is VERY fast and easy to get going, like most frameworks, there is a cliff-edge. Beyond that point, the framework often gets in the way more than it helps.

This, of course, can be hard to predict in advance.

In addition, the generic nature of Dashboard 1 means that it will always be a heavyweight, transferring many things that you may never use.

So as a general rule, if building a complex web app, think carefully about not only the starting point but ways to optimise as you go along.

For example, does your app really NEED to be all in the same page (Dashboard 1 is a single-page app). Or could some elements be moved to other pages delivered more efficiently. Depending on the nature of things, you might be able to use UIBUILDER for some parts perhaps?

The nice thing about web apps with Node-RED is that it is possible to use different tools and work them together.

15

Well here is another idea,
Disable a tab and do a deploy and test the dashboard loading.
If there is no change disable another tab and deploy and test the dashboard loading again.

Keep disabling tabs until you see a change then enable the first tab you disable and deploy and test.
if things look fine add each tab back in and check the dashboard out.

Doing this you might find which is causing the slowdown or you may find it is just an accumulation of the amount of data you are pushing to the dashboard.

With out your flow, all we can do is guess as to what the issue may be.

1 Like
16

How many lines on the chart, what is the update rate of adding data and what timescale is the chart over?

17

I think the only chart could not be a problem. It is an array of 288 values and updated every 10 minutes. And the issue is only at dashboard first load. As you can see in my first post, that css file takes more than 7 seconds to load.

When do you think I could give Dashboard 2 a chance?

18

Any time you want.

Dashboard 2.0 is now Generally Available

19

You said you see 'CSS generated in 7750ms' in the Network tab in the browser tools, but that should be in the Console tab. It would be interesting to see what the Network tab does show in case the page fetch is part of the issue.

I have a somewhat smaller dashboard running on a pi 3 and the equivalent figure I see is about 650ms.

What does the command top in the Pi show?

I have moved some of my stuff across and the basics are mostly there. You can install both dashboards at the same time so you could certainly give it a go.

20

During Dashboard load, top shows over 100% for node