Устранить CSS-блокировку рендеринга, лучший способ

Question

Я хочу снять блокировку рендеринга с моего сайта, но не могу. Я не использую внешние CSS-файлы или шрифты, только большой CSS-файл. Когда я копирую все содержимое из css файла в заголовок AllcontentCSS, блокировка рендеринга исчезает из Google Page Insights. Есть ли способ устранить блокировку рендеринга и включить вместо этого файл css со ссылкой в ​​заголовок, чтобы скопировать все css в теге style, или целесообразно вставить css в теле тега?

Answer 1

Скорее всего, вы ищете:

<link rel="stylesheet" href="yourFile.css" media="none" onload="if(media!='all')media='all'">

Но прежде чем продолжить, ознакомьтесь со следующими ресурсами, подробно описывающими методику и ее ограничения:

• Первоначальная статья Кит Кларк
• продолжение Тейлор Хант.

Не забудьте также перейти по ссылкам, предоставленным Тейлор Хант. Вы, вероятно, хотите использовать функцию loadCSS /polyfill из Filament Group.

Но знайте, что эта техника вызовет FOUC на вашей странице. Вы должны разделить ваш CSS на две части:

• Основы компоновки (загрузка обычно - блокировка рендера),
• асинхронные стили (асинхронная загрузка).