[6.0.1] CSS / JS files are not bundled into one file

[ser72]

Priority: Medium

Impacts: User experience, performance, server load, scaling

The oC web UI issues separate requests for CSS and JS files:

<link rel="stylesheet" href="/remote.php/core.css?v=74b4d273507a7e0eba857955bd45b2cf" type="text/css" media="screen" />
    <link rel="stylesheet" href="/index.php/apps/files/css/files.css?v=74b4d273507a7e0eba857955bd45b2cf" type="text/css" media="screen" />
    <link rel="stylesheet" href="/index.php/apps/files/css/upload.css?v=74b4d273507a7e0eba857955bd45b2cf" type="text/css" media="screen" />
    <script type="text/javascript" src="/index.php/core/js/config.js?v=74b4d273507a7e0eba857955bd45b2cf"></script>
    <script type="text/javascript" src="/remote.php/core.js?v=74b4d273507a7e0eba857955bd45b2cf"></script>
    <script type="text/javascript" src="/apps/files/js/file-upload.js?v=74b4d273507a7e0eba857955bd45b2cf"></script>
    <script type="text/javascript" src="/apps/files/js/jquery.iframe-transport.js?v=74b4d273507a7e0eba857955bd45b2cf"></script>
    <script type="text/javascript" src="/apps/files/js/jquery.fileupload.js?v=74b4d273507a7e0eba857955bd45b2cf"></script>
    <script type="text/javascript" src="/apps/files/js/jquery-visibility.js?v=74b4d273507a7e0eba857955bd45b2cf"></script>
    <script type="text/javascript" src="/apps/files/js/filelist.js?v=74b4d273507a7e0eba857955bd45b2cf"></script>
    <script type="text/javascript" src="/apps/files/js/fileactions.js?v=74b4d273507a7e0eba857955bd45b2cf"></script>
    <script type="text/javascript" src="/apps/files/js/files.js?v=74b4d273507a7e0eba857955bd45b2cf"></script>
    <script type="text/javascript" src="/apps/files/js/keyboardshortcuts.js?v=74b4d273507a7e0eba857955bd45b2cf"></script>
    </head>

This is unfortunate on multiple levels:

a) too many HTTP requests, add time for page load
b) some of the requests are going to index.php or remote.php instead of the to the filesystem. Requests to the filesystem can be handled efficiently by the web server and don't incur the startup cost of PHP.
c) the only thing index.php and remote.php seem to do is to minify the JavaScript file. With around 200ms spent waiting for the PHP request to be handled, the benefits of compressing the JS online are dwarfed by the the time it takes to do that and the 4 calls to a PHP script

Best practice is to combine & compress JS and CSS files, resulting in just two files that can be statically delivered

Evidence is shown S3 under Support/CSS_JS

The Network console shows all network requests, and the time it takes. The column "Time/Latency" shows how long each request takes. For the PHP based requests, we regularly see > 150ms latency (up to 911ms in one case).

Reducing the number of requests, and not going through the PHP layer for static files (JS/CSS) should greatly improve the performance of the WebUI.

There are tools available that will help doing that: http://gruntjs.com for "on deployment" compacting/combining

[DeepDiver1975]

@ser72 We are aware of this issue:
#6674
#4469

As solution approach I'd favor assetic
#4469 (comment)

But this is nothing we can solve in the scope of OC6

@karlitschek @MTRichards should we allocate dev resources within the scope of OC7?
If yes I'd nominate @bantu to come up with a solution - looks like he has some expertise in this area.

[MTRichards]

Helping this along would be great, performance improvements are always good. But, I don't know the scope of the effort...?
@karlitschek

[DeepDiver1975]

But, I don't know the scope of the effort...?

Honestly this is an architectural change within the core.
The overall effort can be estimated once we dive in it and see the implications.

[karlitschek]

Having several independent css and jss file is not necessarily a problem because they can and will be cached by browser.
So thanks a lot for the feedback @ser72 but this is only a minor issue. There are other ways to optimize the performance who have a fundamentally bigger impact.

[jcfischer]

While this in general true for files that are served from the http server directly, the situation is not quite as simple with the current ownCloud code:

There are 3 CSS and 2 JS calls that are routed through remote.php or index.php respectively. While the return code of these calls is a 304 as expected, it takes (in our setup) between 175 and 600 ms to respond to these calls (while the files that are served by the web server directly are being 304ed within a few milli seconds)

I guess that this is due to the session locking that is being addressed in #7197

[DeepDiver1975]

@karlitschek reopening this as discussed yesterday - pull request will follow these days

[karlitschek]

very cool!! Thanks

[jancborchardt]

@DeepDiver1975 the corresponding pull request is the merged #7310, right? In there it sounds like a backport is not planned, so should we close this? Or what’s the status?

[DeepDiver1975]

@DeepDiver1975 the corresponding pull request is the merged #7310, right? In there it sounds like a backport is not planned, so should we close this? Or what’s the status?