优化 CSS 交付 - Google 的建议

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

这在我心中提出了几个问题：

• 如何确定两个文件中 CSS 的优先级。该页面的所有内容看起来都很重要。显示、字体等。如果我将其移至底部，那么它如何帮助页面渲染。会不会导致重漆等？
• 文档就绪事件后是否需要 CSS？从那里得到的here https://stackoverflow.com/questions/19374843/css-delivery-optimization-how-to-defer-css-loading.
• “CSS”如何进入内部<noscript></noscript>，这是用于脚本的？启用 JavaScript 后它会起作用吗？浏览器兼容吗？

参考 https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

根据我对问题中给出的链接的阅读：

1. 根据消除 Flash-of-Unstyled-Content 效果来选择内联哪些 CSS 声明。因此，请确保所有页面元素的尺寸和颜色正确。 （当然，如果您使用网络字体，这是不可能的。）
2. 由于非内联的 CSS 是可延迟的，因此您可以在任何有意义的时候加载它。加载到DOMContentReady在我看来，这违背了这种优化的要点：在文档完全加载之前启动新的 HTTP 请求可能会减慢页面加载的其余部分。另外，请参阅我的下一点：
3. 该示例显示了 noscript 标记中的 CSS 作为后备。在示例下方，页面指出

原始的small.css是在页面onload之后加载的。