消除渲染阻止的JavaScript和CSS-需要建议

Question

Google PageSpeed Insights将其标记为我应该解决的问题-我已阅读https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery上的优化CSS交付指南，但我对最佳实践感到困惑是，还有哪些资源被渲染阻止，哪些不是？

谷歌是从提示页头拆除样式表的链接，并与内联样式更换，使一些渲染，然后使用JavaScript来触发外部样式表加载在window.onload火灾时？ 这不会只是延迟到达“正确呈现”页面的过程吗？浏览器尽快开始下载CSS更好吗？

Answer 1

是的，这几乎就是您所推荐的页面所推荐的。 在<style>标签内的HTML标记中直接放入最少量的CSS（只要是少量的CSS）。 然后在文档末尾包含完整的样式集。 （在示例中，它实际上并不是通过JavaScript本身加载的；相反，指向外部样式表的链接位于<noscript>标记中。这有点麻烦，但是可以完成工作。您也可以请求样式表通过AJAX并直接使用JavaScript注入。）

仅当您可以隔离页面所需的最小CSS并且CSS数量相当小时，此方法才有效。 例如，如果您要构建一个单页Web应用程序，则许多CSS规则可能适用于该应用程序中除初始视图之外的其他部分。 在这种情况下，这些额外的规则可以放在外部样式表中。 或者，也许您有一组严格用于弹出对话框的规则。 这些规则也可以推迟。

如果您不能真正将规则分为最初需要的规则和不需要的规则，并且最小规则集很大，则无法利用这种方法。