Настройка и использование Web Optimizer

Пока выпуск версии 0.5 веб-приложения, автоматизирующего клиентскую оптимизацию для PHP-сайтов, отодвигается на некоторое неопределенное время, мы решили подготовить небольшой обзор текущих настроек и возможностей приложения.

Особенности работы

Web Optimizer перехватывает выводимый HTML-документ и преобразовывает его к оптимальному виду. В частности, анализируется вся секция head на предмет CSS- и JavaScript-файлов, также при существовании статических хостов изображения распределяются по ним (меняются адреса у изображений), а блоки с рекламой и счетчиками переносятся перед </body> (опять-таки только при включении соответствующей настройки). Также HTML подвергается минимизации (удаляются лишние переводы строк и отступы, могут удаляться комментарии и вообще все лишние символы, но это ресурсоемкие операции, и по умолчанию они выключены).

Загрузить приложение
code.google.com/p/web-optimizator/downloads/list

Настройка Web Optimizer

Ниже приведены настройки, доступные в Web Optimizer версии 0.4.9.7 (войдут в 0.5 без изменений):

Директории кэширования. Здесь можно выставить пути к кэширующим директориям (на файловой системе), в которых будут записываться сохраненные уменьшенные CSS-, JavaScript- и HTML-файлы. Также здесь можно определить корневую директорию сайта (необходима для правильного расчета всех относительных путей). По умолчанию все кэширующие директории назначаются в папке cache в самом Web Optimizer.
Настройки сжатия. Эта группа настроек отвечает за объединении и минимизацию JavaScript- и CSS-файлов. По умолчанию JavaScript-файлы объединяются и минимизируются при помощи JSMin (или YUI Compressor, если доступна java). Также можно сжимать JavaScript при помощи Dean Edwards Packer (является лучшим выбором при отсутствии gzip-сжатия). Здесь также можно настроить, каким образом минимизировать выводимый HTML-код (простое удаление лишних переводов строк и пробелов, «вытягивание» в одну строку и(ли) удаление комментариев). Условные комментарии для IE не затрагиваются ни в каком случае.
Включить внешние JavaScript-файлы. Web Optimizer может загружать внешние JavaScript-файлы (вызываемые с других доменов), а также внутренний код (заключенный прямо в <script>). Здесь можно настроить и «склеивание» CSS-кода, находящегося в <style> (по умолчанию включено). Также можно указать (через пробел) названия файлов (названия, а не полные пути), которые нужно исключить из логики объединения. На этапе тестирования была обнаружена невозможность объединить исходные библиотеки Tiny MCE и FCE Editor, поэтому они исключаются по умолчанию.
«Ненавязчивый» JavaScript. В этой группе собраны настройки, отвечающие за неблокирующие загрузку различных вариантов JavaScript. В частности, можно вынести объединенный JavaScript-файл перед <body> (или вообще вызывать его загрузку по событию DomContentLoaded), можно вынести загрузку некоторых счетчиков, рекламы и информеров также в самый низ документа (после JavaScript-кода результирующий HTML-код вставляется в исходное место на странице, обеспечивая постепенное появление дополнительных рекламных блоков после того, как загрузилось основное содержание).
Не проверять время изменения. Данная настройка позволяет не проверять при загрузке каждой страницы время изменение и содержание всех файлов, только существование закэшированных версий. За счет этого мы получаем существенный прирост серверной производительности (по умолчанию настройка включена). В случае отладки или очень частого изменения исходных JavaScript- или CSS-файлов настройку лучше отключить.
Gzip-сжатие (архивирование). Данная группа настроек регулирует, отдавать ли браузеру JavaScript-, CSS- или HTML-файлы в виде архивов. Gzip-сжатие позволяет сэкономить 70-85% трафика при передаче текстовых файлов, однако может быть (особенно в случае сжатия через PHP и высоконагруженных проектов) не очень оптимальной для сервера. В любом случае по возможности все настройки сжатия выносятся в .htaccess (для CSS- и JavaScript- в статическом виде). При невозможности изменения .htaccess gzip-версии JavaScript- и CSS-кода сохраняются в кэширующих директориях, что также сводит нагрузку на процессор (через PHP) к минимуму.
«Вечное» кэширование. Настройки этой группы отвечают за выставление кэширующих заголовков для JavaScript-, CSS-, HTML- или статических файлов (изображений и анимации). Для изображений и анимации соответствующие правила размещаются только в .htaccess, для остальных файлов они дублируются по необходимости через PHP. По умолчанию для статических файлов выставляется срок кэширования на 10 лет (при изменении файлов новые версии имеют другое имя, создаваемое на основе md5-хэша от общего содержимого файлов). Для HTML-файлов есть возможность вручную выставить подходящий срок действия клиентского кэша. Отличие этой настройки от следующей группы (серверного кэширования HTML-файлов) заключается в том, что выводимый HTML никак на сервере не сохраняется, мы только указываем браузерам, что они могут не перезапрашивать HTML-документы в течение определенного времени. Будут ли браузеры следовать этому указания или нет, остается полностью на их совести.
Кэширование HTML-файлов. Для существенного ускорения работы серверной стороны практически во всех случаях требуется применять серверное кэширование. И практически все CMS это поддерживают (на том или ином уровне). Web Optimizer предлагает альтернативный вариант (для тех случаев, когда текущая система это не умеет, либо нужно более «жесткое» решение): простое кэширование HTML-документов. При включении этой настройки HTML-файлы сохраняются в директории кэширования и отдаются при первом вызове Web Optimizer, без обработки внутренней логики системы. Естественно, учитывается срок действия кэша. Также возможно выдавать сразу не весь документ, а первый 1-2 Кб (через сброс документа), а потом рассчитывать остальную часть. Это может помочь визуально ускорить загрузку страницы на некоторых окружениях. Для настройки кэширования доступен список частей URL сайта, которые нужно исключить (есть возможность задавать регулярные выражения) и список роботов (USER AGENTS), для которых нужно форсировать выдачу кэширующего файла.
CSS Sprites. Пожалуй, самая технологически мощная и самая спорная часть Web Optimizer. Правильное использование спрайтов позволяет на порядок (!) уменьшить число запросов к серверу при загрузке страницы с большим количеством фоновых изображений (с 20-100 до 3-10). Однако существуют некоторые проблемы с отображением комбинированных картинок для IE6 (картинки по умолчанию создаются в 32-битной палитре, а IE6 не умеет корректно обрабатывать прозрачность для таких PNG), проблемы устраняются исключением IE6 из создания спрайтов (соответствующей настройкой), либо использованием непрозрачных картинок. Также доступны настройки по использованию JPEG вместо PNG для полноцветных изображений, «агрессивному» режиму (repeat-x и repeat-y будут объединяться без учета фактических размеров контейнеров), добавлению свободного пространства (позволяет избежать рудиментов при масштабировании таких картинок в современных браузерах).
Для повышения стабильности работы добавлен режим «ограниченной» памяти: если у PHP-процесса меньше 64 Мб памяти (этого хватает для создания спрайта примерно 3000 на 3000 пикселей, что вполне достаточно для большинства сайтов), то изображения, по площади большие 4000 пикселей, будут исключены. Также есть настройка по исключению больших изображений по их линейным размерам (в пикселах, по умолчанию 900) и прямому исключения файлов (опять-таки задаются имена файлов, а не полный путь к ним) из процесса создания CSS Sprites.
data:URI. Технология data:URI позволяет включать фоновые изображения прямо в CSS-файл. Поддерживается всеми современными браузерами и IE8. Имеет ограничение на размер изображения в 24 Кб (32 Кб data:URI кода получаются из 24576 байтов бинарного кода). При создании data:URI для IE7- в CSS-файл вставляются хаки, благодаря чему дизайн сайта остается неизменным для этих браузеров. Также при создании data:URI крайне желательно оптимизировать изображения. Для этого используется API от smush.it. Для корректной оптимизации изображений нужны права на запись для веб-сервера на сами изображения. Эта настройка по умолчанию отключена, потому что оптимизировать изображения имеет смысл всего один раз, и при последующих сборках CSS-файлов использовать уже готовый результат.
Множественные хосты. Данная настройка позволяет включить распределение изображений по статическим хостам. Каждому изображению всегда будет соответствовать один хост (чтобы избежать забивания кэша одними и теми же изображениями со всех доступных хостов). Для использования данного механизма ускорения загрузки необходимо прописать в DNS все альтернативные хосты на тот IP-адрес, который будет их обслуживать (обычно это текущий сайт) и добавить в конфигурации сервера алиасы для основного сайта в виде этих хостов. Например:
```
ServerAlias i1.site.ru
ServerAlias i2.site.ru
```
После этого можно добавить i1 i2 в список хостов для Web Optimizer и убедиться в том, что изображения «раскидываются» по этим хостам. При установке Web Optimizer автоматически проверяется ряд хостов на возможность их использования в качестве альтернативных (с тем же корнем сайта), также все вручную указанные хосты проверяются на доступность (с них загружаются тестовые картинки). Стоит иметь в виду, что пи включении «безопасной» установки (о ней чуть ниже) проверка хостов становится недоступной и их прописывать нужно будет вручную, не перезапуская настройку Web Optimizer.
Использование .htaccess. Большая часть настроек gzip-сжатия и кэширования могут быть записаны в конфигурационном файле вашего сервера для избежания дополнительной работы на стороне серверных скриптов. Это может быть проделано с помощью файла .htaccess (при необходимости вы можете впоследствии самостоятельно перенести все настройки в файл httpd.cond). Web Optimizer автоматически проверяет доступные модули и конфигурирует запись в . htaccess (естественно, для этого последний должен быть доступен на запись). mod_gzip, mod_deflate и mod_filter отвечают за сжатие файлов «на лету», mod_rewrite и mod_mime — за статическое архивирование. mod_headers и mod_setenvif — за обеспечение корректной обработки сжатых файлов на проксирующих серверах и в старых браузерах. mod_expires — за выставление кэширующих эаголовков. Также возможно расположить .htaccess либо в директории сайта (это бывает полезно, если на одном хосте располагается несколько сайтов в разных дирекориях), либо в самом корне сайта. По умолчанию оба месторасположения совпадают. Также возможно защитить установку Web Optimizer с помощью .htpasswd. В этом случае для доступа к настройкам нужно будет ввести логин и пароль через окно HTTP Basic Authorization в браузере (это позволяет вынести Web Optimizer в произвольную директорию внутри сайта, предварительно расположив директории кэширования вне защищенной области).
Логотип Веб Оптимизатора. На данный момент эта группа настроек никак не используется. Может быть, в будущем на каждый сайт будет добавляться небольшая печать «Ускорено при помощи Веб Оптимизатора» со ссылкой на проект. Но пока решения на эту тему не принято.
Автоматическое изменение /index.php. Web Optimizer поддерживает автоматическое изменение необходимых для корректной работы файлов для нескольких десятков CMS (в случае неизвестной системы ее название выводится как CMS 42, и изменяется всегда корневой index.php). Перед автоматическим изменением файла запускается цепочная оптимизация сайта, чтобы создать все кэширующие файлы и избежать длительной загрузки главной страницы сайта в первый раз.

Примеры использования

Web Optimizer — достаточно мощный и гибкий инструмент для клиентской оптимизации произвольного сайта. Но правильная его настройка требует внимательности и понимания желаемого результата. Давайте рассмотрим некоторые наиболее характерные изменения в конфигурации по умолчанию.

Подключение общего(-их) JavaScript- или CSS-файла(-ов) на всех страницах. Достаточно часто мы можем вставить на все страницы какую-то общую JavaScript-библиотеку или таблицу стилей, нужную для всего сайта. Для того чтобы Web Optimizer не пытался объединить этот общий файл со всеми остальными, можно исключить его в конфигурации:
```
Включить внешние JavaScript-файлы и встроенный код -> Исключить из объединения файлы -> список файлов через запятую
```
Отключение CSS Sprites. Зафиксированы случаи, когда в силу ряда причин (отсутствия корректной поддержки GDLib на хостинге, ограничениях по памяти, и т.д.) попытка создания CSS Sprites приводит к «белому экрану» в браузере (и сайт перестает открываться). В таких случаях обычно помогает полное отключение CSS Sprites:
```
CSS Sprites -> Применить CSS Sprites -> нет
```
При желании CSS Sprites можно создать вручную через Auto Sprites, указав минимизированный CSS-файл (или объединенный исходный).
Некорректное отображение сайта в IE6. В этом случае может помочь простое отключение спрайтов для IE6:
```
CSS Sprites -> Исключить IE6 (через хаки) из процесса создания CSS Sprites -> да
```
Также возможно, что IE6 некорректно обрабатывает объединение стилей (и наложение фона вместе с рядом других хаков). Тогда может помочь отключение data:URI
```
Data:URI -> Применить data:URI -> нет
```
или вообще объединения CSS-файлов:
```
Настройки сжатия -> Минимизировать и объединить CSS-файлы -> нет
```
Безопасная установка. Web Optimizer может быть установлен в произвольную директорию (внутри сайта) и защищен с помощью пароля через htpasswd. Для этого нужно включить:
```
Использование .htaccess -> Защитить установку Веб Оптимизатора с помощью htpasswd -> да
```
При этом нужно убедиться, чтобы Директории кэширования были расположены вне папки с самим Web Optimizer (иначе все развалится для всех посетителей сайта кроме вас самих).
Подключение для статического сайта. Web Optimizer может быть использован для любого сайта, для которого доступен PHP. Если у вас уже есть статический сайт, то вы можете подключить вызов Web Optimizer в самом верху каждой страницы (или index.php):
```
<?php
require(/путь/к/Web/Optimizer/web.optimizer.php);
?>
```
и затем в самом низу страницы:
```
<?php
$web_optimizer->finish();
?>
```
Поскольку в плановом режиме (после создания всеъ кэширующих файлов) высполнение логики Web Optimizer занимает 5-10мс, то на серверную сторону загрузки это не повлияет, зато клиентская будет существенно ускорена. Только надо убедиться, что те страницы, на которые вы добавите вызовы Web Optimizer будут обрабатываться через PHP-интерпретатор (будут иметь расширение .php или какое-либо другое, определяемое настройками сервера).
Оптимизация по расписанию. Уже сейчас Web Optimizer может быть встроен в схему публикации произвольного сайта в «статическом» режиме. Для этого необходимо открыть все страницы сайта с установленным Web Optimizer, а потом просто скопировать выведенный HTML и кэширующие директории. Предположим, что Web Optimizer установлен на dev.site.ru. Запустив, например, wget
```
wget -d -r -c http://dev.site.ru/
```
мы получим оптимизированный «слепок» сайта, который можно загрузить уже в рабочую систему.
Склейка HTML в одну строку. Как уже было описано выше, Web Optimizer может «слеить» весь выводимый HTML в одну строку. Для этого нужно включить
```
Настройки сжатия -> Сжать HTML до 1 строки -> да
Настройки сжатия -> Удалить HTML-комментарии -> да
```
Стоит сразу отметить, что данные настройки вносят дополнительную нагрузку на сервер (корректное регулярное выражение достаточно ресурсоемко) и могут привести к вырезанию некоторого JavaScript-кода (который вставляется через комментарии). Также код внутри script, textarea, pre изменяться не будет (в соответствии со спецификацией). Поэтому использовать данные настройки нужно с большой осторожностью.
Оптимизация изображений через smush.it. Сервис smush.it разработан инженерами Yahoo! и Google и позволяет оптимизировать размер фоновых изображений в автоматическом режиме. Подключить оптимизацию изображений можно через библиотеку CSS Sprites (данный пример в версии 0.4.9.7 пока не работает, но уже доступен в SVN и будет включен в 0.5):
```
<?php
require('/полный/путь/до/css.sprites.php');
$smushit = new css_sprites();
$smushit->smushit('/полный/путь/до/изображения');
?>
```
в результате вместо изображения (при наличии прав на его изменение) мы получим его оптимизированную копию. Лучше проводить не на группе рабочих изображениях, а на их копиях, чтобы была возможность откатить изменения.

Загрузить приложение
code.google.com/p/web-optimizator/downloads/list