Что такое Eliminate render-blocking CSS и как это исправить?

admin

08.03.2020 15:16

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 и обеспечиваете более эффективную работу сайта для новых посетителей.

Этот текст был написан несколько лет назад. С тех пор упомянутые здесь инструменты и софт могли получить обновления. Пожалуйста, проверяйте их актуальность.