css and JS files take too long to download

Question

I have a website written in cakephp on linux server. I have a problem with extremly slow download time of my css and js files. For example, thats the network tab in chrome when loading my homepage:

As you can see, one of my css files took 59 seconds to download! Its important to note that it is not always the same css file. Sometimes its JS file, sometimes other css but they have to be downloaded before other content of the page is displayed, therefore they block the page loading. Because of waiting for that one file to download, website is not displayed for 59 seconds.

I checked my server and it has a very low load, cpu runs on 10% and there is less than 20% of ram used. Its an apache server with the following prefork settings:

StartServers       10
MinSpareServers    10
MaxSpareServers    20
ServerLimit        256
MaxClients         256
MaxRequestsPerChild  10000

This mentioned slow download time happened with maybe 3-4 simultaneous users on the website. I have my app under APM with appdynamics and nothing suspicious is shown there. I checked php.ini file with server admin and everything seems to be good there as well. What other software can I use to find the source of this issue? There is not much info in apache logs either.

Any suggestions would be greatly appreciated

EDIT:

I moved all of my assets to webroot and got these results on another domain that is using that same server:

As you can see, this time its jquery file that took 27 seconds to download. It is stored in the app/webroot

Answer 1

Ill take a look at serving assets from webroot

Always put public assets in the webroot.

From the book (emphasis added):

It’s a well known fact that serving assets through PHP is guaranteed to be slower than serving those assets without invoking PHP. And while the core team has taken steps to make plugin and theme asset serving as fast as possible, there may be situations where more performance is required. In these situations it’s recommended that you either symlink or copy out plugin/theme assets to directories in app/webroot with paths matching those used by CakePHP.

• app/Plugin/DebugKit/webroot/js/my_file.js becomes app/webroot/debug_kit/js/my_file.js
• app/View/Themed/Navy/webroot/css/navy.css becomes app/webroot/theme/Navy/css/navy.css

Depending on many factors, "slower" can be anywhere between barely-noticeable to barely-usable.

This advice is not version specific, and pretty much always applies. To make assets load faster, let the webserver take care of them for you.