谷歌的PageSpeed - 渲染阻挡内容

Question

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

我还有一件事要做，那就是将CSS从头开始（作为它的呈现阻止内容），允许加载内容，然后使用JavaScript来拉入CSS。如果我没有加载在所有的CSS，我得到100/100的PageSpeed。我把所有关键的CSS都放在了头上。

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

所以，我使用谷歌的建议加载CSS的方法在内容加载后（see here） -

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

现在，当我运行的PageSpeed见解，我直接回具有移动的85/100因为我screen.css是呈现明显阻止页面速度...

怎么会这样呢？我正在使用Google推荐的解决方案！

这是我建立的网站 - https://redwing.media/

Answer 1

CSS是始终呈现阻塞的话，你已经做得很好，你加载它可能是最好的方法外部CSS文件。

你可以改进你的pagespeed的唯一方法是在你的html头部内嵌你的css文件内容，这样做，你会节省一些时间来保存浏览器来搜索外部文件，但是这将是一个小小的改进。