消除渲染阻塞 css答案

【问题标题】：Eliminate render blocking css消除渲染阻塞 css
【发布时间】：2016-07-23 12:39:36
【问题描述】：

我的 CSS 文件导致我的页面呈现缓慢，这就是我将它们移到页脚的原因。然而，这会产生一个用户体验问题，即当页面加载时，它最初是完全没有样式的。

我想了两个解决这个问题的方法，想知道哪个是最好的：

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

但是浏览器必须在每个新页面上下载内联 css，不是吗？您是说即使这会增加整体页面大小，但差异微不足道？
差异很大，因为您发出的请求更少 :) 您的 css 大于 1MB :) 所以是的，搜索引擎更多地抱怨请求数量（每个链接标签都是另一个请求) 然后是下载的 css 的大小 :)
@AdamScott 你做到了吗，结果更好吗？ :)

【解决方案2】：

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

【讨论】：

【解决方案3】：

良好的实践指南是：

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

我的问题是，您如何知道您的 css 文件导致您的页面呈现缓慢？你在使用任何 javascript/jQuery 插件吗？

【讨论】：