Оптимизация загрузки JavaScript-библиотек на примере extJS

Итак задача стояла такая. В проекте начали использовать библиотеку extJS, и все в ней хорошо, за исключением её размера. Весит это чудо 790 Кб. Я начал искать способы, как можно было бы сжать размер библиотеки и увеличить скорость загрузки страниц.

Все началось с банальных YUICompressor. Последняя на данный момент версия 2.4.2 показала сжатие
чуть менее 1Кб. Сжимал я так:
java -jar yui.jar --type js --verbose -0 ext-compress.js ext-all.js

Результаты:
ext-all.js — 538,9 Кб
ext-compressed.js — 537,5 Kб

Прискорбный результат. Значит либо библиотека у меня уже сжатая, либо я что-то не так делал.
Дальше мои изыскания пошли в сторону выдачи сервером уже сжатого контента через с помощью ob_gzhandler.

Итак загрузка по-умолчанию:


После включения сжатия:


Нет предела совершенству, я подумал — а что это у меня один и тот же скрипт запрашивается еще раз
при повторной загрузке. И на просторах Интернета было найдено решение.
Необходимо использовать возможность протокола HTTP а конкретнее заголовок HTTP_IF_MODIFIED_SINCE.
Т.е. схема такая:
1. Браузер делает запрос к серверу.
2. Сервер выдает файл броузеру, а в заголовки ставит
Header(«Last-Modified: ».date(«D, j M Y H:i:s»,filemtime($path))." UTC");
где path — это путь к файлу на сервере.
3. Браузер делает повторный запрос, и сервер получает заголовок HTTP_IF_MODIFIED_SINCE.
Хочу обратить внимание, что этот заголовок будет получен только если мы до этого послали
браузеру Last-Modified. Сравниваем полученное время и время файла на диске, и если они одинаковые
выдаем броузеру заголовок header($_SERVER['SERVER_PROTOCOL'].' 304 Not Modified') и браузер грузит
картинку из кэша.

Вот что получилось, когда я применил этот метод:


Уменьшение объема с 708Кб до 243Кб плюс гарантированная однократная загрузка и автообновление кэша
при обновлении исходного файла. Думаю неплохо)

Как с этим работать

Тестовая страница

Сам скрипт:
<?php
$path = $_SERVER['QUERY_STRING'];
// ограничиваем доступ скрипта только в папку /public
if(ereg('/public/', $path)) {
if(file_exists($path)) {
$content = file_get_contents($path);
if($content != false) {
$lastmod = date("D, j M Y H:i:s",filemtime($path))." UTC";
// .. если файл с тех пор не изменился, выдаем спец. заголовок,
// чтобы броузер брал его из кэша
if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']))
{
$modsince = $_SERVER['HTTP_IF_MODIFIED_SINCE'];
if ($modsince != -1 && $modsince == $lastmod)
{
header($_SERVER['SERVER_PROTOCOL'].' 304 Not Modified');
exit();
}
}
// .. а если изменился, то сжимаем его и отдаем броузеру
@ob_start();
@ob_start('ob_gzhandler');
// для css надо выдать content-type, т.к. по-умалчанию Apache выдает text/html
if(ereg('.css', $path)) {
Header ("Content-type: text/css");

}
Header("Expires: ".date("D, j M Y H:i:s",time()+(86400 *30))." UTC");
Header("Last-Modified: ".date("D, j M Y H:i:s",filemtime($path))." UTC");
Header("Cache-Control: Public");
Header("Pragma: Public");
print($content);
ob_end_flush();
}
}
}
?>


Что осталось за бортом:
1. Почему-то упорно не желает сжиматься ext-all.css Вернее он сжимается с 83Кб до 13Кб
но потом портиться страничка. Т.е. по видимому css-стили не подключаются. Буду рад узнать, как
это можно сделать.
2. После включения сжатия время увеличилось до 529ms, думаю это из-за тормознутости компа. Завтра буду тестить на сервере.

Прошу не судить строго мою статью, равно как и объективность тестов.
Все проводилось на домашнем компьютере, да еще и с кучей запущенных программ.