Lazy js loading overview

[juliushaertl]

• Allow prefetch with default CSP enh: Allow prefetch-src self in CSP #36660
• Dashboard widgets
  • User status
  • Recommendations
  • Talk
  • Calendar perf: Lazy load dashboard components calendar#4968
  • Mail
  • Activitiy perf: Lazy load dashboard components activity#1079
  • Github Lazy load dashboard widget and reference widgets integration_github#70
  • Mastodon nextcloud/integration_mastodon@98ea154
  • Zammad nextcloud/integration_zammad@c47e71b
  • Mail
  • Notes perf: Lazy load dashboard components notes#964
  • Tasks
  • Deck perf: Lazy load dashboard components deck#4440
• Files app sidebars
  • Lazy load files sidebar spreed#8755
  • Activity: Files sidebar perf(Sidebar): Lazy-load ActivityTab on DOMContentLoaded to reduce time to first paint activity#1085
  • Versions: Files sidebar
• Documentation for 26 + developer recommenations

[pulsejet]

Maybe unrelated to this effort, but the viewer and unsupported browser scripts are loaded synchronously and are super slow. Do you want me to look into this @juliushaertl?

[juliushaertl]

Feel free to jump in on those topics, I don't really have much time to focus on this currently. Any contributions are welcome :)

[szaimen]

Just wanting to point out that enabling gzip content-encoding in the webserver seems to make a huge difference in terms of transferred js file sizes. core-common.js is then for example reduced from 13.3 MB to 3.5 MB. Dashboard for example loads thus in almost half the time: 7.5s vs 12.5s before in my testing without browser cache (not the fastest network connection here).

Maybe we should suggest this in the docs at least for js files or does this come with known downsides?

[szaimen]

Brotli seems to look even better: reduces core-common.js down to 2.0 MB. I will enable this in AIO by default with nextcloud/all-in-one#2576 for js files.

[szaimen]

btw, it looks like for some response content is by default gzip used. Is there a reason this could not be applied by Nextcloud by default for js assets?

[pulsejet]

Agree, serving JS without gzip is a disaster. I'd be a bit careful with brotli though. You can't compress brotli on the fly; that'll be too slow. The use-case for brotli is serving pre-compressed artifacats, so need to make sure that is the case.

[pulsejet]

We can't do anything about viewer here since it has some side effects (hooks), but lazy loading the components themselves seems to do the trick for performance. nextcloud/viewer#1675

[szaimen]

I just tested this with the login page (time with new load in new private window until it shows login form) and these are the results:
(manually tracked, so possible that they are not 100% correct but I did the test multiple times to confirm that they are not completely incorrect).

~4.12s loading time without compression
~2.76s loading time with Brotli
~3.34s loading time with Deflate

So even on the fly Brotli seems to be the fastest :)