Google PageSpeed-渲染阻止内容

Chris 发表于 Dev

克里斯

好的...所以我正在运行一些测试，以尝试从Google PageSpeed获得100/100。我们有以下网站-https://redwing.media

我还有一件事要做，那就是将CSS移出头部（作为其渲染阻止内容），允许内容加载，然后使用JavaScript插入CSS。如果我根本不加载CSS，我将获得100/100 PageSpeed。我把所有关键的CSS放在了首位。

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

因此，我使用Google建议的在内容加载后加载CSS的方法（请参阅此处）-

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

乔迪·弗洛雷斯（Jordi Flores）

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

改善页面速度的唯一方法是将html文件中的css文件内容内联，这样做，您将节省一些时间，节省了浏览器来搜索外部文件的时间，但这将是小改进。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。