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.
Question:
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!