Недавно я наткнулся на одну очень интересную тему для WordPress – WP-Coda. Выглядит просто шикарно! Но дело не в этом. Эта тема использует довольно много эффектов, реализованных с помощью JavaScript. Мне стало интересно, во сколько эта красота обходится посетителям, и оказалось, что не так уж и дорого. Всего один js-файл размером 45кБ. Дело в том, что автор упаковал семь исходных файлов в один и после этого сжал его упаковщиком вроде Packer JavaScript en PHP. Но первый же эксперимент показал, что это не предел. Если упаковать этот файл в gzip архив, то его размер уменьшается до 21кБ. А большинство современных браузеров прекрасно работают с такими архивами. При этом нет необходимости что-либо переделывать в самой теме. Достаточно создать архив и положить его в одну папку с исходным файлом. После этого в файл. htaccess добавляем правила:
RewriteEngine On AddEncoding gzip. gz RewriteCond %{HTTP:Accept-encoding} gzip RewriteCond %{HTTP_USER_AGENT} !Safari RewriteCond %{REQUEST_FILENAME}.gz - f RewriteRule ^(.*)$ $1.gz [QSA, L]
Работают эти правила так. 1) включаем RewriteEngine; 2) указываем, что файлы с расширением. gz имеют MIME тип gzip; 3) начинаем проверки: 3.1) если браузер принимает gzip; 3.2) если это не Safari (у него вроде есть проблемы с gzip); 3.3) если существует файл с таким же именем, как и у запрошенного, но с расширением. gz; 4) если все проверки прошли успешно, то добавляем к имени файла расширение. gz и отправляем этот файл браузеру. Таким образом, если браузер не работает с gzip, то он получит исходный файл, если поддерживает – получит архив.
Посетитель разницы не заметит. Разве что немного увеличится время загрузки страницы. В качестве примера, взгляните на скриншоты Firebug, сделанные для блога с темой WP-Coda. Исходный вариант: После сжатия и установки правил в. htaccess: Кстати, заметьте, имя файла в обоих случаях одно и тоже. Изменяется только его размер. Т. е. браузер в обоих случаях считает, что получил файл, указанный в теге script (global. js), а сервер отправляет в первом случае global. js, а во втором – global. js. gz. На мой взгляд, такой подход имеет только один недостаток. Во время разработки очень не удобно работать с одним большим js файлом, тем более сжатым Вручную упаковывать файлы тоже не интересно, поэтому нужно автоматизировать процесс. Для этих целей я написал небольшой php скрипт.