Чем сжать CSS? Оптимизация загрузки
Наша компания и разрабатывает сайты, и занимается их продвижением в поиске (seo). И для обоих этих задач нам нужна эффективность работы сайта, которая зависит и от скорости загрузки. Один из критериев ускорения - быстрая загрузка служебных файлов: скриптов (js) и таблиц стилей (css). Какие сервисы для сжатия css online пробовали мы сами?
Как раз сегодня этот вопрос встал снова. Мы решили посмотреть и сравнить используемые варианты. В качестве вводной - сайт клиента, который делали не мы; наша задача продвинуть его в поиске. Соответственно исходников всех скриптов у нас нет, пользуемся только тем, что есть на сервере (к ftp у нас полный доступ, по условиям контракта).
Сканер предлагает обратить внимание на уже минимизированный .css-файл, объемом 33682 байта. Первым делом - что такое "уже минимизированный"? Это значит, что он не такой красивый, как на картинке к этой статье, а выглядит примерно так:
.visible-print-inline-block{display:inline-block!important}}@media print{.hidden-print{display:none!important}} (это лишь фрагмент)
То есть первая задача - деминимизировать, то есть сделать читабельным, с пробелами и проч. Здесь тоже есть много сервисов, мы в такой ситуации используем unminify.com - он вполне хорошо справляется со своей задачей.
Но в данном случае мы получили ситуацию неожиданную - .css-файл, который загружался сайтом, имеет вышеуказанный размер; а как бы исходный и не сжатый - всего лишь 19851 байт. По сути, можно было останавливаться уже тут, и загружать на сервер исходный.
Для сравнения сжатия выбрали сервисы, которые время от времени используем:
- http://alexvaleev.ru/cssoptimizer/
- https://cssresizer.com/
- https://www.cleancss.com/css-minify/
- http://iceyboard.no-ip.org/code/css_compressor.php
- https://partnerki-runeta.ru/css-optimized/
Специальный приз в номинации "Консультант по верстке" выиграл alexvaleev - его продукт не просто сжимает, но и подсказывает ошибки и предупреждения, да еще и для разных версий css.
Конечно, такие подсказки иметь хорошо и удобно, хотя может напугать неспециалиста! И все бы хорошо, и он почти победил... но вот сайт после сжатия отображается не так, как первоначальный. А задача - не менять внешность сайта ни на один пиксель!
Специальный приз в номинации "Сжал и скачал" получает CSSResizer. Забудьте про copy-paste, и для исходника, и для результата - забрать данные можно сразу с сервера, скачать можно сразу готовый .css-файл.
А вот первое место "ЗА САМОЕ СУРОВОЕ СЖАТИЕ" получает..... да, ресурс с "многообещающим" названием iceyboard.NO-IP. Если результат сжатия предыдущих показан на скриншоте, то итоговый результат этого инструмента - 8.72 kB (8,934 B)! Да вот беда - сайт с этим файлом стилей стал отображаться не совсем адекватно. Так что - суров, да, суров...но нам не подошел.
И в результате проведенных тестов, сжатий и оптимизаций CSS, а также обязательной проверки сайта на работоспособность после использования каждого сервиса (и отката к исходному состоянию) победителем становится серсис оптимизации CSS с многообещающим названием PARTNERKI-RUNETA (нет, мы не в доле!) - его результат с размером файла 15195 байт и работает сейчас на сервере клиента. Золотая медаль "ЗА РАБОТОСПОСОБНОЕ СЖАТИЕ", несмотря на более чем аскетичный интерфейс.
Вот так мы подходим к своей работе! Кто-то скажет, что это перфекционизм - но качество выполнения на самом деле стоит у нас на первом месте.