Автоматизация клиентской оптимизации

7.1. Обзор технологий

На данный момент тематика автоматической клиентской оптимизации сильно волнует умы веб-программистов, предпринимателей и просто энтузиастов. Выгоды вполне очевидные: быстрый сайт имеет значительные преимущества перед медленными конкурентами. При наличии высокой конкуренции это может оказаться существенным. Более того, пользователи не склонны ждать долго. Быстрая загрузка может являться ключом к процветанию интернет-направления целой компании.

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

7.1.1. JSMin Ant Task

JSMin Ant Task (http://code.google.com/p/jsmin-ant-task/). Приложение позволяет воспользоваться логикой работы JSMin (алгоритма преобразования JavaScript-кода путем удаления из него ненужных символов) при работе с Ant-сервером.

7.1.2. JSMin PHP

JSMin PHP (http://code.google.com/p/jsmin-php/). Достаточно известное PHP-приложение, реализующее логику JSMin на PHP. Из замеченных недостатков: отбрасываются условные комментарии и могут возникнуть проблемы при разборе сложных регулярных выражений. Во всем остальном хорошо себя зарекомендовало (также и по скорости преобразования кода). При дополнительном gzip-сжатии незначительно уступает YUI Compressor, но для работы требует лишь PHP.

7.1.3. YUI Compressor

YUI Compressor (http://developer.yahoo.com/yui/compressor/). Данный инструмент возник из Rhino-оптимизатора и активно развивается специалистами Yahoo!. YUI Compressor идет дальше в оптимизации JavaScript-кода: он заменяет имена всех локальных переменных их сокращенными (в большинстве случаев до 1 символа) вариантами. При использовании с gzip-сжатием дает наилучший результат. К сожалению, требует на сервере установленной Java.

К дополнительным минусам стоит отнести некоторую нагрузку на процессор при распаковке такого архива (обычно составляет 30-300 мс). Доступен в качестве реализации на PHP.

7.1.5. CSS Min PHP

CSS Min PHP (http://code.googLe.com/p/cssmin/) является попыткой применить логику JSMin для оптимизации CSS-кода. Достаточно бедно функциональностью, но для простейших задач (минимизация CSS в одну строку) вполне подходит.

7.1.6. CSS Tidy

CSS Tidy (http://sourceforge.net/projects/csstidy/) — наиболее мощный на сегодняшний день инструмент для анализа и оптимизации CSS-кода. Позволяет не только отформатировать исходный файл по заданному шаблону, но и привести его в стандартный вид (по аналогии с HTML Tidy для HTML). Имеет множество настроек для оптимизации кода, в том числе и пересортировку CSS-селекторов для уменьшения размера.

Приложение портировано на два языка: PHP и C (есть версия для локального использования). На текущий момент приложение застыло в версии 1.3, и требуются добровольцы, чтобы привести его в соответствие с текущим состоянием веб-стандартов и продолжить разработку.

7.1.7. Minify

Minify (http://code.googLe.com/p/minify/) является первым приложением, которое попыталось автоматизировать значительную часть действий по клиентской оптимизации. Приложение используется главным образом для объединения, минимизации и кэширования CSS- и JavaScript-файлов, минимизации и кэширования HTML-документов. Имеет модульную структуру и может быть встроено в процесс публикации веб-сайтов.

Интеграция его с рабочим сайтом достаточно сложна (необходимо обладать продвинутыми знаниями, чтобы правильно настроить приложение и решить возникающие проблемы), но эффективность является весьма впечатляющей. К дополнительным минусам стоит отнести отсутствие поддержки CSS Sprites и data:URI технологий, а также невозможность применения его для распределения параллельных загрузок.

7.1.8. qpimg

qpimg (http://code.googLe.com/p/qpimg/) — php5-библиотека для динамического создания CSS-спрайтов (CSS sprites). Использование CSS-спрайтов является одним из эффективных методов клиентской оптимизации веб-страниц (подробнее об этом см. в "Уменьшение количества запросов" ). Данный инструмент позволяет назначать конечные позиции для фоновых изображений для автоматического их объединения.

7.1.9. Smart Sprites

Smart Sprites (http://csssprites.org/) идет дальше в процессе объединения CSS Sprites и предлагает делать это в полностью автоматическом режиме, создав ряд инструкций в комментариях в CSS-файле. Проект изначально написан на Java, но имеет и PHP-ветку.

7.1.10. SpriteMe

SpriteMe (http://www.stevesouders.com/spriteme/) — новый проект известного Steve Souders (автора двух книг по клиентской оптимизации и со-организатора конференций VeLocity, полностью посвященной вопросам клиентской производительности), который позволяет создавать CSS Sprites в интерактивном режиме.

В качестве основных плюсов стоит отметить полностью автоматический режим, моментальное применение изменений, связанных с объединением картинок (всегда можно увидеть, как изменится дизайн в любом браузере), и возможность гибкой настройки и изменения файлов с самими спрайтами (файлы создаются при помощи веб-сервиса cooLRunnings).

7.1.11. Smart Optimizer

Smart Optimizer (http://code.googLe.com/p/smartoptimizer/) позиционирует себя (в отличие от Minify) как отдельное веб-приложение, направленное на ускорение клиентской составляющей веб-сайтов. В качестве основных возможностей стоит отметить: объединение и минимизацию CSS- и JavaScript-файлов, кэширование на клиентском и серверном уровне, возможность конвертации в data:URI.

Приложение довольно сложно в установке (необходимо внесение изменений как в .htaccess, так и в исходные файлы шаблона сайта) и обладает рядом ограничений (не позволяет объединять файлы из разных директорий). Доступно только для PHP-сайтов, работающих под управлением Apache + mod_php.

7.1.12. PHP Speedy

PHP Speedy (http://code.google.com/p/phpspeedy/) — более продвинутое приложение для автоматизации действий по клиентской оптимизации. Имеет собственный мастер установки, в котором позволяет настроить конфигурацию и выдает список необходимых изменений для исходных файлов сайта (обычно это 2 строки с вызовами PHP Speedy).

Основные возможности: минимизация, объединение и кэширование CSS- и JavaScript-файлов, "безопасная" конвертация в data:URI, настройка использования .htaccess, настройка директорий кэширования и возможность исключения ряда файлов.

На данный момент приложение доступно в том числе как дополнение /-к к Wordpress и Joomla! 1.0, а также может быть установлено на любые сайты, использующие PHP5.

7.1.13. Web Optimizer

Web Optimizer (http://www.web-optimizer.ru/) является сегодня наиболее мощным веб-приложением с открытым кодом для клиентской оптимизации. Для большинства сайтов ускорение составляет 3-5 раз (в некоторых случаях доходя до 7-10 раз), результат оценки по YSlow поднимается до 92-98 баллов (из 100). Для установки не нужно глубоких знаний технологии или специфических прав на сайте.

Список поддерживаемых систем управления сайтом и фреймворков включает несколько десятков наиболее известных, в том числе: Wordpress, Joomla!, DrupaL Bitrix, NetCat, UMI.CMS, DataLife Engine, Simple Machines Forum, phpBB, Invision Power Board и т. д. Более подробно об этом приложении рассказывается далее в этой лекции.

Web Optimizer работает как на PHP4, так и на PHP5, а также если PHP подключается через CGI, а не modphp. Доступен как плагин к Wordpress и Joomla!.

7.1.14. Web Application Optimizer

Следующее приложение, Web Application Optimizer (http://wao.mono-software.com/), обладает почти тем же функционалом, что и Minify, но приэтом предназначено для сайтов, использующих ASP .NET. В числе основных возможностей: уменьшение и сжатие CSS- и JavaScript-файлов, уменьшение и gzip-сжатие для HTML-файлов. После установки приложения необходима его дополнительная ручная настройка.

WAO является платным и распространяется по цене от $99 для одного сайта.

7.1.15. Aptimize

Aptimize (http://www.aptimize.com/) предназначено для решения проблем более глобальным образом. Это приложение представляет собой отдельный модуль для IIS или Apache (для его установки нужны права администратора) и предлагает почти весь спектр оптимизационных действий, начиная от объединения файлов и сжатия и заканчивая созданием CSS Sprites (используется довольно простой алгоритм) и кэшированием всех ресурсов.

Aptimize распространяется по годовой подписке в размере $1000 для одного сервера.