Question

根据谷歌的风格指南，您应该省略<head>

等可选标签

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

然而，这样做导致google pagespeed告诉我：

文档正文中的CSS会对渲染性能产生负面影响。 http://site.com在文档正文中有CSS：1中的1个样式块身体应该移动到文件头。

是的，那应该做些什么？

感谢。

Answer 1

此链接告诉您哪些条件可能会省略某些标记。

http://www.whatwg.org/specs/web-apps/current-work/multipage/syntax.html#syntax-tag-omission

但要注意，省略标记并不意味着省略元素

在您的情况下，＆lt; head＆gt; 是可选的（甚至是html）。只是做

<!DOCTYPE html>     
  <link rel="stylesheet" href="pathTo.css">

您可以查看

Is it necessary to write HEAD, BODY and HTML tags?

对于可能想要实验的读者，将以下代码保存到文件并读取并使用像firebug这样的工具进行检查

<!DOCTYPE html>     
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 <title>Page Title</title>
 <link rel="stylesheet" href="pathTo.css">
 <script>var a = 0;</script><!-- placed in head -->

 <div>any html text or tags</div>
 <script> var b = 1</script> <!-- placed in body -->

Answer 2

PageSpeed在这样的事情上是不可靠的。您应该分析自己的文档结构是否正确。使用HTML 4.01和验证器，您将立即看到style内是否出现了一些body元素，因为它是一个标记错误（虽然它也在那里工作）。

您的引用提到的页面http://site.com没有此问题（它是XHTML，没有标记遗漏）。请发布一个真实的URL，或者至少使用.example伪域来表示URL是虚拟的。

如果没有看到实际页面，就无法分析问题，但一般来说，Google PageSpeed似乎会发出虚假评论。它似乎工作不一致，但至少在某些情况下它清楚地解析了一个错误的文档。例如，以下代码触发了消息：

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

这里没有含糊之处：style元素位于head元素中（这就是浏览器解析文档的方式，搜索引擎在这里并不重要），即使PageSpeed另有说明

我尝试添加省略的标签，没有任何效果，直到突然，PageSpeed停止发出消息，现在上面的文档得到一个干净的报告。我得出结论，PageSpeed非确定性地工作，可能是由于其积极的缓存。

Answer 3

来自规范：

如果元素为空，或者如果body元素中的第一个元素不是空格字符或注释，则可以省略body元素的开始标记 ，除非body元素中的第一个元素是一个脚本或样式元素。

这似乎是导致问题的最可能原因，因为这会使起始正文标记不可选。

（假设您按照指示删除了所有可选标签，而不仅仅是选择）

把CSS放在文档头但我没有头？

3 个答案: