Yandex Metrika for tca.by
агентство интернет маркетинга Trakhtenberg Consulting Agency

Чем сжать CSS? Оптимизация загрузки

Как сжать CSS online Наша компания и разрабатывает сайты, и занимается их продвижением в поиске (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 Optimizer  Специальный приз в номинации "Консультант по верстке" выиграл alexvaleev - его продукт не просто сжимает, но и подсказывает ошибки и предупреждения, да еще и для разных версий css.

Конечно, такие подсказки иметь хорошо и удобно, хотя может напугать неспециалиста! И все бы хорошо, и он почти победил... но вот сайт после сжатия отображается не так, как первоначальный. А задача - не менять внешность сайта ни на один пиксель!

CSS Resizer  Специальный приз в номинации "Сжал и скачал" получает CSSResizer. Забудьте про copy-paste, и для исходника, и для результата - забрать данные можно сразу с сервера, скачать можно сразу готовый .css-файл.

А вот первое место "ЗА САМОЕ СУРОВОЕ СЖАТИЕ" получает..... да, ресурс с "многообещающим" названием iceyboard.NO-IP. Если результат сжатия предыдущих показан на скриншоте, то итоговый результат этого инструмента - 8.72 kB (8,934 B)! Да вот беда - сайт с этим файлом стилей стал отображаться не совсем адекватно. Так что - суров, да, суров...но нам не подошел.

partnerki-runeta/CSS-Optimized  И в результате проведенных тестов, сжатий и оптимизаций CSS, а также обязательной проверки сайта на работоспособность после использования каждого сервиса (и отката к исходному состоянию) победителем становится серсис оптимизации CSS с многообещающим названием PARTNERKI-RUNETA (нет, мы не в доле!) - его результат с размером файла 15195 байт и работает сейчас на сервере клиента. Золотая медаль "ЗА РАБОТОСПОСОБНОЕ СЖАТИЕ", несмотря на более чем аскетичный интерфейс.

Вот так мы подходим к своей работе! Кто-то скажет, что это перфекционизм - но качество выполнения на самом деле стоит у нас на первом месте.

 


Полезная статья? Поделись с друзьями!

Тэги текста

Соседние материалы