防止阻塞渲染的CSS

Question

我有一个网页，引用了Bootstrap 4的CDN。在HTML页面的标签中，我有以下内容：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

这是我唯一引用的CSS。但是，当我运行Google的PageSpeed工具时，我得到了以下错误：

消除在可见内容上方阻止渲染的JavaScript和CSS 您的页面有1个阻止CSS资源。这会延迟页面的呈现。 您的页面上没有任何可见内容可以在等待加载以下资源的同时呈现。 尝试推迟或异步加载阻止资源，或直接将关键部分内联到HTML中。 请优化以下内容的CSS交付：

https://maxcdn.bootstrapcdn.com/…trap/4.0.0-alpha.2/css/bootstrap.min.css

我觉得这是一个鸡生蛋的问题。如果我将此样式表引用移到我的body元素底部，当我访问页面时，页面从无样式跳转到有样式。作为人类，这相当令人不适。然而，当我这样做时，我的PageSpeed分数显着提高。

还有其他替代方法吗？我一直认为使用CDN是一件好事，因为它使您能够利用一些缓存功能。但是，这种惩罚似乎相当严重。

- user70192

Answer 1

不用担心，这不是一个大问题，你应该将CSS保留在头部。将其移到底部会引起更大的问题（未经样式修饰的内容，如图像等css引用的资源会更晚加载等）。

PageSpeed试图告诉您的是一种（我认为非常前卫的）方法，即提供显示“above-the-fold”内容所需的所有CSS，并异步/稍后传递其余内容，以确保网站的第一个正确视图尽快出现。由于这个CSS文件只有22kB，我认为将其分成两个不同的文件并采取行动不值得，特别是因为这会导致额外的http请求或要求您内联css（可能会变得复杂和容易出错）。

- MattDiMu

Answer 2

如果您有一个Node.js环境，您可以使用critical来创建关键CSS。

然后您可以在脚本中创建以下内容：

var styleSheetLink = document.createElement('link')
styleSheetLink.rel = 'stylesheet'
styleSheetLink.href = 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css'
styleSheetLink.type = 'text/css'
var godefer = document.getElementsByTagName('link')[0]
godefer.parentNode.insertBefore(styleSheetLink, godefer)

在底部，这将推迟加载其余CSS。

- Archimedes Trajano