Css Google PageSpeed-渲染阻止内容

好的。。。所以我正在运行一个小测试，试图从谷歌PageSpeed获得100/100。我们有以下网站-

我还有一件事要做，那就是从头部取出CSS（作为其渲染块内容），允许加载内容，然后使用JavaScript拉入CSS。如果我根本不加载CSS，我会得到100/100的页面速度。我已经把我所有的关键CSS放在了头上

<style>
    BODY { background-color: #1B1719; }
    BODY > * { display: none; }
</style>

正文{背景色：#1B1719；}
正文>*{显示：无；}

因此，我使用谷歌建议的方法，在内容加载（）后加载CSS-

var loadDeferredStyles=函数（）{
var addStylesNode=document.getElementById（“延迟”）；
var替换=document.createElement（“div”）；
replacement.innerHTML=addStylesNode.textContent；
document.body.appendChild（替换）
addStylesNode.parentElement.removeChild（addStylesNode）；
};
var raf=requestAnimationFrame | | mozRequestAnimationFrame||
webkitRequestAnimationFrame | | msRequestAnimationFrame；
if（raf）raf（function（）{window.setTimeout（loadDeferredStyles，0）；}）；
else窗口。addEventListener（'load'，loadDeferredStyles）；

现在，当我运行PageSpeed insight时，我直接返回到移动页面速度为85/100，因为我的screen.css显然是渲染阻塞

这是怎么发生的？我正在使用谷歌推荐的解决方案

---

这是我正在构建的站点-

Css始终是渲染阻塞的，因此，您做得很好，您正在使用可能的最佳方法加载外部Css文件

---

提高页面速度的唯一方法是将css文件内容内联到html的头部，这样做可以节省浏览器搜索外部文件的一点时间，但这只是一个小小的改进。

谢谢Jordi Flores。因此，总而言之，除了内联所有代码之外，我几乎无能为力。这就解决了这个问题——很遗憾谷歌似乎提出了相反的建议！谢谢你的帮助。向上投票并标记为答案：）

<noscript id="deferred">
    <link rel="stylesheet" type="text/css" href="assets/css/screen.css">
</noscript>
<script>
    var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
    };
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
        webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
    else window.addEventListener('load', loadDeferredStyles);
</script>