NextCloud is unacceptably slow without asset pipelining #2272

Open
cdauth opened this Issue Nov 23, 2016 · 63 comments

Projects

None yet
@cdauth
cdauth commented Nov 23, 2016 edited

According to the docs, asset pipelining has been removed in nextCloud 10. While ownCloud/nextCloud has always been very slow, this makes nextCloud extremely slow and practically unusable even on medium-latency connections.

My network connection has ping times of about 250–300 ms to my nextCloud server. This might seem slow compared to a high-speed fiber-glass cable connection in an American metropolis, but it is quite normal for a mobile connection, and in many rural areas in the world the latency is even higher on a cable connection.

I have about 10 non-standard apps installed on my nextCloud instance, and just the front page of the Files app takes anything from 1 minute up to 5 minutes to load (with enabled browser cache)! It tells me that it had to do over 200 requests!

A good web application does 2 or 3 requests to load the page, maybe a bit more for more clever caching, if not all components are needed in all parts of the application.

nextCloud should really:

  • enable asset pipelining again. If it breaks some apps, those apps should be fixed.
  • use image sprites
  • get rid of AJAX requests that load settings and stuff on page load, and instead put that data into the DOM

Here are two screenshots to give a rough idea about what is loading:

image

image

@nickvergessen
Member
nickvergessen commented Nov 23, 2016 edited

I agree that we should try to combine stuff more again, but honestly with a server that takes 6 seconds to deliver a 1kb css file... what are you using it for? downloading a 1MB file will take 6k seconds which is over 1 hour? 😨

And as a sidenote: no one of us has an american-metropol-fiberglas-connection.

@cdauth
cdauth commented Nov 23, 2016

The problem is really just the latency. Downloading a file works fine with 5–10 MBit/s.

@Guillaume99

hello,

Use of asset pipeline have already been discussed here : https://help.nextcloud.com/t/asset-pipeline-enabled-leads-to-a-blank-calendar-with-error/1122/4 and in some other thread.

The conclusion was (more or less) : "asset pipeline is old and broken and (very likely) nothing will fix that. Don't use it."

I think that for now, your best options are HTTP/2 and maybe gzip compression of .CSS and .js ...

@MorrisJobke
Member

There was the idea to group JS/CSS based on the app it is loaded from. We maybe look into this once the SCSS PR is in - #1805 - cc @skjnldsv

@cdauth
cdauth commented Nov 23, 2016 edited

I think it is important to make a separation between minification and concatination here. In the discussion you are linking, the main argument seems to be that the JavaScript minifier is old and broken. I agree with disabling it then, as an easy solution can be that apps deploy minified JavaScript code, as mentioned in the discussion.

The issue I am facing is not related to a lack minification or compression. It is related to the fact that the browser has to send more than 200 HTTP requests to the server in order to load a page. This problem can only to a small part be solved on an app level. The HTTP standard recommends not to make more than 2 simultaneous connections to a server, and Chrome for example has a hard-coded limit of 6 (see this discussion). HTTP/2 is obviously not a practical solution right now.

If JavaScript files and CSS files (and image sprites) would simply be served concatenated, this would drastically reduce the number of requests and increase performance.

@skjnldsv
Member

@MorrisJobke Indeed, we could combine all the css easily.
The #2050 pr implement css compression by default.

@rullzer
Member
rullzer commented Nov 23, 2016

I agree we can improve here. But, havigng said that, the problem should not be that huge. Basically the first page load is painfully slow then. But after that 99% of the assets should be cached anyways.

@eppfel
Member
eppfel commented Nov 23, 2016

HTTP/2 is obviously not a practical solution right now.

@cdauth Maybe not right now, but... Browser support: http://caniuse.com/#feat=http2 Server adoption: http://isthewebhttp2yet.com/measurements/adoption.html

@cdauth
cdauth commented Nov 24, 2016

@eppfel: Oh, I must admit that I thought browser support was far less advanced. I was under the impression that HTTP/2 is so far only supported by Chrome when enabling a certain flag.

Will look into it and see how much it improves things.

@eppfel
Member
eppfel commented Nov 24, 2016

@cdauth It's actually only supported over TLS (https). Here is a great article about it: https://www.troyhunt.com/i-wanna-go-fast-https-massive-speed-advantage/ But using nextcloud over an insecure connection is not a good idea anyway.

@cdauth
cdauth commented Nov 27, 2016

Okay, I enabled HTTP/2 on my server and the speed improvement is tremendous.

I am undecided whether I think asset pipelining is still necessary.

I think some improvements can still be made (such as avoiding AJAX calls on page load, for example to load the config).

HTTP/2 should definitely be mentioned in the Server Tuning docs.

@eppfel
Member
eppfel commented Nov 27, 2016

@cdauth Lucky you, don't have that option, right now.

I think some improvements can still be made (such as avoiding AJAX calls on page load, for example to load the config).

Totally agree 👍

HTTP/2 should definitely be mentioned in the Server Tuning docs.

You could do it yourself 😉

@eppfel
Member
eppfel commented Dec 1, 2016

As HTTP2 is coming, asset pipeline will get obsolete. I don't know if image sprites or CSS compression would still be worth the effort, but I would advise opening dedicated issues and closing this one.
I moved @cdauth's proposal to get rid of some AJAX calls to #2447 and added documentation for HTTP2 in the documentation nextcloud/documentation#242

@ddeenniiss

Fresh install on a new server, open Files -> it's 208 requests (!) and 6 sec to load the page ... Just crazy ...

@imraro
imraro commented Dec 15, 2016

1Gbps, 0.3 ms latency (LAN Connection)
Firefox 50.0.2 x86_64, http/2

NextCloud 11
nginx-1.10.2
php-7.0.14
php-pecl-apcu-5.1.7
mariadb-5.5.52

Performance analysis of files page:

empty_cache
primed_cache

@HolgerHees

the same for me with chrome 55.

http2 is enabled together with gzip compression.

NextCloud 11
php-5.6.29
mariadb-10.0.28

first request:
noncache

and second cached request:
cache

@cinemast
cinemast commented Dec 19, 2016 edited

Loading times are in fact awful atm. I think some form of concatenation is really needed here.
I agree that the previous asset pipeline was broken, but I think there must be some form of replacement for it.

HTTP2 won't fix that issue, it is just not as dramatic as with HTTP/1.x.

This snippet containing css/js resources was taken from the current nextcloud demo server setup:

	<link rel="mask-icon" sizes="any" href="/core/img/favicon-mask.svg" color="#0082c9">
					<link rel="stylesheet" href="/core/css/styles.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/core/css/inputs.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/core/css/header.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/core/css/icons.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/core/css/fonts.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/core/css/apps.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/core/css/global.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/core/css/fixes.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/core/css/multiselect.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/core/css/mobile.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/core/vendor/jquery-ui/themes/base/jquery-ui.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/core/css/jquery-ui-fixes.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/core/css/tooltip.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/apps/files_pdfviewer/css/style.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/core/css/share.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/apps/files_versions/css/versions.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/apps/files_videoplayer/css/style.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/apps/gallery/css/slideshow.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/apps/gallery/css/gallerybutton.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/apps/notifications/css/styles.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/core/css/jquery.ocdialog.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/apps/files/css/files.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/apps/files/css/upload.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/apps/files/css/mobile.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/apps/files/css/detailsView.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/apps/files_trashbin/css/trash.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/apps/activity/css/style.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/apps/comments/css/comments.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/apps/files_sharing/css/sharetabview.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/apps/files_texteditor/css/DroidSansMono/stylesheet.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/apps/files_texteditor/css/style.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/apps/files_texteditor/css/mobile.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/core/vendor/select2/select2.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/core/css/systemtags.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
					<link rel="stylesheet" href="/apps/systemtags/css/systemtagsfilelist.css?v=9a4ae11b328522aeca1e715f0a55b5b4">
									<script src="/index.php/core/js/oc.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/vendor/jquery/dist/jquery.min.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/vendor/jquery-migrate/jquery-migrate.min.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/vendor/jquery-ui/ui/jquery-ui.custom.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/vendor/underscore/underscore.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/vendor/moment/min/moment-with-locales.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/vendor/handlebars/handlebars.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/vendor/blueimp-md5/js/md5.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/vendor/bootstrap/js/tooltip.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/vendor/backbone/backbone.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/vendor/es6-promise/dist/es6-promise.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/vendor/davclient.js/lib/client.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/vendor/clipboard/dist/clipboard.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/placeholders.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/compatibility.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/jquery.ocdialog.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/oc-dialogs.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/js.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/l10n.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/octemplate.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/eventsource.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/config.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/search/js/search.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/oc-requesttoken.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/apps.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/mimetype.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/mimetypelist.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/vendor/snapjs/dist/latest/snap.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/vendor/backbone/backbone.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/oc-backbone.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/placeholder.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/jquery.avatar.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files_pdfviewer/js/previewplugin.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/shareconfigmodel.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/shareitemmodel.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/sharedialogresharerinfoview.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/sharedialoglinkshareview.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/sharedialogmailview.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/sharedialogexpirationview.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/sharedialogshareelistview.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/sharedialogview.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/share.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files_videoplayer/js/viewer.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/gallery/js/vendor/bigshot/bigshot-compressed.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/gallery/js/vendor/dompurify/src/purify.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/gallery/js/galleryutility.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/gallery/js/galleryfileaction.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/gallery/js/slideshow.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/gallery/js/slideshowcontrols.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/gallery/js/slideshowzoomablepreview.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/gallery/js/gallerybutton.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/notifications/js/app.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/notifications/js/notification.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/files/fileinfo.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/files/client.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/app.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/file-upload.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/newfilemenu.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/jquery.fileupload.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/jquery-visibility.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/fileinfomodel.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/filesummary.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/breadcrumb.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/filelist.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/search.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/favoritesfilelist.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/tagsplugin.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/gotoplugin.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/favoritesplugin.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/detailfileinfoview.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/sidebarpreviewmanager.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/sidebarpreviewtext.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/detailtabview.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/mainfileinfodetailview.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/detailsview.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/vendor/handlebars/handlebars.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/fileactions.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/fileactionsmenu.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/files.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/keyboardshortcuts.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files/js/navigation.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files_sharing/js/app.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files_sharing/js/sharedfilelist.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files_trashbin/js/app.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files_trashbin/js/filelist.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/activity/js/formatter.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/activity/js/activitymodel.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/activity/js/activitycollection.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/activity/js/activitytabview.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/activity/js/filesplugin.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/oc-backbone-webdav.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/comments/js/app.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/comments/js/commentmodel.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/comments/js/commentcollection.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/comments/js/commentsummarymodel.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/comments/js/commentstabview.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/comments/js/filesplugin.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files_sharing/js/share.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files_sharing/js/sharetabview.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files_texteditor/js/editor.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files_texteditor/js/vendor/ace/src-noconflict/ace.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files_versions/js/versionmodel.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files_versions/js/versioncollection.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files_versions/js/versionstabview.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/files_versions/js/filesplugin.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/vendor/select2/select2.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/select2-toggleselect.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/systemtags/systemtags.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/systemtags/systemtagmodel.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/systemtags/systemtagsmappingcollection.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/systemtags/systemtagscollection.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/core/js/systemtags/systemtagsinputfield.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/systemtags/js/app.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/systemtags/js/systemtagsfilelist.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/systemtags/js/filesplugin.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					<script src="/apps/systemtags/js/systemtagsinfoview.js?v=9a4ae11b328522aeca1e715f0a55b5b4"></script>
					</head>
@cdauth
cdauth commented Dec 19, 2016

In fact, with nextCloud 11, loading times have gone up a lot again, despite HTTP/2. On a low-latency connection where loading times with HTTP/2 were maybe around 4–6 seconds before, they are now around 15 seconds.

@utahbmxer

I too have noticed drastic increase in overall load times since upgrading to NC 11, not just the initial page. 217 requests, 3,599.67KB, 25s on WiFi LAN, drops to about 15seconds on 1GB wired LAN connection.
Running CentOS 7 and PHP7, haven't figured out an easy way to enable HTTP2 without building from source which I am not really leaning towards.

@ChristophWurst
Member

ref #1066

@Gomez
Member
Gomez commented Jan 5, 2017

I noticed this really slow load, too. If you are used to NC10 this will prevent you form upgrading to NC11.

For me this only happens on Firefox (Version 50.1.0) 8.5 sec loading with cache. With Chrominum ( Version 55.0.2883.87) it loads in 2.9 seconds.

@LEDfan
Member
LEDfan commented Jan 8, 2017

I'm experiencing the same problem. (it has become worse since NC 11).
selectie_028

It aren't the PHP requests which are slow (they are fast!) but it's my browser waiting for all the JS and CSS files to load. The screenshot was taken with a fresh profile of Firefox. When the CSS and JS are loaded and you click on a directory in the files app this is very fast. It's just loading all the css and js which is sad because off all the work on the speed up of the PHP side....

I noticed there are some files with 4-5 lines of code and a license header. Also the files aren't minimized or comments are removed. Will it get better because of #1786 ? Especially the compression part. Maybe the same can be done for the JS?

@skjnldsv
Member
skjnldsv commented Jan 8, 2017

@LEDfan Did you try the scss integration? If so did you find some improvements?
The js compression could be done yes. The same way the scss function works. Could you work on this?

@nickvergessen
Member

Well I guess the main reason is the number of files, more then what the content of the files is. Although improving both should help twice.

@webermax
webermax commented Jan 9, 2017

NC 11 indeed is incredibly slow and not usable in production anymore.

Furthermore it took me more than an hour to notice that mod_pagespeed is disabled via .htaccess.
XSS protection is fine, but the way it is implemented seems to break simple performance optimizations.

@eppfel eppfel added the high label Jan 9, 2017
@MorrisJobke
Member

XSS protection is fine, but the way it is implemented seems to break simple performance optimizations.

cc @LukasReschke

@Gomez
Member
Gomez commented Jan 10, 2017 edited

@webermax Is it every load or just the first? Does it happens in other browsers? Would you test and add some more infos?
I checked the caching headers of NC11 and they look good to me, furthermore they improved from NC10.

On my setup some caches in Firefox were disabled, which lead to the slow load in #2272 (comment).

So, the first load is slow, up to 10 sec. After this, most of the files are cached, mostly until a NC update. Don't test the load with a "F5" or "CTRL + F5" reload, this way the browser adds Cache-Control "max-age=0" and every file gets renewed.

NC11 resources load is a little slower as with NC10 because it has a few more files and requests. Still the caching improved (9802c5c).

As a todo i agree with @nickvergessen #2272 (comment). This could be tracked in another issue.

@MightyCreak

Same problem here (280 requests, 30s to connect with an empty cache, 12s afterwards), I thought it was because of my migration from OC, but then I saw #3134 and this issue.

This performance problem is also a problem with the Android app since the connection timeout is too low for such latency (nextcloud/android#601).

@LEDfan
Member
LEDfan commented Feb 2, 2017

@skjnldsv I tested the master branch with SCSS and it's the same.

BTW: the requests where the browser has cached the CSS/JS is still slow, because the browser has to fetch everything from the cache.

@skjnldsv
Member
skjnldsv commented Feb 2, 2017

Aside from compression, the current scss implementation on master won't change a thing concerning speed.

@GreenArchon
Contributor
GreenArchon commented Feb 2, 2017 edited
@MightyCreak
MightyCreak commented Feb 2, 2017 edited

In my case, I have 8 users and I am the main user with around 30GB of data. My server, although it is not a beast (as seen in my comment nextcloud/android#601 (comment)), have a good bandwidth nonetheless since it's a VPS on OVH.

I also noticed that if I go straight to my calendar (https://cloud.example.com/index.php/apps/calendar/), the page is messed up:

capture d ecran 2017-02-02 a 11 36 46

I need to go first on the main page and then I'll have access to my calendar. And I think it is linked to this issue because it's the same as with the main page: the first time you connect to the main page it's really really long, but the other time it works well. As if the first connection to the main page was initializing a bunch of stuff before really be able to use the app properly.

@eppfel
Member
eppfel commented Feb 2, 2017

@MightyCreak This could be a RAM issue. Did you check error logs? Had similar issues with the Pi.

@MightyCreak

I have 4GB of RAM which 300MB is free as /proc/meminfo is telling me:

$ cat /proc/meminfo
MemTotal:        4024576 kB
MemFree:          293020 kB
Buffers:          475596 kB
Cached:          2491872 kB
SwapCached:           96 kB
Active:          1542092 kB
Inactive:        1798364 kB
Active(anon):     133620 kB
Inactive(anon):   397336 kB
Active(file):    1408472 kB
Inactive(file):  1401028 kB
Unevictable:           0 kB
Mlocked:               0 kB
SwapTotal:        523260 kB
SwapFree:         512584 kB
Dirty:               120 kB
Writeback:             0 kB
AnonPages:        373040 kB
Mapped:           104636 kB
Shmem:            157968 kB
Slab:             301196 kB
SReclaimable:     275060 kB
SUnreclaim:        26136 kB
KernelStack:        1264 kB
PageTables:        12100 kB
NFS_Unstable:          0 kB
Bounce:                0 kB
WritebackTmp:          0 kB
CommitLimit:     2535548 kB
Committed_AS:     981004 kB
VmallocTotal:   34359738367 kB
VmallocUsed:       81388 kB
VmallocChunk:   34359654720 kB
HardwareCorrupted:     0 kB
DirectMap4k:        9132 kB
DirectMap2M:     4167680 kB

I'm not a sysadmin, but from my understanding of Linux, it's not dangerous since almost no swap is used (I guess there is a lot of cached mem that can be ditched if a process needs some mem space).

@heyarne
heyarne commented Feb 2, 2017 edited

I have the same problem and noticed a very significant decrease when updating to Nextcloud 11. The instance is running on a small Digitalocean Droplet around 500km away from me, Ping time is around 22-30ms. Three users, the data directory is around 4GB. One single share. When opening pretty much any app directly - news, files, calendar, contacts - the header is sent almost immediately (at least so the title tag is rendered in the tab; hard to tell how quick exactly, but far below 1s), but it takes around 15s until the page is rendered. I run the latest PHP 7.0 and nginx with HTTP2 enabled. Without caching it's even worse, Firefox tells me it needs 223 requests and takes almost 30 seconds (!). Maybe Immutable Caching can help somehow? All the assets are versioned anyways. What about async or defer on the script tags?

If I can provide any additional information I'm happy to help. Also of course if there's any obvious fix that I'm blind to I'd be very grateful.

@MorrisJobke
Member

Maybe Immutable Caching can help somehow? All the assets are versioned anyways. What about async or defer on the script tags?

@LukasReschke Are we brave enough to do this? 😉 But this seems to be a nice way to cache harder on the client side.

@skjnldsv
Member
skjnldsv commented Feb 3, 2017

capture d ecran_2017-02-03_07-10-33

@heyarne
heyarne commented Feb 3, 2017 edited

Yes, current browser support is ridiculously low. But in the article they list a few other big projects (Facebook, IPFS, Squid Proxy) that adopted it and reported good results. It's also on a standards track, so other browsers should be quick to follow and it's at least worth keeping an eye on (it already landed in Safari nightly). The question is, of course, how to deal with it in the meantime. Browsersniffing for different caching headers? Seems like a really inelegant solution, also because It would have to be frequently updated to keep up with current support. Maybe there's a way to set the header that would not be detrimental for non-supporting browsers while still giving advances to the ones with support.

@skjnldsv
Member
skjnldsv commented Feb 3, 2017

I'm just wondering if this is a good idea to work on this if it only apply to Firefox. :/

@ChristophWurst
Member

I added the immutable caching header to assets on my instance (via apache config) but it did not really give me a performance boost, or at least not that I could notice a difference.

@go2sh
go2sh commented Feb 3, 2017

I mean, it's a problem by design. There is a reason why there are a lot of tools like webpack out there to concatenate and compress the assets. The issue is only partly resolved with caching since you will have to read many files from disk.

@cinemast
cinemast commented Feb 3, 2017

I agree with @go2sh, it is a design problem. There are simply to many different js/css files loaded. Asset pipelining took care of this problem.

@phsc
phsc commented Feb 3, 2017

How realistic is it, that this problem will be solved with Nextcloud 12 (e.g. by implementing something like webpack)?

@benediktg
Member

This is what I get with Firefox and Nextcloud on nginx with php7-fpm and HTTP/2 enabled:
screenshot_20170203_131514

And apparently Firefox loads the resources only one after another in a sequential way:
screenshot_20170203_131556

In contrast to that Chromium seems to load the resources in a rather parallel sort of way:
screenshot_20170203_132032

@MorrisJobke Is that normal?

@uok
uok commented Feb 3, 2017

at the moment I cannot enable HTTP2 on my server so I'm trying everything else. Sorry for slightly OT but are all assets sent without gzip?

@nickvergessen
Member

We don't use HTTP2 atm

@MightyCreak

Is it stupid to add the asyncattribute to some script tags?

http://www.w3schools.com/tags/att_script_async.asp

@heyarne
heyarne commented Feb 4, 2017 edited

I changed my nginx configuration from add_header Cache-Control "public, max-age=10080"; to add_header Cache-Control "public, max-age=10080, immutable";, the results are (this is on a Macbook Air with an SSD by the way, where I thought file system access would be almost non-noticable) 222 requests and 15.61 seconds for the first hit 221 requests, 14.06 seconds for the second, cached request. Of course, fluctuations appear as usual. More than half of the resources loaded from the local filesystem, but the improvement is, after multiple tests, really not that spectactular.

@uok Gzip is not activated in my case, though I don't see why you couldn't activate it in the php.ini.

@ProfDrLuigi
ProfDrLuigi commented Feb 13, 2017 edited

Adding "query_cache_type = on" to /etc/mysql/my.cnf did the trick for me. Thats the Cache Part in my Config:

# * Query Cache Configuration
#
query_cache_limit       = 2M
query_cache_size        = 32M
query_cache_type        = on
@MightyCreak
MightyCreak commented Feb 13, 2017 edited

On Debian 8.7, mysql default config already has the cache type on with a 1M limit and a 16M size:

mysql> SHOW VARIABLES LIKE 'query_cache_limit';
+-------------------+---------+
| Variable_name     | Value   |
+-------------------+---------+
| query_cache_limit | 1048576 |
+-------------------+---------+
1 row in set (0.01 sec)

mysql> SHOW VARIABLES LIKE 'query_cache_size';
+------------------+----------+
| Variable_name    | Value    |
+------------------+----------+
| query_cache_size | 16777216 |
+------------------+----------+
1 row in set (0.00 sec)

mysql> SHOW VARIABLES LIKE 'query_cache_type';
+------------------+-------+
| Variable_name    | Value |
+------------------+-------+
| query_cache_type | ON    |
+------------------+-------+
1 row in set (0.00 sec)

So cache being already enabled, I'll try with 2M and 32M, but I'm not doubtful that will help a lot...

Edit:
Well... it seems to have improved the situation quite well (I hope it won't starve the other services I run). I'm still unsure if it works because of this or because I just went there recently. I'll keep you posted after running with these settings for a few days.

Edit 2:
As @cinemast said, it didn't change the problem and my Nextcloud instance is still very slow to log in. Reverting to the default mysql config then.

An important note on my side: I also have a Sonerezh instance on my side and on the client side (i.e. the browser), Sonerezh caches the next song in the browser cache, but each song has takes it's own cache, meaning that quite rapidly, I ran out of cache in my browser and it start to clear the "oldest" cache, and thus the Nextcloud cached resources.

That is why I often see the problem on my side. My cache (350 MB) is filled up at least 3 times a day.

@cinemast

This issue has nothing to do with mysql. Its about the way ressources like JavaScript, CSS and images are loaded.

@MightyCreak

You're right @cinemast, I edited my previous comment.

@michaelletzgus
michaelletzgus commented Feb 15, 2017 edited

@cinemast

Yes, I have the same problem wit my NC11:
Fast asynchronous loads with Chromium (81 requests, 0.5 sec), very slow synchronous loads with Firefox (84 requests, 3.5 sec). Both clients linux, latest versions, HTTP2, 100 MBit via WAN, nginx server@freebsd, mysql db, php7, loading login page.

@michaelletzgus

@MightyCreak

Maybe async won't work due to dependencies between the loaded js resources?
And: Why does Chromium do async loads and Firefox not...?

@MightyCreak
MightyCreak commented Feb 15, 2017 edited

It's completely possible that Chromium is a bit smarter and does the loading in two passes: first load the files asynchronously, second parse them and resolve dependencies.

It's actually so simple that I wonder why Firefox wouldn't do that actually.. maybe it's part of their electrolysis feature as well?

@heyarne
heyarne commented Feb 15, 2017

Even though this is slightly off topic - I guess it's still somehow related to the overall "How do we get NC faster"-problem: The HTTP 2 behavior seems to be independent of scripts (which rules out the electrolysis explanation I guess). I just tested it on this page and while Chrome and Safari have a speed improvement of close to 50%, Firefox has an improvement of only around 10%.

@webermax

@Gomez I can confirm that performance issues regarding page loading seem to be related to Firefox.

@MightyCreak
MightyCreak commented Feb 15, 2017 edited

@heyarne I don't have your results, at all, on Firefox (on OSX). I have a loading time of 7s in HTTP1 ans 1s in HTTP2. The latency is around the same for both: 110ms

@michaelletzgus
michaelletzgus commented Feb 16, 2017 edited

@MightyCreak
Hm, if Chromium is really so smart to optimize resource loading then IMHO Nextcloud should be so smart, too.
If it's really necessary to load hundred of different files then these files should be requested the same way Chromium does. Maybe we need to manually reorder these request and flag them with "async" if possible?

@MightyCreak
MightyCreak commented Feb 16, 2017 edited

@michaelletzgus You missed a word I think, but I'll guess you meant "Firefox"

if Chromium is really so smart to optimize resource loading then IMHO should be so smart, too.

I hope so, I love Firefox and think it's far better than Chrome in a lot of different places (but obviously not all). But that's not really the point here 😉

I agree with you that there must be some scripts that can be set "async", they can't be all interdependent! or there is a real modularity problem 🙂

@michaelletzgus
michaelletzgus commented Feb 16, 2017 edited

@MightyCreak
Oups, Ähh, no, I meant "Nextcloud" should be smarter in delivering its files.
I think it's not a good idea to rely on client side optimization, even the dumbest but standards-compliant browser should be able to load Nextcloud reasonably fast.
But it's still possible there's a bug in Firefox' engine, I don't know.

@Wenzel
Wenzel commented Feb 19, 2017

Hi,
According to what you described, i have the same issue.
Firefox is very slow loading the file app in NextCloud, making more than 200 requests, and taking ~35sec to load the page, whereas Google Chrome does it in 5sec.
At the beginning i thought it was a performance issues related to my nginx server, so i tried a workaround by enabling HTTP2, but it just improved the performance for Google Chrome.

So should we make a bug report to Firefox ?
Or is there something to do in NextCloud server too ?

Thanks !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment