优化CSS交付 - Google的建议

Question

谷歌建议在头部和其他CSS内部使用非常重要的CSS内联<noscript><link rel="stylesheet" href="small.css"></noscript>.

这引起了我的一些问题:

• 如何在两个文件中确定CSS的优先级.该页面的所有内容都很重要.显示,字体等.如果我将它移动到底部,那么它如何帮助页面渲染.它不会导致重画等吗？
• 在Document ready事件之后是否需要CSS？从这里得到它.
• 如何'CSS可以'进入内部<noscript></noscript>,这是脚本？启用JavaScript时它会起作用吗？浏览器兼容吗？

参考

Answer 1

基于我对该问题中给出的链接的阅读:

1. 根据消除Flash-of-Unstyled-Content效果,选择内联的CSS声明.因此,请确保所有页面元素的大小和颜色都正确.(当然,如果你使用网络字体,这是不可能的.)
2. 由于未内联的CSS是可延迟的,因此您可以在有意义的时候加载它.DOMContentReady在我看来,加载它与此优化相反:在文档完全加载之前启动新的HTTP请求可能会减慢页面加载的其余部分.另外,请看下一点:
3. 该示例将noscript标记中的CSS显示为后备.在示例下方,页面说明

   在页面加载后加载原始的small.css.

即使用javascript.

如果我可以在这篇文章中添加我自己的个人意见:

• 这种优化似乎对代码可读性特别有害:样式表不属于noscript标记,并且如评论中所指出的,它不会通过验证.
• 它将打破HTTP(或其他协议)请求的任何潜在的未来增强,因为网络事务是通过javascript进行硬编码的.
• 最后,在什么情况下你会获得性能提升？也许如果你的页面加载了很多最初隐藏的内容; 但我希望浏览器本身能够比这个黑客更好地优化页面加载.

然而,带上一粒盐.我会毫不犹豫地说谷歌不知道他们在做什么.

编辑:关于flash-of-unsstyled-content(缩写为FOUC)的注释

比方说你是一个跨越多行的文本块,并包含一些带有自定义样式的文本<span class="my-class">.现在,说你的CSS会设置.my-class { font-weight:bold }.如果该CSS不是内联样式表的一部分,则在延迟加载完成后.my-class会突然变为粗体.文本块可能会重排,如果需要额外的行,也可能会更改大小.

因此,您可以轻松获得部分风格的内容,而不是一丝完全没有风格的内容.

因此,在考虑延迟CSS时应该小心.一种安全的方法是仅推迟用于显示本身延迟的内容的CSS,例如在用户交互之后显示的隐藏元素.