Search code examples
htmlpagespeed

Put CSS in the document head but i don't have a head?

According to google's style guide you should omit optional tags like <head>

http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml#Optional_tags

However, doing so causes google pagespeed to tell me:

CSS in the document body adversely impacts rendering performance. http://site.com has CSS in the document body: 1 style block(s) in the body should be moved to the document head.

Right, so what should be done?

Thanks.

Solution

  • PageSpeed is unreliable in matters like this. You should analyze yourself whether your document structure is correct. Using HTML 4.01 and a validator, you will immediately see whether some style element appears inside body, since it is a markup error there (though it works there, too).

    The page http://site.com that your quote mentions does not have this issue (it is XHTML, with no tag omission). Please post a real URL, or at least use the .example pseudo-domain to signal that a URL is dummy.

    Without seeing the actual page, it is impossible to analyze the problem, but in general, Google PageSpeed seems to issue spurious comments. It appears to work inconsistently, but at least in some occasions it clearly parses a document wrong. For example, the following code triggered the message:

    <!doctype html>
<title>foo</title>
<style></style>
<h1>foo</h1>

    There is no ambiguity here: the style element is in the head element (and that’s how browsers parse the document, and search engines don’t really matter here), even though PageSpeed claims otherwise.

    I tried adding the omitted tags, with no effect, until suddenly, PageSpeed stopped issuing the message, and now the document above gets a clean report. I conclude that PageSpeed works non-deterministically, possibly due to its aggressive caching.