Оптимизация на лету! Сжимаем CSS и JS.

Рубрика: joomla, WordPress, Оптимизация. Автор job

Вот решил написать про оптимизацию (минимизацию) передачи данных от сервера к клиенту. В первую очередь я говорю о сжатии передаваемых данных. В виду того что изображения зачастую уже сжаты такими программными продуктами как Photoshop в режиме веб, разговор пойдет о сжатии CSS и JS файлов.

Начну с того что стоит большой вопрос «сжимать или не сжимать» js библиотеки такими устройствами как «jsmin» или «yuicompressor», очень популярных на сегодняшний день. Подобных статей в сети огромное количество. Я решил не сжимать! Почему? Читаем дальше…

Недавно писал модуль для Joomla построенный на библиотеке сторонних разработчиков. Библиотека оказалась большого размера, так как объединяла в себе различные функции, мне же нужна была только одна. Вот тут и встал острый вопрос, как его оптимизировать!

Первое что я попробовал это компонент компрессии от «Dean Edwards» — библиотека отказалась работать. Тогда вырезал ненужные функции из библиотеки и снова попробовал компрессию — результат тот же. Пришлось оставить в чистом виде.

Тогда я и вспомнил возможность передачи к клиенту архивных пакетов «GZIP». Данная возможность уже реализована на движке Joomla. Тестируя передачу данных, системы отвечали, что CSS и JS передаются в несжатом виде. Выход один прописать в .htaccess принудительную передачу запакованных файлов. Для этого естественно надо упаковать имеющиеся файлы (*.css и *.js). Для этого используем «7zip», сжимает порядка в 5–6 раз. Исходные файлы удалять не следует, достаточно в каталоги добавить упакованные версии (*.css.gz и *.js.gz).

Опишем процесс: Добавляем в .htaccess

AddEncoding gzip .gz
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{HTTP_USER_AGENT} !Safari [OR]
RewriteCond %{HTTP_USER_AGENT} Konqueror
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]

Ковыряя интернет, напоролся на то, что у Safari и Konqueror проблема с приемом Gzip, поэтому их мы пропустим и отправим исходные файлы, так как тестировать нет времени. Зато проверялось на FireFoxe, Opera, IE — самые популярные, все работает!

Таким образом, уменьшил трафик на 70кб, для большого портала — большой скачек! Это же реализовал и на этом блоге (движок WordPress 2.7), приведу статистические данные.

До минимизации:

суммарный размер файлов            267801 байт время загрузки (33,6kbps)            99.49 с время загрузки (100 KB/s)            11.02 с

После минимизации:

суммарный размер файлов            222615 байт время загрузки (33,6kbps)            84.12 с время загрузки (100 KB/s)            10.57 с

Ну а по минимизации CSS скажу одно — постарайтесь удалить как можно больше пробелов и переносов!

Popularity: 56% [?]