消除渲染阻塞css

Question

我的CSS文件导致我的页面缓慢渲染，这就是我将它们移动到页脚的原因。然而，这会产生UX问题，因为当页面加载时，它最初完全没有样式。

我已经想到了这个问题的两个解决方案，并且想知道哪个是最好的：

• 将导航栏和页面标题的CSS声明移动到一个新的CSS文件中，该文件将放在标题中。虽然这将是一个相对较小的文件，但它具有创建另一个HTTP请求的缺点

• 在标题中内联CSS以获取导航和页面标题。虽然这不会创建另一个HTTP请求并且可以解决问题，但CSS不会像我将其放在外部文件中那样缓存。

这个问题的最佳解决方案是什么？是否有良好的实践指南？

Answer 1

是的，这个问题的解决方案是将你的css的关键部分（或全部）直接嵌入到文件中（index.html），因为如果你有更多文件，那么每个文件的新请求都是因此加载页面需要更多时间:)

Answer 2

根据谷歌的说法，最好的选择是第二个。

As described here

Answer 3

良好做法指南是：

• 尽可能写为最小css，避免编写不必要的css属性。
• 除非必须使用多个css文件，否则请始终尝试为所有样式创建单个css文件。即便如此，也不要创建超过3个css文件。
• 使用CDN链接包含框架，工具包。
• 避免编写内联css样式，使用外部css文件。
• 正确使用html标签。 html5引入了一些新标签，如header，main，aside，nav，footer。正确使用这些标签。它给出了一个清晰的结构。因此，没有必要手动为这些标记创建div类。

我的问题是你怎么知道你的css文件导致你的页面缓慢渲染？你在使用任何javascript / jQuery插件吗？