Что такое Eliminate render-blocking CSS и как это исправить?
Render-blocking элементы приостанавливают загрузку страницы до того момента, пока не будет загружен какой-то внешний ресурс. Например, загрузка CSS:
<link rel="stylesheet" href="/styles.css" />
Когда браузер встретит эту инструкцию, он приостановит показ страницы, и будет ждать окончания загрузки файлы styles.css. Все это время посетитель будет видеть белую страницу.
Если человек впервые попадает на Ваш сайта это может быть проблемой. Вместо того, чтобы загрузить и показать HTML, браузер вынужден сделать несколько дополнительных запросов перед тем, как показать посетителю результат.
Убираем Render-blocking CSS
На страницах приземления от внешних стилей лучше избавляться. Вместо них лучше использовать встроенные стили, которые будут содержать только используемые на странице селекторы:
<html>
<head>
<title>[Хд] Как делать быстрые и большие сайты</title>
<link rel="stylesheet" href="/styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body { margin: 0 }
h1 { color: #444; }
* и другие стили используемые на этой странице
</style>
</head>
</body>
...
Страница приземления
...
</body>
</html>
Убираем внешнюю загрузку CSS и используем встроенные стили
CSS Extractor позволит вырезать нужные стили. Для этого достаточно просто указать URL страницы и инструмент покажет набор стилей, которые используются только для нее.
После этого Вы просто вставляете показанные стили в тег style и обеспечиваете более эффективную работу сайта для новых посетителей.
Этот текст был написан несколько лет назад. С тех пор упомянутые здесь инструменты и софт могли получить обновления. Пожалуйста, проверяйте их актуальность.
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: