A. If it only holds CSS for the home page, why is it even a separate file? The material will get loaded up either way, with one server call more or less.

B. If it holds CSS only for pages other than the home page, why would it ever be loaded from the home page? Save it for when the user actually gets to a second page. Any second page; the browser will take it from there.

If your CSS files are so vast that you're thinking about loading them from the footer to avoid delays in page display (I assume that's the reasoning), then the location of CSS files may be the least of your troubles ;)

fwiw, this is the way I've done it for the last several years:

/sharedstyles.css called by all pages, so the visitor gets the material once and then doesn't need to request it again for a month. (I think it's a month. It seemed a reasonable length of time when I was setting expiration times.)

/dir1/dir1styles.css, /dir2/dir2styles.css and so on for styles that are shared by a single directory. Not necessarily every page in the directory, but if I use the same style more than once, it goes into a directory-specific stylesheet. And if the same thing shows up in several directories' stylesheets, out it goes to /sharedstyles.css

/dir1/dir2/dir2styles.css is rare.

Absolutely never, ever more than three external stylesheets for any one document. (I used to amuse myself periodically by looking at the generated HTML of {Major CMS} pages and counting the stylesheets. It stopped being fun when the number passed 30. I am not making this up.)

If your CSS files are so vast that you're thinking about loading them from the footer to avoid delays in page display (I assume that's the reasoning), then the location of CSS files may be the least of your troubles ;)

I'm just trying to shave fractions of a second here and there, really. Google Analytics shows best-practices to be to load CSS and Javascript at the bottom of the page when possible, so I'm really just playing around with the idea a little.

If it holds CSS only for pages other than the home page, why would it ever be loaded from the home page? Save it for when the user actually gets to a second page. Any second page; the browser will take it from there.

In my case, very few of my visitors stop at the homepage, so my thought was preloading the styles for the rest of the site and helping the second page to load faster.

My "old" layout had 2 sheets for each page (similar to your layout; a "universal" stylesheet on every page, and a second directory-specific stylesheet), but I'm not sure if removing one of those connections in favor of a larger single stylesheet would end up being faster.

I'm not sure if removing one of those connections in favor of a larger single stylesheet would end up being faster.

That probably comes down to a Technical Issues question: Two server calls to two small files, or one server call to one big file.

My hunch: Six of one, half a dozen of the other. It only becomes important if the choice is between one truly vast file, or huge numbers of smaller files. (I've actually got one set of pages--online games--that routinely generate "500"* errors in logs, because they call more than 100 sound/image files. Mercifully the server limit is now 100; some years ago it was only 30. This is out of my power to change on shared hosting, and luckily it doesn't seem to affect the user; their browser just sends a fresh request a second later.)


* “Great! Only 499 to go!” --J D Morgan or someone like him.

My understanding is that Google speed tests are mostly based on above the fold content. So key is to render that as quickly as possible. They suggest to inline the css and js for all above the fold content. So I would follow that advice, inline the css/js for the above the fold content and then load the remaining css from one file from the bottom of the page and load the external js async or defer.

The other consideration is ease of maintenance, if you have separate css/js files for almost every page, then gets to be a lot of files to maintain.