Order of elements in CSS

Does it matter?

[Broadway]

My CSS file makes two calls for graphic files.

1) One is for a background gradient (just a colored background across the top portion of the page) that's called in the BODY element.

2) The other is for an image sprite. It includes a page-top header graphic and buttons and decorations for the page layout.


I was under the impression that (at least) some browsers can only download so may files from a single server at a time.

I would much rather that the image sprite be downloaded first, so the header graphic gets shown ASAP.

If there's a lag in showing the background color gradient, that doesn't bother me much.


To implement this, I'm assuming that calling the image sprite first in the CSS file is a help (Although I can't really say that my visual testing of page loading confirms this).

Am I right with my thinking, or some how mistaken?

And also, is it OK to NOT place the BODY element first in a CSS file? (When I test this format everything seems to work ok.)

Thanks.

[drhowarddrfine]

Yes, multiple downloads occur at one time but the number is restricted to 4 or 6 at once.

It doesn't matter where you put the body property in a CSS file because nothing happens until the browser downloads and evaluate everything in that file.

Downloads start when the src path is read by the browser assuming it can start one right away.

[lucy24]

Overlapping...

Order of statements in CSS is only significant when one rule potentially overwrites another. So within any given element, go from most general to most specific.

The body doesn't have to come first. But your page is not going to start rendering before the whole CSS has loaded, so it only makes sense to put things where you can find them later.

There are page-speed-testing utilities that show in excruciating detail what gets loaded when, and how long it takes.

:: shuffling papers ::

Here's one [webpagetest.org] that I've met recently. (The next passing moderator may swap out this link for something higher up the Authorized List. I found it on web-pages-that-you-know-what dot com.)

[SevenCubed]

Whether or not it actually makes a difference I don't know. But in my obsessive compulsive quest for speed and efficiency I always list the css in the order that they appear on the page. And I take it a step further by ordering the attribute names in alphabetical order. I'm not sure why I do it, really! But recursion comes to mind, I just wouldn't know how to test for it.

It all works for me. Last site launched now has my all-encompassing knowledge of what constitutes good design principles and it is (according to GWT) loading in an average of 123 thousands of a sec, with lowest at 82. The other sites on the same server are around 300 without having been fussed about as much.

Yes, multiple downloads occur at one time but the number is restricted to 4 or 6 at once.

I think that standard has been bumped up in most browsers. I think it's currently at 12 in FireFox, not sure about IE or others. It used to be 2 way back. But even then, and now, I assign my browsers a higher value.

In IE you can add a new registry key call MaxConnectionsPerServer and bump the default up to say, oh, 25 isn't being too demanding (depending on your ISP connection type). In FireFox you can edit it by typing about:config in address bar then search for network.http.max-connections-per-server -- bump it from default of 12(?) to something like 25.

Don't over do it or you risk suffering the wrath of webmasters by hogging the queue, they might ban you!

It helps speed up your surfing :)