Реализация отдачи предварительно сжатых .css и .js файлов

В HEAD ревизии livestreet есть такая фича как склеивание нескольких .css и .js файлов их последующая компрессия (удаление лишних символов). Благодаря этому уменьшается количество клиентских запросов к серверу и размер загружаемых файлов, а значит увеличивается скорость загрузки страницы на стороне клиента.

Вот замер который я сделал после перевода живого сайта на последнюю версию ls (используется дефолтная тема «new»):
HTML — 58 KB
CSS — 54 KB
JS — 180 KB
Итого — 292 KB


Теперь начитавшись статей и книжек по оптимизации скорости загрузки сайта на клиентской стороне (кстати советую "Разгони свой сайт"), а также посмотрев отчеты YSlow и webo.in я решил дополнительно сжимать html, css и js средствами веб-сервера (в моем случае это nginx).
Добавляю в конфиг nginx'a следующие строки (взято с книги, там же можно посмотреть конфиги для апача):
gzip  on;
    gzip_types   text/plain text/css application/x-javascript text/xml application/xml application/rss+xml text/javascript image/x-icon;
    gzip_min_length 1000;
    gzip_comp_level 9;
    gzip_http_version 1.0;
    gzip_vary on;
    gzip_proxied expired no-cache no-store private auth;
    gzip_disable msie6;


Делаю замер:
HTML — 8 KB
CSS — 9 KB
JS — 50 KB
Итого — 67 KB (в 4.35 раза меньше!)


Сразу можно устанавливать в заголовках Expires, чтоб они не тянулись повторно:
location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|zip|tgz|gz|rar|bz2|doc|xls|exe|pdf|ppt|txt|tar|wav|bmp|rtf|js)$ {
            root        $srv_root;
            expires     1d;
            add_header  Cache-Control private;
        }


Но все равно веб-сервер будет повторять операцию сжатия для каждого нового пользователя. Если для html это неизбежно, то для .css и .js есть решение позволяющее сэкономить ресурсы процессора.

У веб серверов есть такая фича как отдача предварительно сжатых файлов. Т.е. добавив в конфиг nginx следующее правило (для апача опять же смотрите в книге):
location ~* \.(css|js) {
            gzip_static on;
            gzip_disable Firefox/([0-2]\.|3\.0);
            gzip_disable Chrome/2;
        }

мы говорим ему, что он должен отдавать не main.css (к примеру), а main.css.gz (если такой есть).

А вот для того чтобы автоматизировать создание этих самых «предварительно сжатых файлов» нужно открыть в редакторе «engine/modules/viewer/Viewer.class.php» и после строк:
/**
 * Создаем новый файл и сливаем туда содержимое
 */			
file_put_contents($sCacheName,$sContent);

// Это в методе метод Compress(). Примерно 806я строка.
добавить вот такой кусок кода:
/**
 * Сжимаем и складываем в .gz архив для того, чтоб веб-сервер отдавал уже его
 */
file_put_contents($sCacheName . '.gz', gzcompress($sContent, 9));

Вот так все просто. Для красоты можно вынести уровень компрессии в конфиг ls.

PS. Кстати загрузку js неплохо бы в футер перенести. Тоже ускорит загрузку страницы на клиенте.

PS2. Хотелось бы перенести в «Tips & tricks»

2 комментария

avatar
В livestreet v.0.3.1 есть такая фича как склеивание нескольких .css и .js файлов их последующая компрессия

В 0.3.1 такой фичи нет. Только SVN версии.
avatar
сорри. тянул с транка в index.php «define('LS_VERSION','0.3.1');». сейчас исправлю
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.