Минификация CSS или как ускорить ваш сайт. Часть 2

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

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

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

Зачем минимизировать CSS

Минификация CSS поможет увеличить вероятность отказа на 32% — с 1 секунды до 3 секунд на загрузку. Быстро загружаемые страницы также могут улучшить пользовательский опыт для мобильных пользователей. 

По состоянию на июнь 2022 года более 61% трафика веб-сайтов приходится на мобильные устройства. Время загрузки страницы также влияет на ваш рейтинг в поисковых системах. 

Различие между сжатием и минификацией CSS

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

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

Как минимизировать CSS

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

• Онлайн-инструменты минификации

Независимо от того, хотите ли вы минимизировать CSS, HTML или JavaScript, вы можете использовать специальные ресурсы для минификации. Самые популярные варианты — это минимизатор CSS и минимизатор Dan’s Tools.

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

Источник изображения

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

• Инструменты командной строки

Если вам удобно работать с интерфейсом командной строки, вы можете использовать command-line minifer. Инструмент командной строки работает аналогично онлайн-инструментам, главное отличие в том, что он работает локально и не требует подключения к интернету. 

Один из вариантов — использовать пакет npm для минимизации CSS. Если на вашем компьютере уже установлен npm, вы можете загрузить пакет css-minify с помощью команды:

npm install css-minify -g

Затем вы можете минимизировать файл с помощью команды, где имя — это ваш файл, который оканчивается расширением .css:

css-minify —file filename

Вы также можете уменьшить все файлы CSS внутри каталога с помощью команды, где sourcedir — это имя каталога. Все мини-файлы CSS по умолчанию хранятся в каталоге с именем css-dist:

css-minify -d sourcedir

Вы можете указать другой каталог назначения с помощью команды:

css-minify -d sourcedir -o distdir

В качестве альтернативы вы можете попробовать пакет minify, который работает на нескольких языках — HTML, CSS и JavaScript.

• CDN

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

Преимущество метода CDN заключается в том, что это самый простой способ минификации. Этот процесс не повлияет на ваши исходные файлы, которые хранятся на исходных серверах. 

• Плагины WordPress

Некоторые плагины оптимизации помогут минимизировать ваш код. Вы можете использовать следующие плагины: W3 Total Cache, Hummingbird и Autoptimize. Все эти плагины не требуют кода и позволяют оптимизировать файлы, изображения и многое другое на вашем сайте одним нажатием кнопки. 

• Инструменты сборки ПО

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

^{Источник: hubspot.com}