防止渲染阻塞CSS

我有一个引用CDN Bootstrap 4的网页。在我的HTML页面的head，我有以下几点：防止渲染阻塞CSS

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

来源

2016-06-23 user70192

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

PageSpeed试图告诉你，是一种（imho非常进步）的服务方式所有CSS都需要显示“折叠式”内容（在开始向下滚动网站之前看到的所有内容），并将其余内容异步/后续传递，以确保网站上第一个正确的视图已尽快完成。由于这个CSS文件是“仅”22kB，我不认为，采取行动将它分成两个不同的文件是值得的，尤其是因为这会导致额外的http请求或要求您内联css（其中可能会变得复杂且容易出错）

来源

2016-06-23 20:00:29 MattDiMu

如果您有nodejs环境，则可以使用critical来创建关键CSS。在这将推迟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)

：

然后你就可以在你的脚本创建以下。

来源

2016-12-30 04:15:26

防止渲染阻塞CSS

回答

相关问题