Can I improve my Nextcloud Files loading time?

I often find Nextcloud files slow to load, for example when loading the file app or a note on my Android Device (with Nextcloud Notes). Can I do something about it?

Can I improve my Nextcloud Files loading time?

I love Nextcloud. It just works fine most of the time and has all kinds of applications.
I am using it mostly for myself, sometimes to share a note or a file with my SO.
However, I often find it slow to load, for example when loading the file app or a note on my Android Device (with Nextcloud Notes).

TL;DR

Yes, by disabling some things and following those posts (I'll update the list when a new one appears):

Context

I installed Nextcloud through the YunoHost application, on a humble VPS (4 Go RAM, 2 vcore CPU, lots of other things installed).

I don't deal with the server configuration, tweaks, memory database or caching thingies: it's YunoHost's job.

I am using these apps:

  • Files
  • Photos
  • Contacts
  • Calendar
  • Notes
  • Bookmarks
  • Cookbook
  • Tasks
  • Cospend

Besides a few notes, this is mostly a 1-user-only instance.

Problem

When loading the Files app, it takes a lot of time before the list of files is displayed.

Also, when using the Notes application on Android, loading a note in the webview (whenever the rich editor is enabled) is really long, on a fast network.

Profiling

To scientifically prove it is long, I launched my faithful Firefox profiler to check the Files app:

Files app takes 11s to load

See, it takes around 11 seconds before that list of files appear!

Network requests

We can see several seconds are taken to load files, in two parts: look at the blue lines at the bottom.

So, my initial idea was to check the network requests, sorted by file size first:

files-loaded-by-size.png

There are several heavy files, including a 15 MB core file 😱.
But each of these files are coming from the browser cache, so we don't lose any time over network requests here.
We'll get back to the 15MB core-common.js file later, surely that can't be good.

Let's focus on duration instead of file size:

files-loaded-by-duration.png

Woah, here it is:

  • 218ms for notifications
  • 174ms for recommendations
  • 168 for WebDAV
  • 136ms for external shares
  • 150ms for mount points

Being the only user on a self-instance, and relying on YunoHost community to handle the updates, it don't need the notifications.
Also, I don't use the external shares and mount points, nor the recommendations at the top of the Files app.

Let's go to the applications list in Nextcloud. I can see several things I don't really need:

  • Activity: I am alone, I know what I did.
  • Collaborative tags: I don't need it
  • External storage support: I don't have external storage with my VPS
  • Federation: I don't need it
  • File reminders: no need for it
  • Nextcloud announcements: I have a RSS reader for that
  • Notifications: I don't use it
  • Recommendations: same
  • Update notifications: same as nextcloud annoucements
  • User status: again, I am alone

Let's disable each and retry.

Firefox profiler after disabling some apps

We now see that the first blue part of downloading files and server status takes around 1.5 to 2s instead of 3s before. Better already!

It still takes quite long to load everything though. Let's now focus on the yellow/red parts following the network requests, as I won't be able to improve the network requests without paying for a better server I guess.

Scripts execution

Remember when we found out several megabytes of scripts were downloaded? Surely that will take some time to execute!

Here is a view of the flamegraph:

Screenshot of the scripts execution in the profiler

Ouch, 3.728 seconds to execute the scripts!

Let's break it down by checking each large "(root scope)" item, above 100ms:

  • bookmarks-collections.js: 232 ms
  • bookmarks-references.js: 219 ms
  • text-viewer.js: 413ms
  • viewer-main.js: 124ms
  • comments-comments-apps.js: 113ms
  • core-main.js: 433ms
  • core-unsupported-browser-redirect.js: 242ms
  • files-main.js: 172ms
  • files_sharing-files_sharing_tab.js: 199ms
  • files_versions-files_versions.js: 197ms

OK, that's a lot already, for a decent computer (Dell XPS 15, 8Go RAM) running Firefox 120.

At first sight I find it sad that the bookmarks files are loaded: I am using the Files app right now, not the Bookmarks app. If we could load it only when needed (in the Bookmarks app), we'd earn half a second when loading the Files app!

[Edit (2023-11-23)]: those files are loaded for the smart picker.

There is nothing we can do quickly about it though, and most of them interact with the DOM or the layout (you can see blue and purple bars on top). Without diving more in each file/app, we can only hope that those interactions are really needed, but that should be checked later…

However core-unsupported-browser takes 242ms. It either is badly named, or there is an issue!

My favorite part is the so-called optimize:

The "optimize" method takes 176ms

Ironic, isn't it?

Conclusion

The next step would be to go to each app and understand how they are built and if some things can be optimized.

Each 100ms that can be earned would already feel great.

If you have any experience on how to start doing this, or have experience with the Nextcloud developement environement, or dev community, I'd love to hear from you! Please contact me on social@nicofrand.eu!