Say I have the following setup:
Page1.html
Page2.html
I have been told that merging the two js and additional css files would be better for caching? But wouldn't the separate files be cached as well? I don't see how this makes a difference (aside from maintainability maybe - personally I like the separation).
what is the most perform-ant and most sensible way to organize something like this?
Disclaimer:: Micro optimization is not the issue here - I would like to know what the best practices are before I begin my project so I do not have to revisit this later.
The benefit would be:
If the user visits Page1, then Page2, their browser would fetch:
Page1.html
-> master.css
-> page1.css
-> page1.js
Then, some time later:
Page2.html
-> [ no need to re-fetch cached items ]
If the page1.css <-> page2.css and page1.js <-> page2.js are substantially similar, that could (worst-case) save two DNS look-ups, and two HTTP negotiations, which could be fairly slow.
At the very least, you're possibly saving having to "listen to" about 1KiB of incoming HTTP headers twice for page2.css and page2.js. (Although all the major browsers will likely chain those requests together.)