Skip to content
Обучение Измерение Блог Case studies О сайте
Содержание
  • Как неиспользуемый CSS-код снижает производительность
  • Как определить неиспользуемый CSS-код
  • Встройте критический CSS-код и отложите некритический CSS-код
  • Рекомендации по стекам
    • Drupal
    • Joomla
    • WordPress
  • Ресурсы

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

May 2, 2019 — Обновлено May 29, 2020
Available in: Español, Português, 中文, English
Appears in: Аудиты производительности
Содержание
  • Как неиспользуемый CSS-код снижает производительность
  • Как определить неиспользуемый CSS-код
  • Встройте критический CSS-код и отложите некритический CSS-код
  • Рекомендации по стекам
    • Drupal
    • Joomla
    • WordPress
  • Ресурсы

В разделе 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-код на вашу страницу.

Ресурсы #

  • Исходный код для проверки Remove unused CSS (Удалите неиспользуемый CSS-код).
Последнее обновление: May 29, 2020 — Улучшить статью
Return to all articles
Поделиться
подписаться

Contribute

  • Сообщить об ошибке
  • Просмотреть исходный код

Дополнительная информация

  • developer.chrome.com
  • Новости Chrome
  • Web Fundamentals
  • Разборы конкретных случаев
  • Подкасты
  • Шоу

Соцсети

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Все продукты
  • Условия и конфиденциальность
  • Правила сообщества

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.