Сжатие CSS

Нужно ли вообще сжимать CSS код?

Прежде всего, давайте определимся, зачем нам сжимать css код? Если наши css файлы имеют небольшой размер, то и понтоваться нечем то, но если  вы разрабатываете солидный проект, то это совсем другой разговор. Итак, вы здесь чтобы узнать, как организовать сжатие CSS. Ближе к делу… CSS сжатие можно реализовать несколькими способами. Ниже список всех известных мне способов сжатия CSS.

Способы сжатия CSS

Сжатие CSS с помощью онлайн компрессоров

Примечания: статическое сжатие, сжимает до - 80%-90%

Сжатие CSS средствами PHP

Примечания: динамическое сжатие, сжимает до -75%-95% (зависит от вас)

Сжатие CSS алгоритмом Base  62

Примечания: статическое сжатие, сжимает до - 50%

Просто выберите понравившийся способ сжатия css и кликните по нему, или прочтите все способы и сделайте собственные выводы, что я настоятельно вам рекомендую.

Сжатие CSS с помощью онлайн компрессоров

Анализируя работу cssкомпрессоров, можно сделать следующие выводы о степени сжатия css. Эксперимент проводился на основании двух css файлов со следующими параметрами:

первый – 7 372 байт

второй – 62 609 байт

Первый css написан коротко и читабельно, поэтому сжиматься он будет хуже.

Онлайн компрессор CleanCSS

Адрес: www.cleancss.com

Довольно таки солидный сервис, давайте посмотрим результаты его сжатия css.

Результат:

первый – сжат до 7 075 байт (96 %)

второй – сжат до 52 797 байт (84,3 %)

Онлайн компрессор FormatCSS

Адрес: www.lonniebest.com/FormatCSS

Этот сервис предназначен более для форматирования css файлов, нежели для их сжатия. Текст css вводится с помощью скопировать/вставить.

Результат:

первый – сжат до 8 105 байт (109,9 %)

второй – сжат до 61 715 байт (98,5 %)

Онлайн компрессор Robson CSS Compressor

Адрес: iceyboard.no-ip.org/projects/css_compressor

Сервис гибкий в плане загрузки исходного кода css. В него можно загрузить css из локального каталога, из интернета или копировать/вставить. Давайте посмотрим на результаты сжатия css файлов.

Результат:

первый – сжат до 6 326 байт (86,3 %)

второй – сжат до 48 985 байт (78,2 %)

Онлайн css html компрессор Tabifier

Адрес: tools.arantius.com/tabifier

Позволяет сжимать не только css, но и html код. Но результат не очень впечатляет, делайте выводы сами.

Результат:

первый – сжат до 7 876 байт (106,8 %)

второй – сжат до 60 706 байт (96,9 %)

Сжатие CSS средствами PHP

Сжатие css с помощью PHP доступно несколькими способами, но я приведу только один, самый интересный для моего понимания. Преимущество css сжатия на php это динамичность и гибкость в плане настроек сжатия, так как вы их сами задаете, с помощью своего php сценария. Мой сценарий выглядит так:

<?php 

  header('Content-type: text/css'); 

  ob_start("compress"); 

  function compress($buffer) { 

    /* удалить комментарии */

    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer); 

    /* удалить табуляции, пробелы, символы новой строки и т.д. */

    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer); 

    return $buffer; 

  } 

  /* css файлы */

  include('master.css'); 

  include('typography.css'); 

  include('grid.css'); 

  include('print.css'); 

  include('handheld.css'); 

  ob_end_flush(); 

?>

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

Сжатие CSS алгоритмом Base 62

Способ довольно интересный и эффективный, но он статический, то есть, каждый раз изменяя ваш css файл, необходимо пройти процедуру сжатия css файла. Ниже поэтапно описана эта процедура.

1. Сжатие css с помощью компрессора

Необходимо воспользоваться одним из css компрессоров, чтобы убрать все пробельные символы и выровнять css код в одну строку.

2. Создание js файла

Необходимо создать js файл и поместить в него следующий код:

document.write('<style type="text/css">/*ваш стиль */</style>');

Вместо /*ваш стиль */ вставляете полученную строку в первом пункте процедуры сжатия.

3. Сжатие алгоритмом Base 62

Как видите, теперь вы имеете js файл, который вы сжимаете с помощью сервиса Packer - http://dean.edwards.name/packer/

Вставьте код вашего js файла в верхнее поле и выберите галочку Base62 encode , после чего получите результат в нижнем поле.

Данный способ позволяет сжать css файл размером от 15кб до 8кб, то есть почти на 50%. Плюс такой замысловатой процедуры в том, что полученный код вы вставляете в js файл в котором находятся остальные ваши js сценарии и это все подгружается вместе.

P.S.

Я выложил все свои знания по поводу сжатия css. Если имеете какие-то соображения по поводу более эффективных способов сжатия css, пожалуйста, отпишитесь в комментариях. Спасибо за ваше внимание!

Дальше: PHP glob – листинг папок