Минимизировать CSS

В разделе «Возможности» вашего отчета Lighthouse перечислены все неминифицированные файлы CSS, а также потенциальная экономия в кибибайтах (КиБ) при минимизации этих файлов:

Скриншот аудита CSS Lighthouse Minify

Как минимизация CSS-файлов может повысить производительность

Минимизация файлов CSS может улучшить производительность загрузки страницы. Файлы CSS часто больше, чем нужно. Например:

/* Header background should match brand colors. */
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

Можно сократить до:

h1,
h2 {
  background-color: #000000;
}

С точки зрения браузера эти два примера кода функционально эквивалентны, но второй пример использует меньше байтов. Минификаторы могут еще больше повысить эффективность использования байтов за счет удаления пробелов:

h1,
h2 {
  background-color: #000000;
}

Некоторые минификаторы используют хитрые приемы для минимизации байтов. Например, значение цвета #000000 можно дополнительно уменьшить до #000 , что является его сокращенным эквивалентом.

Lighthouse предоставляет оценку потенциальной экономии на основе комментариев и пробельных символов, которые он находит в вашем CSS. Это консервативная оценка. Как упоминалось ранее, минификаторы могут выполнять умную оптимизацию (например, уменьшать #000000 до #000 ) для дальнейшего уменьшения размера файла. Таким образом, если вы используете минификатор, вы можете увидеть большую экономию, чем сообщает Lighthouse.

Используйте минификатор CSS для минимизации вашего CSS-кода.

Для небольших сайтов, которые вы не часто обновляете, вы, вероятно, можете использовать онлайн-сервис для ручного минимизации файлов. Вы вставляете свой CSS в пользовательский интерфейс службы, и он возвращает уменьшенную версию кода.

Профессиональные разработчики, вероятно, захотят настроить автоматизированный рабочий процесс, который автоматически минимизирует CSS перед развертыванием обновленного кода. Обычно это достигается с помощью инструмента сборки, такого как Gulp или Webpack.

Узнайте, как минимизировать ваш CSS-код в Minify CSS .

Рекомендации для конкретного стека

Друпал

Включите объединение файлов CSS в разделе «Администрирование» > «Конфигурация» > «Разработка» . Вы также можете настроить более продвинутые параметры агрегации с помощью дополнительных модулей , чтобы ускорить работу вашего сайта за счет объединения, минимизации и сжатия стилей CSS.

Джумла

Ряд расширений Joomla могут ускорить работу вашего сайта за счет объединения, минимизации и сжатия стилей CSS. Существуют также шаблоны, обеспечивающие эту функциональность.

Магенто

Включите опцию «Минимизировать файлы CSS» в настройках разработчика вашего магазина.

Реагировать

Если ваша система сборки автоматически минимизирует файлы CSS, убедитесь, что вы развертываете производственную сборку вашего приложения. Вы можете проверить это с помощью расширения React Developer Tools.

WordPress

Ряд плагинов WordPress могут ускорить работу вашего сайта за счет объединения, минимизации и сжатия стилей. Вы также можете использовать процесс сборки для предварительной минификации, если это возможно.

Ресурсы