Минификация 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 . Все эти плагины не требуют кода и позволяют оптимизировать файлы, изображения и многое другое на вашем сайте одним нажатием кнопки.
Инструменты сборки ПО
Если вы используете инструмент сборки для своего проекта, то скорее всего он уже имеет встроенную функцию минификации или интеграцию, которую вы можете использовать для регулярной минимизации файлов. Чтобы узнать больше, изучите документацию вашего инструмента или библиотеку интеграции.
Minify css что это
После статей «Практический CSS/JS: архивируем все!» и «JavaScript: жать или не жать» стало ясно, что проблема уменьшения CSS-файлов в размере действительно актуальна, и общественности хотелось бы аналогичного исследования уже конкретно для такой оптимизации. Которое, собственно, и приведено ниже.
В интернете было найдено 6 различных инструментов для минимизации CSS-кода (однако, с одним из них, перловым модулем, разобраться не удалось, поэтому приведены результаты только для 5), далее ими обрабатывались несколько примеров, которые затем подвергались еще и архивированию. Результаты, опять-таки, представлены в виде графиков, ибо таблицы я нахожу менее информативными.
Инструменты
- CSSMin. Библиотека проводит набор простейших замен в CSS-файле (удаляет ненужные символы) и склеивает его в одну строку.
- Minify. Библиотека, минимизирующая как CSS-, так и JS-файлы. Кроме того, она может слеивать несколько файлов в один, заменять относительные пути к фоновым картинкам на более короткие и самостоятельно отдавать кеширующие заголовки. В общем, не сильно лучше предыдущей.
- YUI. YUI-compressor (использовалась версия 2.2.5). Фактически, делает то же самое, что две предыдущих библиотеки.
- CSS Minifier. Автор разработал собственный алгоритм сжатия (по моему мнению, несколько переработанная версия CSS Tidy), который, по его собственному утверждению, «жмет лучше всех». Ну это мы и проверим.
- CSS Tidy. Проект по минимизации CSS-файлов с открытым исходным кодом. Имеет много настроек, портирован на несколько языков и используется на нескольких ресурсах, которые предлагают инструментарий для минимизации CSS-файлов, например, на www.codebeautifier.com. Наиболее широко распространенная версия минимизатора.
Источники CSS-кода
В качестве исходных файлов брались таблицы стилей с некоторых достаточно сильно посещаемых ресурсов: 1383, 8818, 11052, 11851, 13040, 19744, 29529, 47175, 58892, 67244, 131446. Каждый из них был подвергнут действии минимизатора (для Minifier’а дополнительно файл склеивался в одну строку, вероятно, это временный баг текущей версии), затем архивировался. Корректность минимизации не проверялась (с этим в некоторых особо агрессивных случаях могут быть проблемы: CSS Tidy с определенными настройками перегруппировывает селекторы, и часть логики теряется).
Какие-либо закономерности степени сжатия файлов от их параметров обнаружить не удалось.
Результаты
Что изображено на графиках? Выведен выигрыш (в процентах) относительно несжатого файла (по оси ординат отложены проценты). По оси абсцисс отложены размеры исходных файлов. Внимание: файлы не расположены по размеру. Данные упорядочены по общей степени сжатия.
Вначале по каждому инструменту отдельный график: выведены показатели для простой минимизации файлов, также для минимизации с последующим архивированием. Серым пунктиром показана степень сжатия (в процентах) файла при помощи простого gzip’а.
CSSMin:
Minify:
YUI-compressor:
Minifier 0.5:
CSS Tidy 1.3:
Далее все инструменты на одном графике (без архивирования). Действительно, заметен явный выигрыш Minifier’а.
При архивировании, однако, все минимизаторы ведут себя примерно одинаково.
Для уточнения картины при архивировании минимизированного файла я отдельно выделил их преимущество относительно обычного архивирования.
Тут уже видно лучше, что CSS Tidy ведет себя, в целом, лучше остальных скриптов (хотя, за исключением редких случаев, выигрыш не превосходит 6% относительно обычного архивирования).
Выводы
Во-первых, gzip и так показывает хорошее сжатие (до 81%), поэтому в большинстве случаев можно пользоваться только им.
Во-вторых, простая «подчистка мусора» (удаление всех символов, которые можно безболезненно убрать по спецификации CSS) вместе с архивированием дает весьма неплохой результат (общее сжатие до 83%) относительно других инструментов, но при этом не теряется логика селекторов (т.е. такое сжатие абсолютно безопасно).
В-третьих, замечен локальный выброс при файле небольшого размера. Он связан с тем, что GZIP изначально его плохо сжал (вероятно, из-за маленькой исходной библиотеки слов), поэтому все минимизаторы показали себя на высоте. Однако, файлы такого размера (порядка 1Кб) стоит либо объединять с другими файлами, ибо тратить время на дополнительный запрос на сервер из-за такой мелочи не очень рационально, либо включить в сам HTML-файл. Так что данный выброс я не считаю серьезным основанием действительно использовать какой-либо минимизатор только из-за выигрыша в 3–4% от размера исходного файла.
В-четвертых, повторяется ситуация со сжатием JS-файлов, когда библиотека, жмущая лучше всего, проигрывает более умеренной сопернице при дополнительном архивировании результата. Только в данном случае это Minifier и CSS Tidy.
Все полученные файлы можно также скачать единым архивом здесь (всего 12х12 = 144 файла).
В качестве послесловия
В общем, если вы не хотите дополнительно морочить голову, то можно просто архивировать CSS-файлы (в среднем, выигрыш 79%) либо проводить простую «подчистку мусора» перед архивированием (в среднем, выигрыш 82%). Для тех, кто заботится о байтам, могу порекомендовать изучить действие CSS Tidy и Minifier’а (их прелесть заключается в алгоритме перегруппировки селекторов) и использовать их либо разработать собственное приложение.
Читать дальше
- CSS Sprites: все, что вы знали, но боялись спросить
- Практический CSS/JS: архивируем все!
- Разгоняем CSS-селекторы: стоит ли?
- Практический CSS/JS: уменьшаем время загрузки страницы
- Практический JS: оптимизируем CSS expressions
- Оптимизируем CSS-производительность
- Выносим CSS в пост-загрузку
Что такое минификация кода
Минификация или минимизация кода (англ. minification) — это сокращение его размера за счёт удаления лишних символов. Минимизация позволяет уменьшить объём файла без потери функциональности и ускорить его загрузку.
В основном минимизации подвергают JavaScript и CSS.
Как это работает
Стандартный код с читаемыми именами переменных, пробелами и переносами отлично понятен человеку. Компьютером он воспринимается тяжело и медленно, ведь каждый символ занимает место в памяти. Чем больше вес, тем медленнее компьютер будет загружать материал.
В процессе сокращения кода:
- удаляются лишние строки, переносы, запятые, пробелы и комментарии;
- сокращаются имена переменных до одного символа;
- упрощаются названия цветов и других сущностей.
Важно понимать, что за упрощением не следует компрессия и изменение формата. Происходит только редактирование.
Для чего это нужно
Если рассматривать минификацию в рамках создания электронных писем, тот оно позволяет ускорить загрузку письма, сократить расход трафика и уложиться в лимит веса файла на различных почтовых площадках. Теперь расскажем подробнее о каждом пункте.
Ускорение загрузки
Когда пользователь откроет имейл, он сразу увидит его полное содержание — ему не придется ждать, пока сообщение прогрузится и изображение, наконец, появится на экране телефона или компьютера. Это помогает компаниям избежать отписок и повысить открываемость рассылки.
Сокращение расхода трафика
Из‑за снижения веса рассылки у пользователей уменьшается расход трафика на обработку её данных.
Лимиты почтовых клиентов
Бывает, что человек открывает имейл и не может дочитать его до конца. Вместо полного сообщения у него появляется надпись «Письмо показано не полностью» и ссылка на полный текст. Чтобы этого не случалось, файл необходимо уместить в 100-102 килобайта. Сделать это можно с помощью специального сервиса для минификации — он позволяет сэкономить до 20% килобайт.
Пример минимизации
Так выглядит код до минификации
А так он выглядит уже после того, как его сократили
Код стал нечитаемым для человека, но идеальным для восприятия различными устройствами. Надо отметить, что такой формат нужен не чтобы потом редактировать информацию. Как только код загружается на сервер, с ним больше не работают. Поэтому, если нужно изменить данные, их снова пишут в версии разработчиков, а потом заново сокращают.
Как это реализовано в редакторе Letteros
При работе в Letteros не нужно переходить на отдельные сервисы, чтобы уменьшить вес файла.
- Пользователь собирает имейл‑письмо в конструкторе, и может изменять любой блок сообщения в режиме редактора.
2. При экспорте email-сообщения код минифицируется по умолчанию. Но при желании эту настройку можно убрать одним нажатием кнопки.
Также в Letteros есть инструмент для сжатия изображений — картинки в имейле будут намного меньше весить и гораздо быстрее загружаться.
Какие выводы
Для корректного и быстрого отображения писем на устройствах пользователей необходимо соблюдать допустимый лимит веса имейла. Чтобы уложиться в нужный объём, можно минифицировать код. Удаление лишних символов и сокращение возможных сущностей уменьшает размер письма, за счёт чего улучшается его загрузка на почтовых клиентах.
При разработке шаблона в Letteros убираются теги и стили, от которых можно отказаться. Это автоматически уменьшает размер будущих электронных писем. Также в редакторе есть возможность тестировать отображение писем на всех популярных почтовых клиентах и 100+ устройствах, чтобы быть уверенным в корректности рассылки.
Бесплатно оценить функционал Letteros можно с помощью демоверсии редактора.
Минификатор JS & CSS
Сделайте свой сайт меньше и быстрее, минифицировав коды JS и CSS!
Мы оцениваем продавцов по результатам тщательного тестирования и изучения, а также учитываем ваши отзывы и наши коммерческие соглашения с провайдерами. На данной странице содержатся партнёрские ссылки.Раскрытие информации о рекламе
Популярные вопросы
Что делает Минификатор JS и CSS?
Минификатор JS и CSS – это онлайн-компрессор JavaScript/CSS, который позволяет сжимать и минимизировать все ваши файлы JS/CSS до 80% от их первоначального размера. Скопируйте и вставьте код, или же вы можете загрузить несколько файлов сразу, а затем сжать их. Мы используем UglifyJS 3 и babili-standalone для всех сокращений и сжатий JavaScript. Этот минификатор удаляет пробелы, убирает комментарии, объединяет файлы и оптимизирует/сокращает ряд общих программных шаблонов. И он идет с огромным набором тестов.
Почему вам стоит сжимать JS/CSS?
Время загрузки страницы является важным аспектом UX вашего сайта. Некоторые конструкторы жертвуют скоростью страницы, чтобы разместить дизайн, контент и большую функциональность. Но посетителям скорость загрузки важна – если страница загружается слишком медленно, они могут не дожидаться ее отображения. Сжав ваш сайт, вы «минимизируете» скрипт на 20%, что приведет к более быстрой скорости загрузки, уменьшению пропускной способности и меньшему количеству HTTP-запросов.
Как это работает?
Это просто! Скопируйте и вставьте код в поле для ввода в левой части экрана, или же вы можете перетащить весь файл в выделенную область. Подтвердите, является ли это JavaScript или CSS, а затем нажмите кнопку «Уменьшить». В одно мгновение вы получите уменьшенный, сжатый код. Вы также можете нажать кнопку «Дополнительные параметры», если вам необходимо настроить дополнительные параметры. А ещё он бесплатный и без скрытых платежей.
Будет ли мой код читаться после использования инструмента?
Мало того, что ваш код будет по-прежнему читабельным, вы обнаружите, что он загружается быстрее, сокращая скорость загрузки страницы, что обеспечивает положительный пользовательский опыт.
Мы оцениваем продавцов по результатам тщательного тестирования и изучения, а также учитываем ваши отзывы и наши коммерческие соглашения с провайдерами. На данной странице содержатся партнёрские ссылки.Раскрытие информации о рекламе