防止渲染阻塞 CSS答案

【问题标题】：Prevent Render Blocking CSS防止渲染阻塞 CSS
【发布时间】：2016-10-26 07:44:10
【问题描述】：

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

<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 是一件好事，因为它使您能够利用一些缓存功能。但是，这个惩罚似乎相当严重。

【问题讨论】：

标签： html css pagespeed

【解决方案1】：

不用担心，这不是什么大问题，您绝对应该牢记 CSS。将其移至底部会导致更大的问题（无样式的内容、css 中引用的资源（如图像）甚至更晚才加载等）

PageSpeed 试图告诉您的是一种（恕我直言，非常进步）方法，它提供显示“首屏”内容（您在开始向下滚动网站之前看到的所有内容）所需的所有 CSS 并提供其余内容async/later 以确保网站上的第一个正确视图尽快。由于这个 CSS 文件“只有”22kB，我不认为，采取措施将其分成 2 个不同的文件是值得付出努力的，特别是因为这会导致额外的 http-request 或需要您内联 css（其中可能会变得复杂且容易出错）

【讨论】：

【解决方案2】：

如果你有 nodejs 环境，你可以使用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 的其余部分。

【讨论】：