Чем быстрее сервер даст отклик, тем быстрее пользователь получит доступ к контенту на сайте. Соответственно необходимо создать все условия, чтобы это произошло как можно скорее. Одной из опций, позволяющей это сделать, является уменьшение размера кода CSS.
Не стоит путать минификацию CSS и его сжатие. В первом случае удаляются комментарии, пробелы, разрывы строк и отсутствуют разделители блоков. Непосредственно на сам файл она не влияет, зато ускоряет его загрузку. Во втором, требуется применение специальных алгоритмов, среди которых brotli либо GZIP. И прежде чем файлы будут отправлены клиенту, они сжимаются. Это значит, что запрос будет выполнен именно к такой версии и пользователь его распакует перед прочтением. В процессе происходит взаимодействие браузера и сервера. Если браузером выбранный алгоритм не поддерживается, то юзер получит информацию в её первозданном виде, без дополнительной обработки.
Что такое CSS простыми словами
Заходя на сайт пользователь видит на нём контент, который расположен в определённом порядке. Это и текст, и таблицы, и изображения. На странице они находятся не хаотично, а занимают свои ниши и имеют свою последовательность. То, что человек воспринимает как данность, на самом деле является чётко выстроенной каскадной таблицей.
Всё это и есть код CSS. Местом его хранения является файл «stile.css» в котором расположено огромное количество данных. Все они ответственны за воспроизведение страницы и её внешний вид.
Сканируя сайт посредством PageSpeed Insights, зачастую можно получить рекомендацию сократить код CSS. Это имеет свою причину. Некоторые строки или сегменты кода не используются для передачи данных, следовательно не несут смысловой нагрузки. При этом, в таблице CSS они хранятся. И чем таковых элементов больше, тем дольше сервер будет «думать» загружая страницу. Если его «мыслительный процесс» занимает слишком много времени, то и пользователи не будут ждать, и ранжирование сайта понизится.
Как минификация выглядит на примере
Чтобы знать как сделать, необходимо для начала прояснить, что именно необходимо сделать. Для этого необходимо сравнить CSS коды, которые несут в себе одну и ту же информацию. В таком формате он будет до минификации:
1. .entry-content p {
2. font-size: 14px !important;
3. }
4. entry-content ul li {
5. font-size: 14px !important;
6. }
7. .product_item p a {
8. color: #000;
9. padding: 10px 0px 0px 0;
10. margin-bottom: 5px;
11. border-bottom: none;
12. }
А такой вид CSS код приобретёт после того, как будет уменьшен:
1. .entry-content p,.entry-content ul li{font-size:14px!important}.product_item p a{color:#000;padding:10px 0 0;margin-bottom:5px;border-bottom:none}
Нет лишних пустых строк и пробелов. Код стал короче и на его чтение, а также воспроизводство браузеру потребуется гораздо меньше времени. Таким образом пользователь получит доступ к контенту значительно быстрее, что потянет за собой улучшенный показатель конверсии.
Как сократить CSS код
После того, как основная работа над сайтом закончена, можно переходить к сжатию таблицы CSS. Почему это делается после? Написав код изначально в минимизированном формате, обращаться с ним и редактировать его будет не удобно. Следовательно, для начала сделайте сайт таким, каким его будет видеть пользователь и уже после этого приступайте к оптимизации.
Одним из простых и быстрых способов является использование специализированных инструментов. Одним из таковых является CssCompressor. Для работы с ним необходимо просто вставить файл «style.css» в специальное поле и выбрать ту степень сжатия, которая вам необходима.
Если выбрана степень сжатия Highest, то вместо большой таблицы код будет трансформирован в одну строчку. Такую информацию сервер прочтёт значительно быстрее и отобразит страницу в нужном виде. Единственная проблем может состоять в том, что при необходимости редакта, отыскать именно тот элемент будет достаточно проблематично.
CssCompressor оставит разделение между классами, при этом удалит все ненужные пробелы, строки и прочие элементы, которые не несут смысловой нагрузки. Таким образом, код можно сократить в полтора или даже два раза. Вся информация на странице останется неизменной.
Существуют и другие инструменты, позволяющие провести минимизацию. Среди таковых:
Последние две являются инструментами разработки.
Оптимизация CSS доступна и другими способами, но для этого необходимо досконально знать технические особенности. Если будет допущен минимальная ошибка — придётся всё начинать с нуля. К примеру, для минимизации можно объединить в одну группу классы, которые имеют одинаковые свойства. Данные настройки проводятся вручную.
Можно использовать и хитрые трюки, чтобы минимизировать байты. Например, значение цвета #000000может быть дополнительно уменьшено до #000, что является его сокращенным эквивалентом.
Если вы не уверены в своих силах, то прежде чем приступать к оптимизации кода, скопируйте имеющиеся у вас исходные данные и сохраните их в отдельном документе на своём компьютере. Если что то пойдёт не так, вы всегда сможете их восстановить.
Общие рекомендации по оптимизации кода CSS
Если у вас есть возможность, всегда отдавайте предпочтение минимизатору CSS, чтобы провести оптимизацию кода.
● Для небольших сайтов, которые вы не часто обновляете, вполне подойдёт онлайн-сервис для минимизации файлов вручную. Вы вставляете свой CSS в пользовательский интерфейс сервиса, и он возвращает уменьшенную версию кода.
● Профессиональным разработчикам потребуется автоматизация процесса. Чтобы минимизировать CSS в автоматическом режиме перед развертыванием обновленного кода, подойдут инструменты сборки Gulp либо Webpack.
Lighthouse предоставляет оценку потенциальной экономии на основе комментариев и пробелов, которые он находит в CSS. Это консервативная оценка. Если использовать дополнительные параметры оптимизации, можно уменьшить код ещё больше.
