Удалите неиспользуемый CSS-код

Published on Updated on

Translated to: English, Español, Português, 中文

В разделе Opportunities (Возможности) отчета Lighthouse перечислены все таблицы стилей с неиспользуемым CSS-кодом с потенциальной экономией 2 КиБ или более. Удалите неиспользуемый CSS-код, чтобы уменьшить количество ненужных байтов, потребляемых сетевой активностью:

Скриншот проверки Remove unused CSS (Удалите неиспользуемый CSS-код) в Lighthouse

Как неиспользуемый 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».

Chrome DevTools: вкладка Coverage
Chrome DevTools: вкладка 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-код на вашу страницу.

Ресурсы

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.