Google PageSpeed ​​- сделать блокировку контента

Question

Итак, я провожу небольшой тест, чтобы попытаться получить 100/100 от Google PageSpeed. У нас есть следующий сайт - 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/

Answer 1

Css всегда блокирует рендеринг, поэтому вы хорошо поработали, загружая внешний файл css наилучшим из возможных способов.

Единственный способ улучшить скорость страниц - это вставить содержимое файла CSS в заголовок html, сделав это, вы сэкономите немного времени, сэкономив браузеру поиск внешнего файла, но это будет незначительное улучшение