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 в после загрузки контента (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, делая это, вы будете экономить небольшое количество времени, сохраняя браузер для поиска внешнего файла, но это будет незначительное улучшение.