Css and JS files take too long to load

Question

I have a website written in cakephp on a linux server. I have a problem with extremely slow loading time of my css and js files. For example, this is the network tab in chrome when loading my home page:

As you can see, one of my css files took 59 seconds to download! It is important to note that this is not always the same css file. Sometimes its JS file, sometimes different css, but it must be loaded before displaying other content on the page, so they block the page from loading. Due to waiting for the download of one file, the website does not appear for 59 seconds.

I checked my server and it has a very low load, cpu runs at 10% and uses less than 20% of the used bar. Its apache server with the following preview settings:

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

This mentioned slow download time occurred with 3-4 users simultaneously on the website. I have an APM application with appdynamics, and there is nothing suspicious here. I checked the php.ini file with the server administrator and everything seems to be fine there. What other software can I use to find the source of this problem? There is also little information in apache logs.

Any suggestions would be greatly appreciated.

EDIT:

I moved all my assets to webroot and got these results in another domain using the same server:

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

Answer 1

Take a look at webroot asset maintenance

Always post public assets in a feed.

From the book (emphasis added):

It is well known that servicing assets through PHP is guaranteed to be slower than servicing these assets without calling PHP . And although the main team has taken steps to make the plugin and thematic asset working as quickly as possible, situations may arise when greater productivity is required. In these situations, it is recommended that you either symbolize or copy the plugin / theme resources into directories in app / webroot with paths corresponding to 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 subtle to barely usable.

This tip is version independent, and pretty much always applies. To speed up the loading of assets, let the web server take care of them for you.

Answer 2

Have you tried to minimize your code? Extracting unnecessary characters from your code without removing any features. This can speed up boot time.

Take a look at the following link: http://www.htmlgoodies.com/beyond/reference/7-tips-to-make-your-websites-load-faster.html