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.

[paco-atiiienza]

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

No luck on latest 128.0.6613.114 (64 bits) chrome or 129.0.2 (64-bit) firefox. They both exhibit this behavior. As can be seen in this screenshot of firefox network.

[NickM-27]

a screenshot doesn't really show anything, naturally images will load. But the images should only load for the visible items plus a few items below the fold. When the page is scrolled further down more images will load, but there is no way to show if this is behaving correctly or not with a screenshot.

[NickM-27]

For example, here is me scrolling a few times gradually

Screen.Recording.2024-08-30.at.10.40.04.AM.mov

[paco-atiiienza]

Here, if need a better video just ask!

scroll.mp4

[NickM-27]

I realize I was talking about a different screen then you are referring to, the recording viewer screen will be much more difficult to lazy load, will have to see what can be done.

[paco-atiiienza]

Sure, thanks!

It seems to happen on Live page too.

Live.mp4

Also seems to do it twice, as the same thumbnail shows twice in two batches.

Live.mp4

[setterlee]

anybody tested the new version with the tweeks implemented? In my case like @aaronjrodrigues, after noticed that the UI for the 0.14 version have a slower performance than the 0.13 I made an rollback...

[paco-atiiienza]

anybody tested the new version with the tweeks implemented? In my case like @aaronjrodrigues, after noticed that the UI for the 0.14 version have a slower performance than the 0.13 I made an rollback...

Live works perfectly. Loading only the cameras till around 250vh. In my case, gone from around 11 secs to a 2 sec load.

Still pending the recording viewer, it seems all cameras Frame JSON is loaded delaying the video, but it was already clarified it wasn't an easy task and this is an edge case.

Anyway, if you don't work with 40+ cameras, I doubt this will cause any noticeable difference, but for me, this is a game changer, so special thanks to Nick for the progress already accomplished.

[mdv0]

I have noticed this too and face the same problem: the performance of the review tab is significantly slower compared to version 13. In version 13, we didn't have a review tab, but the 'All Alerts' tab provided a similar function. Scrolling through and viewing alert clips, as well as playback, was much quicker and smoother compared to version 14.