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

Question

Google PageSpeed Insights 显示我应该将 CSS 放在首屏下方。

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

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

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

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

这里似乎存在真正的利益冲突：

Google 希望尽可能快地加载初始页面....但是对于持续的站点会话来内联样式信息是不好的做法。

是否有任何解决方案可以让我的引导站点正常加载，同时让我的页面速度得分提高？

Answer 1

试试这个，看看谷歌页面速度是否提高：

<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>