Пока выпуск версии 0.5 веб-приложения, автоматизирующего клиентскую оптимизацию для PHP-сайтов, отодвигается на некоторое неопределенное время, мы решили подготовить небольшой обзор текущих настроек и возможностей приложения.
Web Optimizer перехватывает выводимый HTML-документ и преобразовывает его к оптимальному виду. В частности, анализируется вся секция head на предмет CSS- и JavaScript-файлов, также при существовании статических хостов изображения распределяются по ним (меняются адреса у изображений), а блоки с рекламой и счетчиками переносятся перед </body> (опять-таки только при включении соответствующей настройки). Также HTML подвергается минимизации (удаляются лишние переводы строк и отступы, могут удаляться комментарии и вообще все лишние символы, но это ресурсоемкие операции, и по умолчанию они выключены).
Загрузить приложение: http://code.google.com/p/web-optimizator/downloads/list.
Ниже приведены настройки, доступные в Web Optimizer версии 0.4.9.7 (войдут в 0.5 без изменений):
cache в самом Web Optimizer.java). Также можно сжимать JavaScript при помощи Dean Edwards Packer (является лучшим выбором при отсутствии gzip-сжатия). Здесь также можно настроить, каким образом минимизировать выводимый HTML-код (простое удаление лишних переводов строк и пробелов, «вытягивание» в одну строку и(ли) удаление комментариев). Условные комментарии для IE не затрагиваются ни в каком случае.<script>). Здесь можно настроить и «склеивание» CSS-кода, находящегося в <style> (по умолчанию включено). Также можно указать (через пробел) названия файлов (названия, а не полные пути), которые нужно исключить из логики объединения. На этапе тестирования была обнаружена невозможность объединить исходные библиотеки Tiny MCE и FCE Editor, поэтому они исключаются по умолчанию.<body> (или вообще вызывать его загрузку по событию DomContentLoaded), можно вынести загрузку некоторых счетчиков, рекламы и информеров также в самый низ документа (после JavaScript-кода результирующий HTML-код вставляется в исходное место на странице, обеспечивая постепенное появление дополнительных рекламных блоков после того, как загрузилось основное содержание)..htaccess (для CSS- и JavaScript- в статическом виде). При невозможности изменения .htaccess gzip-версии JavaScript- и CSS-кода сохраняются в кэширующих директориях, что также сводит нагрузку на процессор (через PHP) к минимуму..htaccess, для остальных файлов они дублируются по необходимости через PHP. По умолчанию для статических файлов выставляется срок кэширования на 10 лет (при изменении файлов новые версии имеют другое имя, создаваемое на основе md5-хэша от общего содержимого файлов). Для HTML-файлов есть возможность вручную выставить подходящий срок действия клиентского кэша. Отличие этой настройки от следующей группы (серверного кэширования HTML-файлов) заключается в том, что выводимый HTML никак на сервере не сохраняется, мы только указываем браузерам, что они могут не перезапрашивать HTML-документы в течение определенного времени. Будут ли браузеры следовать этому указания или нет, остается полностью на их совести.repeat-x и repeat-y будут объединяться без учета фактических размеров контейнеров), добавлению свободного пространства (позволяет избежать рудиментов при масштабировании таких картинок в современных браузерах).
Для повышения стабильности работы добавлен режим «ограниченной» памяти: если у PHP-процесса меньше 64 Мб памяти (этого хватает для создания спрайта примерно 3000 на 3000 пикселей, что вполне достаточно для большинства сайтов), то изображения, по площади большие 4000 пикселей, будут исключены. Также есть настройка по исключению больших изображений по их линейным размерам (в пикселах, по умолчанию 900) и прямому исключения файлов (опять-таки задаются имена файлов, а не полный путь к ним) из процесса создания CSS Sprites.data:URI позволяет включать фоновые изображения прямо в CSS-файл. Поддерживается всеми современными браузерами и IE8. Имеет ограничение на размер изображения в 24 Кб (32 Кб data:URI кода получаются из 24576 байтов бинарного кода). При создании data:URI для IE7- в CSS-файл вставляются хаки, благодаря чему дизайн сайта остается неизменным для этих браузеров. Также при создании data:URI крайне желательно оптимизировать изображения. Для этого используется API от smush.it. Для корректной оптимизации изображений нужны права на запись для веб-сервера на сами изображения. Эта настройка по умолчанию отключена, потому что оптимизировать изображения имеет смысл всего один раз, и при последующих сборках CSS-файлов использовать уже готовый результат.После этого можно добавить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 Sprites можно создать вручную через Auto Sprites, указав минимизированный CSS-файл (или объединенный исходный).CSS Sprites -> Применить CSS Sprites -> нет
Также возможно, что IE6 некорректно обрабатывает объединение стилей (и наложение фона вместе с рядом других хаков). Тогда может помочь отключениеCSS Sprites -> Исключить IE6 (через хаки) из процесса создания CSS Sprites -> да
data:URIили вообще объединения CSS-файлов:Data:URI -> Применить data:URI -> нет
Настройки сжатия -> Минимизировать и объединить CSS-файлы -> нет
htpasswd. Для этого нужно включить:При этом нужно убедиться, чтобыИспользование .htaccess -> Защитить установку Веб Оптимизатора с помощью htpasswd -> да
Директории кэширования были расположены вне папки с самим Web Optimizer (иначе все развалится для всех посетителей сайта кроме вас самих).index.php):и затем в самом низу страницы:<?php require(/путь/к/Web/Optimizer/web.optimizer.php); ?>
Поскольку в плановом режиме (после создания всеъ кэширующих файлов) высполнение логики Web Optimizer занимает 5-10мс, то на серверную сторону загрузки это не повлияет, зато клиентская будет существенно ускорена. Только надо убедиться, что те страницы, на которые вы добавите вызовы Web Optimizer будут обрабатываться через PHP-интерпретатор (будут иметь расширение<?php $web_optimizer->finish(); ?>
.php или какое-либо другое, определяемое настройками сервера).dev.site.ru. Запустив, например, wgetмы получим оптимизированный «слепок» сайта, который можно загрузить уже в рабочую систему.wget -d -r -c http://dev.site.ru/
Стоит сразу отметить, что данные настройки вносят дополнительную нагрузку на сервер (корректное регулярное выражение достаточно ресурсоемко) и могут привести к вырезанию некоторого JavaScript-кода (который вставляется через комментарии). Также код внутриНастройки сжатия -> Сжать HTML до 1 строки -> да Настройки сжатия -> Удалить HTML-комментарии -> да
script, textarea, pre изменяться не будет (в соответствии со спецификацией). Поэтому использовать данные настройки нужно с большой осторожностью.<?php
require('/полный/путь/до/css.sprites.php');
$smushit = new css_sprites();
$smushit->smushit('/полный/путь/до/изображения');
?>Загрузить приложение: http://code.google.com/p/web-optimizator/downloads/list.