防止渲染阻塞 CSS

Question

我有一个从 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 资源。这会导致页面呈现延迟。 None 页面上的首屏内容无需等待以下资源加载即可呈现。尝试延迟或异步加载阻塞资源，或直接在 HTML 中内联这些资源的关键部分。优化 CSS 交付以下内容：

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

我觉得这是一个先有鸡还是先有蛋的问题。如果我将此样式表引用移动到我的 body 元素的底部，当我访问该页面时，该页面会从无样式跳转到有样式。作为一个人，这很刺耳。然而，当我这样做时，我的 PageSpeed 分数显着提高。

是否有任何替代方法？我一直认为使用 CDN 是一件好事，因为它使您能够利用一些缓存功能。不过，这个惩罚好像挺大的。

Answer 1

别担心，这不是什么大问题，您一定要牢记 CSS。将它移到底部会导致更大的问题（无样式的内容，css 中的引用资源，例如图像加载得更晚，等等）

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

Answer 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 的其余部分的加载。

防止渲染阻塞 CSS

Prevent Render Blocking CSS

html

css

pagespeed