Оптимизация работы сайта. Часть 1. Сжатие стилей и скриптов

CSS JS Compress + GZIPWebsite tuning performance client side. Привет. Затронут очень важный вопрос с точки зрения оптимизации работы сайта. В целом идея не нова, давно всем известна, многими проработана, но используется далеко не всеми сайтами. Сегодня мы рассмотрим, как можно легко реализовать у себя механизм сжатия и шифрования статических файлов, что позволит и защитить некоторые стили и скрипты, а также ускорить их загрузку на устройствах с проблемной связью.

Суть идеи простая – из статических файлов JS и CSS – мы создаем минифицированную версию, которая грузятся быстрее и занимает меньше трафика. Также – мы применяем GZIP сжатие. Говорите, что серверу нужно тратить ресурсы на сжатие файлов?

 

Да, на сжатие тратиться некоторые ресурсы. Фокус в том, что мы сжимаем статические файлы всего раз при каждом их изменении (а меняются они редко). При обращении - клиент скачивает сжатый файл целиком и получает заголовок, что файл заархивирован. Данный метод относится к статическим файлам, которые не меняются со временем и меняются только при разработке.

На сегодняшний день – мне не удалось обнаружить идеального сжимателя Javascript. Их много, они действительно сжимают. Но такого, который работал бы в 100% случаев – нет.

Если Вы копали эту тему в интернете – наверняка наткнулись на CSSmin и JSMin. Они есть, они работают почти всегда. JSMin работает во всех случаях, только если у вас в скрипте не используются регулярные выражения. Packer.js – работает хорошо, только не правильно разбирает вложенные функции, например выражения $.each(…) на Jquery.

CSSMin с работой справляется отлично. Правда 90% ее работы делают эти 2 функции

function compress($buffer){
                $buffer=preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!','',$buffer);
                return str_replace(array("\r\n","\r","\n","\t",'  ','   ','    '),'',$buffer);
}

Она лишь дополнительно убирает «;» в конце блока, и возможно как-то пытается переставить элементы. Нужно же как-то оправдать 300Кб кода) . Сделали бы еще сжатие похожих цветов #AABBCC в #ABC (может быть сами такое сделаем, делов то)

Практика.

Сразу условимся что все Javascript файлы – будут находится в папке JS, а все стили – в папке CSS. Нам нужно создать файл php файл, который при запуске будет пробегать по всем CSS в папке, сжимать их, и создавать копию с расширением CSSGZ. Так проще различать и понятно что внутри. Остается только сформировать .htaccess файл в каждой из папок для обозначения нужных заголовков браузеру.

AddType text/css cssgz
AddEncoding gzip .cssgz

(пишем именно GZIP, а не X-GZIP, как в других источниках, если не хотите проблемы с Internet Explorer)

.htaccess должен находиться в папке с файлами css. Также можно вынести его на уровень выше

Можно также подумать о выдаче заголовка с датой окончания кеша, но это другая тема, оставляю это на Ваше усмотрение.

Заранее предусмотрите права на запись на данную папку (chmod 777 css).

Пишем код исполняемого PHP файла

//require 'cssmin-v3.0.1.php';
if ($handle=opendir('.')){
                while(false !== ($file=readdir($handle))){
                               if ($file == '.' or $file == '..' or is_dir($file)) continue;
                               if (substr($file,-4) != '.css') continue;
                               $filename=substr($file,0,-4);
                               $css=file_get_contents($file);
                               $csscompress=compress($css);
                               //$csscompress=CssMin::minify($css);
                               file_put_contents($filename.'.cssgz',gzencode($csscompress,9));
                }
                closedir($handle);
}
function compress($buffer){
                $buffer=preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!','',$buffer);
                return str_replace(array("\r\n","\r","\n","\t",'  ','   ','    '),'',$buffer);
}

В коде отмечены варианты для подключения модуля и без него. Выбирайте сами. На мой взгляд – 300Кб слишком затратные )

Не забудьте подключить полученные CSSGZ файлы в шаблонах своих проектов. Если после использования - для каждого CSS файла создалась копия - он отработал верно. Для ситуации с Javascript – код аналогичен. Только используйте модуль для сжатия, какой сочтете нужным. Возможен вариант просто упаковать GZIP без всевозможных преобразований.

Мы использовали все преимущества сжатия. Сайты грузятся быстрее. На одном лишь Jquery можно сэкономить 60Кб. А это для мобильного интернета – это весьма ощутимый трафик. Для тех, у кого медленная скорость – загрузка будет происходить заметно быстрее. При сжатии - очищаются комментарии для экономии места, по этому разобраться в сжатом коде - будет сложнее.

Недостаток один – нужно после каждого изменения – запустить скрипт обработки.

Не понимаю, почему ведущие отечественные лидеры отрасли так до сих пор не делают (яндекс например, жж, рбк, и множество других). Давайте сделаем интернет чуточку добрее :)

  • Автор: kosmom
  • Рейтинг: 0
  • Просмотров: 716
  • Комментариев: 0
  • Создан: 18.12.2012 11:17

Комментарии (0)