How To Handleapp Js And Css

I have a couple questions on the best practices when handling application assets. I’m wrapping up my application and would like to make sure I handle the assets properly.

The application stats:

Views: 50 different with some render partials/ajax which would bump it up to about 70-75

CSS Files: 25

JS/JQuery files: 30

I keep the files separate to make maintenance easier as well as debugging. I currently compress all JS/CSS and minify them. I also use gZip compression site wide and deliver the assets from a CDN.

I have about 10-15 of the pages that use some JS and CSS that the rest of the site doesn’t use. The pages that require the extra CSS/JS that the rest of the site doesn’t require total to about 5-6kb and are currently being included in one JS and one CSS file with the other assets.


Is it better to leave them how they are OR separate them and inject them in the head/end of body when needed?

I don’t know if the extra HTTP request if I delivered them as needed is worse on performance or leaving them in with the rest and making 2 HTTP request total.

If I separated them I’d make 4 HTTP request per page (CSS/JS wise and I would of course compress/minify them and inject them in their approiate places i.e. head/ before body end) on a need basis and the pages that don’t need the extra JS/CSS would stay at 2 HTTP request (CSS/JS wise).

All of my pages load in .5 - 2 seconds how it is and there is not any difference in speed either way that I can see in my logs. I don’t want the lazy way to do this but the best possible way.

Thanks for your time and comments in advance!