Во-первых, какой бы метод вы ни нашли, это не очень хорошая идея.Что если JavaScript отключен в браузере ваших посетителей?Они увидят страницу без стилей.
Мне кажется удивительным, что Google порекомендовал бы это (я полагаю, это очень старая статья, которую вы нашли) ??? см. «БОНУС» ниже, чтобы узнать, как лучше отложить CSS
В любом случае ресурсы блокирования рендеринга - это ресурсы, необходимые для рисования содержимого «выше сгиба».(все, что вы можете видеть без прокрутки при первой загрузке страницы.)
Причина, по которой ваш сайт не работает, заключается в том, что вам все еще нужно загрузить эти ресурсы для отображения исходного контента (если что-то, что вы сделали, замедлитсяя боюсь!).
Обойти это сложно, так как вам нужно встроить CSS в теги стиля в теле документа для каждого элемента над сгибом.
Таким образом, страница может быть отображена без необходимости ждать каких-либо внешних CSS-файлов для загрузки. -> это то, что означает «ресурсы блокирования рендеринга» для
Есть плагиныкоторые должны быть в состоянии сделать это, по моему опыту, ни одна из них не работает, хотя это сложная проблема, которую нужно решить.
Единственный способ сделать это - либо самостоятельно разработать тему, помня об этом.(немного поздно)можно использовать Node), загрузить страницу и без прокрутки найти все используемые CSS.
Затем добавить каждый элемент используемого CSS в блок <style> в основной части страницы, затем удалить все стилииспользуется из вашего внешнего CSS (чтобы сохранить дублирование, этот шаг на самом деле не является необходимым для решения этой проблемы).
Как вы скоро обнаружите, это кошмар для обратного инженера, но с небольшим терпением это возможно.
Пример
См. Исходный код klu.io (это мой сайт для прозрачности), чтобы увидеть, как это делается, вы будетесм. 2 <style> блоков в верхней части страницы, каждый элемент должен отображаться «выше сгиба».(есть 2 блока, так как один для всего сайта и один для конкретной страницы)
Ясность над надписью на моем сайте, приведенная в качестве примера
Вклмой сайт «выше сгиба» - это фактический видимый контент, когда страница загружается, поскольку домашняя страница не прокручивается при первой загрузке.
Если вы нажмете кнопку «Посмотрим, что мы можем сделать для вас», вы увидитесправа загружается контент, который не виден, поэтому стили для него находятся в main.css.
БОНУС
Также о том, какОтложите CSS правильно, чтобы он по-прежнему работал без JS, попробуйте следующее (вам может понадобиться настроить это для нескольких файлов CSS, но это легко, как только вы поймете концепцию): -
<noscript id="ds">
<link rel="stylesheet" href="your-css.css" media="all">
</noscript>
JS
var dfr = function () {
var n1 = document.getElementById("ds");
var r1 = document.createElement("div");
r1.innerHTML = n1.textContent;
document.body.appendChild(r1);
n1.parentElement.removeChild(n1);
};
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
if (raf)
raf(function () {
window.setTimeout(dfr, 0);
});
else
window.addEventListener("load", dfr);
CSS расположен в блоке <noscript> как запасной вариант.
Затем JS перемещает этот CSS в div, он создает вторую секунду, когда страница загрузилась.