Yahoo has over 45 KB of in-page CSS

[londrum]

i was at uk.yahoo today and thought i'd have a quick gander at the source code, and was surprised to see that instead of using an external style sheet, they have put what seems like the entire CSS of the page into the header.
i weighed it up, and it came to a staggering 45KB - just for that one page's CSS.

why would they do that? what benefit do they get out of it? they obviously know what they're doing, so i'm curious as to what the thinking behind it is.

when you think how many hits they must get every day, they must be blowing a fortune on bandwidth. they could stick that entire 45KB in an external stylesheet and save themselves a fortune.

... and i haven't even mentioned the in-page javascript ...

[Xapti]

The javascript is probably brutal, yeah. The fact is though, while 45kb may be lots when you multiply it in the millions per day, it is still very insignificant to their total page size. I'm just making a huge guess, but they probably use many images, probably totalling 10 times the value of javascript and CSS combined. Might as well use significant CSS and javascript, if the images use up the bulk of the bandwidth anyways. (while they could cut down on their images, I'm sure they find that the image quality, and usage of images everywhere is very important to them - as you'd find with most sites)

What's still suprizing though, is that they include what I could only guess is the CSS for all their main types of pages. You'd think considering they're put in the header, that server side includes would only include the relevant stuff. I guess that's sorta the point you were bringing up, perhaps.

[edited by: Xapti at 4:28 am (utc) on Oct. 13, 2007]

[mattur]

Yahoo minimise the number of HTTP requests to speed up page performance (and also use compression), based on their in-depth performance [yuiblog.com] research [yuiblog.com]:

Since browsers spend 80% of the time fetching external components including scripts, stylesheets and images, reducing the number of HTTP requests has the biggest impact on reducing response time.

See also: Yahoo Video "High Performance Web Sites: 14 Rules For Faster Page" [video.yahoo.com]

Google's homepage has 3 HTTP requests: the page, the logo and an undisplayed composite image - cached, ready to be used on the results pages.

Note these are not normal pages/sites, and their Performance Best Practices [developer.yahoo.com] recommends using external files for CSS and javascript for most pages:

The key factor, then, is the frequency with which external JavaScript and CSS components are cached relative to the number of HTML documents requested. [...]

Home pages that have few (perhaps only one) page view per session may find that inlining JavaScript and CSS results in faster end-user response times.

Lots of useful information in those resources.

[Lexur]

And then...

Could be a good solution to include the CSS in every page via SSI within the STYLE section?

Just in the homepage?

[penders]

Yahoo minimise the number of HTTP requests to speed up page performance (and also use compression)...

The 103.37 KB homepage is compressed to 32.52 KB to be sent down the wire.