CSS in head or external

Considering Speed, Compressiona and Round Trip Times

[denisl]

I have always used external Css files but am currently looking at alwasy to make my sites as fast as possible.

Currently I use templates (between 1 and 5 per site) which include the basic layout in DIVs and access the external css file in the head.

I am now using PHP at the top of the template to use gzip compression. As I was not sure how to gzip the CSS, I have placed a mimised version of the CSS file in the head section of the template so that it all gets compressed.

As I understand it, this will also save time due to not having to access an external file but I may lose some benifit from caching.

My CSS files are generally not large, around 5kb uncompressed.

Any thoughts?

[BeeDeeDubbleU]

I am not sure of this but I would not have thought that an external CSS file would cause any noticeable problem with load time?

[swa66]

You do not need PHP to allow compression. The web server itself can do that for your CSS and static HTML easily enough without the added overhead of PHP.
Apache uses mod_deflate for that.

So that leaves multiple hits (CSS, HTML) vs. a single hit (HTML with embedded CSS).

Since browsers will do multiple connections at the same time, I'd recommend the external file: linked from as soon as you can in the head section.

The browser will fetch the CSS and the HTML in parallel and it can cache the CSS for the next page not needing to transfer the CSS again on every page hit.

If you look at e.g. Google's page speed recommendations: there is no recommendation to use CSS in the header instead of using a single external CSS file
[code.google.com...]

[denisl]

Thank you swa66 - the precise info I was looking for.

PHP was the easier option but will now look at mod_deflate which I assume can be done via htaccess.

Shall also look at CSS sprites for those case where I have large a number of small images to download.