Google Page Speed - CSS Above The Fold - Bootstrap模板插件

Question

Google告诉我应该把我的PageSpeed放在折叠的下面。

但是，我使用Bootstrap作为模板插件。

现在，我可以在我的主页上以内联方式打印bootstrap.min.css，但我真的不想这样做，因为这对整体网站体验来说效率很低。

我也可以使用async或defer修饰符，但是bootstrap对于页面模板的加载是必不可少的，它会在排序之前以一种损坏的方式加载。

加载一次CSS文件，并将其缓存到用户的浏览器中，这样他们就不必在每次访问页面时都加载大型插件，这更有意义。

这似乎是一个真正的利益冲突：

谷歌希望初始页面的加载速度与possible....but一样快，这是一个持续的网站会话内联样式信息的糟糕做法。

对于这个问题，有没有什么解决方案可以让我的bootstrap站点正常加载，同时让我的页面速度得到提升？

Answer 1

试试这个，看看google页面的速度是否提高了：

<script>
var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);
</script>