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资源。这会导致呈现页面的延迟。在不等待加载以下资源的情况下，无法呈现页面上的上述内容。尝试推迟或异步加载阻止资源，或直接在HTML中内联这些资源的关键部分。优化以下内容的CSS交付：

https://maxcdn.bootstrapcdn.com/ ...阱/ 4.0.0-alpha.2 / CSS / bootstrap.min.css

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

有没有其他方法？我一直认为使用CDN是一件好事，因为它使您能够利用一些缓存功能。但是，这种惩罚似乎非常重要。

Answer 1

不用担心，这不是一个大问题，你一定要把你的CSS放在首位。将它移到底部将导致更大的问题（无格式内容，css中引用的资源，如图像加载甚至更晚等）。

PageSpeed试图告诉你的是，（imho非常进步）的方法是提供显示所需的所有CSS＆＃34;首屏＆＃34; - 内容（在开始向下滚动网站之前看到的所有内容）并提供其余的异步/稍后以确保网站上的第一个正确视图是尽快的。因为这个CSS文件只是＆＃34;只有＆＃34; 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

2 个答案: