Improve UI performance for systems with large number of cameras

[paco-atiiienza]

Describe what you are trying to accomplish and why in non technical terms
I want to fix slow browser performance when loading/updating these pages on systems with excessive cameras.

Describe the solution you'd like
Making these pages have tabs with a max of 20 cameras ie.

Describe alternatives you've considered
Obviously on Live I generally use camera groups that has the same effect and works perfectly, but have included it as I feel it's warranted for 'All Cameras' as default page that's loaded and in case of system using the bottom right alerts instead.

Additional context
Especially the system one is an extreme use case as I have right now 150+ cameras, just thought worth posting as maybe useful for slower machines on reasonable setups.

[aaronjrodrigues]

I noticed that the issue is prevalent in the newer version of frigate, video performance is really bad on 0.14.0 and I ended up up reverting back to 0.13.2

[TutenStain]

I am echoing the above comment as the new UI is noticeable slower generally than the outgoing previous version. It’s running on sufficiently performant hardware and I did not notice slowdowns on the previous version. I realize that this comment might sound empty as I do not have performance measurements to bring to the table but thought I still mention it. Running with 7+ cameras.

[Daniel-dev22]

I noticed that the issue is prevalent in the newer version of frigate, video performance is really bad on 0.14.0 and I ended up up reverting back to 0.13.2

It would be good to see a recording of what you mean so that the devs can take a look at it.

[Daniel-dev22]

I am echoing the above comment as the new UI is noticeable slower generally than the outgoing previous version. It’s running on sufficiently performant hardware and I did not notice slowdowns on the previous version. I realize that this comment might sound empty as I do not have performance measurements to bring to the table but thought I still mention it. Running with 7+ cameras.

Do you have a recording of this issue happening? It would help the devs see what's happening as there's no way to know without seeing it.

[markfrancisonly]

Wow, I was going to say the exact opposite! My video server cpu utilization has plummeted in v14, and literally been cut in half. Would like to hear what type of processor and camera resolutions for slower performance?

My server is running a 13th gen Intel i7-13700T with preset-vaapi, 128GB ram, and a dual TPU pci-e card . I couldn't find the 35 watt cpu locally, took a chance and ordered from overseas. My client is running on a 14th gen i7-14700K with 128GB ram, nvidia 1080 gpu, chrome hardware acceleration.

[aaronjrodrigues]

I noticed that the issue is prevalent in the newer version of frigate, video performance is really bad on 0.14.0 and I ended up up reverting back to 0.13.2

It would be good to see a recording of what you mean so that the devs can take a look at it.

Alright so basically there is this weird issue where the other half of my video feed is just green, this happens for most of my cameras and fixes itself when I'm scrolling but when I stop scrolling it starts again.

Here is a screenshot, the blurred part to the left is my camera feed.

[paco-atiiienza]

Wow, I was going to say the exact opposite! My video server cpu utilization has plummeted in v14, and literally been cut in half. Would like to hear what type of processor and camera resolutions for slower performance?

My server is running a 13th gen Intel i7-13700T with preset-vaapi, 128GB ram, and a dual TPU pci-e card . I couldn't find the 35 watt cpu locally, took a chance and ordered from overseas. My client is running on a 14th gen i7-14700K with 128GB ram, nvidia 1080 gpu, chrome hardware acceleration.

This is refering to UI/Web browser performance. Not server performance.

[paco-atiiienza]

I noticed that the issue is prevalent in the newer version of frigate, video performance is really bad on 0.14.0 and I ended up up reverting back to 0.13.2

It would be good to see a recording of what you mean so that the devs can take a look at it.

200.Camara.Load.Time.mp4

This issue is that all cameras load despite being offscreen and in my case there being 150+ cameras. This on top of camera images being in nearly all pages causes slow UI performance.

In the attached video you can see it takes from sec 2 to 12 to load only the timeline and assets due to the hit of loading the cameras.

I also have logs of nginx sending all the camera images to confirm this is the case if not obvious in the video.

For a fix I originally said tabs but lazy loading would probably solve it too.

[NickM-27]

The camera images still load (this is something that could be improved) but a steam will only load if the camera is visible. On the review page image loading is already set to lazy loading unless you're using Safari because lazy loading is broken in Safari

[paco-atiiienza]

The camera images still load (this is something that could be improved) but a steam will only load if the camera is visible. On the review page image loading is already set to lazy loading unless you're using Safari because lazy loading is broken in Safari

Here is my performance tab for just a refresh of the review page till the event video loads (no scrolling past the 7 thumbnails you can see within a view). As you can see all the thumbnails are being downloaded despite being out of view, ive checked and its for all the 200 camaras ive got using up alot of network/cpu resources as its done each time you change page/event.

Pretty sure in my case is the cause as the video loads when the thumnails stop loading.

[NickM-27]

that would likely be an issue with the browser then, because the browser is being instructed to load the images lazily

frigate/web/src/components/player/PreviewThumbnailPlayer.tsx

Line 213 in 6a0b5c3

loading={isSafari ? "eager" : "lazy"}

when I test on chrome, I can scroll down and see more images loading as I scroll which indicates only visible images are downloaded when the page opens

[paco-atiiienza]

Im on chrome 128.0.6613.113 (64 bits). I see an update pending and will update if changed on latest version.