Удалите неиспользуемый CSS-код
Published on • Updated on
В разделе Opportunities (Возможности) отчета Lighthouse перечислены все таблицы стилей с неиспользуемым CSS-кодом с потенциальной экономией 2 КиБ или более. Удалите неиспользуемый CSS-код, чтобы уменьшить количество ненужных байтов, потребляемых сетевой активностью:
Как неиспользуемый CSS-код снижает производительность
Использование тега <link> — распространенный способ добавления стилей на страницу:
<!doctype html>
<html>
<head>
<link href="main.css" rel="stylesheet">
...Файл main.css, загружаемый браузером, называется внешней таблицей стилей, поскольку хранится отдельно от HTML-кода, который его использует.
По умолчанию браузер должен загрузить, провести синтаксический анализ и обработать все внешние таблицы стилей, с которыми он сталкивается, прежде чем вывести на экран пользователя любой контент. Браузер не будет пытаться отобразить контент до обработки таблиц стилей, поскольку в них могут содержаться правила, влияющие на стиль страницы.
Каждая внешняя таблица стилей должна быть загружена из сети. Эти дополнительные обращения к сети могут увеличить время ожидания контента.
Неиспользуемый CSS-код также замедляет построение браузером дерева рендеринга. Дерево рендеринга похоже на дерево DOM, за исключением того, что оно также включает стили для каждого узла. Чтобы построить дерево рендеринга, браузер должен пройти по всему дереву DOM и проверить, какие правила CSS применяются к каждому узлу. Чем больше неиспользуемого CSS-кода, тем больше времени браузер может потратить на вычисление стилей для каждого узла.
Как определить неиспользуемый CSS-код
Вкладка Coverage в Chrome DevTools поможет обнаружить критический и некритический CSS-код. См. раздел «Просмотр используемого и неиспользуемого CSS-кода на вкладке Coverage».
Вы также можете извлечь эту информацию из Puppeteer. См. Page.coverage .
Встройте критический CSS-код и отложите некритический CSS-код
Используйте процедуру, аналогичную встраиванию кода в тег <script>. Встройте критические стили, необходимые для первой отрисовки контента, в блок <style> тега head HTML-страницы. Затем загрузите остальные стили асинхронно, задав для атрибута rel тега link значение preload.
Подумайте об автоматизации процесса извлечения и встраивания CSS-кода верхней половины полосы с помощью инструмента Critical.
Дополнительные сведения см. в статье «Отложите некритичный CSS-код».
Рекомендации по стекам
Drupal
Подумайте об удалении неиспользуемых правил CSS и прикрепите только необходимые библиотеки Drupal к соответствующей странице или компоненту на странице. Более подробно см. в разделе «Определение библиотеки».
Joomla
Подумайте о том, чтобы сократить количество (удалить или отключить) расширений Joomla, загружающих неиспользуемый CSS-код на вашу страницу.
WordPress
Подумайте о том, чтобы сократить количество (удалить или отключить) плагинов WordPress, загружающих неиспользуемый CSS-код на вашу страницу.
Ресурсы
Updated on • Improve article