Minify css - это метод повышения производительности сайта.

Первоначально опубликовано на https://web.dev.

Исходная статья: https://web.dev/minify-css/

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

Взгляните на следующий блок CSS:

Этот контент легко читать за счет создания файла большего размера, чем необходимо:

  • Он использует пробелы для отступов и содержит комментарии, которые браузер игнорирует, поэтому их можно удалить.
  • Элементы <h1> и <h2> имеют одинаковые стили: вместо того, чтобы объявлять их по отдельности: «h1 {...} h2 {...}», они могут быть выражены как «h1, h2{...}».
  • Цвет фона, #000000 можно выразить просто как #000.

После внесения этих изменений вы получите более компактную версию тех же стилей:

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

Вы примените минимизацию CSS к сайту, который использовался в других руководствах: Fav Kitties. В этой версии сайта используется классная библиотека CSS: animate.css для анимации различных элементов страницы, когда пользователь голосует за кота 😺.

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

  1. Откройте страницу измерения.
  2. Введите URL: https://fav-kitties-animated.glitch.me и нажмите Выполнить аудит.
  3. Нажмите Просмотреть отчет.
  4. Нажмите Эффективность и перейдите в раздел Возможности.

Полученный отчет показывает, что из файла animate.css можно сохранить до 16 КБ:

Теперь проверьте содержимое CSS:

  1. Откройте Сайт Fav Kitties в Chrome. (Прежде чем серверы Glitch ответят в первый раз, это может занять некоторое время.)
  2. Нажмите Control+Shift+J (или Command+Option+J на Mac), чтобы открыть DevTools.
  3. Перейдите на вкладку Сеть.
  4. Нажмите на фильтр CSS.
  5. Установите флажок Отключить кеш.
  6. Перезагрузите приложение.

Страница запрашивает два файла CSS размером 1,9 КБ и 76,2 КБ соответственно.

  1. Щелкните animate.css.
  2. Щелкните вкладку Ответ, чтобы увидеть содержимое файла.

Обратите внимание, что таблица стилей содержит символы для пробелов и отступов:

Затем вы добавите в процесс сборки несколько подключаемых модулей веб-пакетов, чтобы минимизировать эти файлы.

Примечание. в предыдущем отчете Lighthouse упоминается только animate.css как возможность минификации. Уменьшение style.css также сэкономит несколько байтов, но этого недостаточно, чтобы Lighthouse счел это значительной экономией. Однако минимизация CSS - это общая передовая практика; поэтому имеет смысл минимизировать все ваши файлы CSS.

CSS-минификация с помощью webpack

Прежде чем приступить к оптимизации, найдите время, чтобы понять, как работает процесс сборки для сайта Fav Kitties:

По умолчанию результирующий пакет JS, который создает веб-пакет, будет содержать содержимое встроенных файлов CSS. Поскольку мы хотим поддерживать отдельные файлы CSS, мы используем два дополнительных плагина:

  • Mini-css-extract-plugin извлечет каждую таблицу стилей в отдельный файл в качестве одного из этапов процесса сборки.
  • Webpack-fix-style-only-entries используется для исправления проблемы в wepback 4, чтобы избежать создания дополнительного файла JS для каждого файла CSS, указанного в webpack-config.js.

Теперь вы внесете в проект некоторые изменения:

  1. Откройте проект Fav Kitties в Glitch.
  2. Чтобы просмотреть источник, нажмите Просмотреть источник.
  3. Нажмите Ремикс для редактирования, чтобы сделать проект доступным для редактирования.
  4. Нажмите Инструменты.
  5. Нажмите Журналы.
  6. Нажмите Консоль.

Чтобы минимизировать результирующий CSS, вы воспользуетесь optimize-css-assets-webpack-plugin:

  1. В консоли Glitch запустите npm install --save-dev optimize-css-assets-webpack-plugin.
  2. Запускаем refresh, чтобы изменения синхронизировались с редактором Glitch.

Затем вернитесь в редактор Glitch, откройте файл webpack.config.js и внесите следующие изменения:

Загрузите модуль в начало файла:

Затем передайте экземпляр плагина в массив plugins:

После внесения изменений будет запущена перестройка проекта. Вот как будет выглядеть получившийся webpack.config.js:

Затем вы проверите результат этой оптимизации с помощью инструментов повышения производительности.

Если вы заблудились на каком-либо предыдущем шаге, вы можете нажать здесь, чтобы открыть оптимизированную версию сайта.

Чтобы проверить размер и содержимое файлов:

  1. Нажмите Control+Shift+J (или Command+Option+J на Mac), чтобы открыть DevTools.
  2. Перейдите на вкладку Сеть.
  3. Нажмите на фильтр CSS.
  4. Установите флажок Отключить кеш, если он еще не установлен.
  5. Перезагрузите приложение.

Вы можете проверить эти файлы и убедиться, что новые версии не содержат пробелов. Оба файла намного меньше, в частности, animate.css был уменьшен на ~ 26%, что позволило сэкономить ~ 20 КБ!

В качестве последнего шага:

  1. Откройте страницу измерения.
  2. Введите URL-адрес оптимизированного сайта.
  3. Нажмите Просмотреть отчет.
  4. Нажмите Эффективность и найдите раздел Возможности.

В отчете больше не отображается «Сократить CSS» как «Возможность», и он теперь перемещен в раздел «Пройденные проверки»:

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

Следующие шаги и ресурсы

В этом руководстве мы рассмотрели минификацию CSS с помощью webpack, но тот же подход можно использовать и с другими инструментами сборки, такими как gulp-clean-css для Gulp или grunt-contrib-cssmin для Grunt. .

Минификация также может применяться к другим типам файлов. Ознакомьтесь с Руководством по уменьшению и сжатию сетевых данных, чтобы узнать больше об инструментах для минимизации JS и некоторых дополнительных методах, таких как сжатие.