Преамбула
После того как появилась технология data:uri был проведен ряд исследований в сторону автоматизации процесса оптимизации сайтов с применением этой технологии. В результате появилась новая технология Data URI CSS Sprites. Я помню какая была эйфория когда был получен кросс-браузерный код подключения data:uri css спрайтов. Это была большая радость. Которая к сожалению длилась всего пару дней, так как были найдены проблемы для IE7@Vista. Почти два года не было решения, и почти два года в технологии data:uri css спрайтов использовался костыль для IE7@Vista. Но буквально пару месяцев назад было найдено решение проблемы. Как ни банально и обидно это оказалось — решение оказалось настолько простое, что сначала я никак не мог поверить в его работоспособность. Добавив всего два(!) нужных символа в конец файла со спрайтами — проблема улетучилась. Проведя серию экспериментов теперь можно с уверенностью заявить — технология работает, кроссбраузерно!
Но суть не в этом, суть статьи в предлагаемом подходе к автоматической оптимизации.
Алгоритм работы клиентской оптимизации как сервиса
Вы монтируете в шаблон сайта файл-оптимизатор, который определяет (вычисляет) не оптимизированые скрипты и стили. При обращении к какой-либо странице сайта файл-оптимизатор проверяет наличие оптимизированной версии скриптов и стилей, и если таковых не найдено, он посылает команду специальному сервису — «мол тут есть что про оптимизировать» и умирает (т.е. не блокирует дальнейшую работу страниц сайта). Сервис в асинхронном режиме заходит на ту страницу, которую нужно прооптимизировать, анализирует ее, делает выжимку и формирует оптимальный пакет. После этого он обращается к файлу-оптимизатору и отдает прооптимизированую версию скриптов и стилей. Файл-оптимизатор укладывает оптимизированную версию в нужное место и при следующем обращении к этой странице уже отдает на клиент оптимальный вариант.
Пока, на данный момент файл-оптимизатор разработан для Drupal.
Инструкция по установке для Drupal
1) создаем на сервере папку optimum, в каталоге куда установлен drupal
2) проверяем права на запись в эту папку пользователю, под которым запущен веб-сервер
3) качаем файл duris.php (v. 1.0.3) и кладем его в папку optimum
4) подключаем в файл duris.php в файл шаблона в самое начало, примерно так
<?php include_once(dirname(__FILE__).'/../../optimum/duris.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
5) пробегаемся по страницам, смотрим в фаербаг, повторно пробегаемся по страницам
после второго прохода скрипты и стили должны быть уже оптимизированы.
В оптимизацию заложен принцип асинхронности, т.е. оптимизированная версия появится на сайте не сразу, а со временем. После первого обращения к странице уходит запрос на оптимизацию и в асинхронном режиме «варится» опт. версия. Потом она укладывается в нужное место.
6) для компрессии base64 картинок можно использовать уже сжатые gzip файлы, файл настроек под apache для передачи статических gzip файлов .httaccess кладем в папку optimum (для ngnix пока нет, если знаете как его передать отпишите в эту тему)
Важно: с localhost пока не работает, ваш сервер должен быть доступен из вне.
Реальные примеры применения
prosto.lutsk.ua — городской портал Луцка
Сравнительный анализ ДО оптимизации
и После оптимизации
zii-egg.ru — сайт о плеере Creative Zii Egg
kinobaza.tv — Приятный и удобный поиск фильмов в рунете
ide.hivext.ru — Среда разработки приложений на платформе Hivext
www.dolcevilla.cz — Сайт визитка пражского отеля
Развитие
Планируется разработать подобные файлы-оптимизаторы и для других популярных CMS.
Но, одному тяжело все тащить на себе. Поэтому если у кого-то возникнет желание помощь в этом деле, буду рад помощи. Переработать готовый Drupal-льный файл-оптимизатор под другие CMS не проблема. В нем минимум логики, вся логика находится в удаленном сервисе оптимизации. Примерное время реализации от 2-х до 4-х часов.
Если у кого-то есть конструктивные замечания или предложения — буду очень рад выслушать.
Желаю приятной оптимизации.
