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

时间:2013-12-15 13:19:26

标签: javascript css render pagespeed

Google PageSpeed Insights将此标记为我应该修复的内容 - 我已经阅读了https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery上有关优化CSS交付的指导,但我对最佳做法是什么以及渲染的资源感到困惑阻止哪些不是?

Google是否建议从页眉中删除样式表链接并替换为内联样式以使某些内容呈现,然后使用Javascript触发外部样式表以在window.onload触发时加载?这不会延迟到达“正确呈现”页面的过程 - 浏览器是否应该尽快开始下载CSS?

1 个答案:

答案 0 :(得分:0)

是的,这几乎是您推荐的页面推荐的内容。将最小量的CSS(只要少量)直接放在<style>标记内的HTML标记中。然后在文档末尾包含完整的样式集。 (在示例中,它实际上并不是通过JavaScript本身加载的;相反,指向外部样式表的链接放在<noscript>标记中。这有点像黑客,但它完成了工作。你可以也可以通过AJAX请求样式表并直接使用JavaScript注入它。)

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

如果您无法将规则分成最初需要的规则和非规则规则,如果您的最小规则集很大,则无法利用此方法。