Question

好的......所以我正在尝试从Google 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显然阻止渲染......

这是怎么回事？我正在使用谷歌推荐的解决方案！

这是我正在制作的网站 - https://redwing.media/

Answer 1

Css总是渲染阻塞所以，你做得很好，你正在用尽可能最好的方法加载外部css文件。

你可以改善你的网页速度的唯一方法是在你的html头部内联你的css文件内容，这样做，你将节省一点时间来保存浏览器以搜索外部文件，但是将是一个小小的改进。

Google PageSpeed - 呈现屏蔽内容

1 个答案: