Хорошо... так что я провожу небольшой тест, чтобы попытаться получить 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/
