Google PageSpeed - 呈现阻塞内容

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>

因此，我使用 Google 建议的方法在内容加载后加载 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 文件。

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

Google PageSpeed - 呈现阻塞内容

Google PageSpeed - render blocking content

css

asynchronous

google-pagespeed

render-blocking