Статьи Архив статей

Автор: Мациевский Николай aka sunnybear
Опубликована: 23 августа 2009

Обзор технологий автоматической клиентской оптимизации

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

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

JSMin Ant Task

JSMin Ant Task. Приложение позволяет воспользоваться логикой работы JSMin (алгоритма преобразования JavaScript-кода путем удаления из него ненужных символов) при работе с Ant-сервером.

JSMin PHP

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

YUI Compressor

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

Packer

Packer от Dean Edwards. В отличие от всех предыдущих инструментов Packer создает некоторое подобие архива, используя встроенные средства JavaScript, при этом степень сжатия получается весьма значительной (до 50%). Однако при дополнительном использовании gzip файлы, сжатые с помощью Packer, проигрывают своим аналогам, преобразованным при помощи YUI Compressor.

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

CSS Min PHP

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

CSS Tidy

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

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

Minify

Minify является первым приложением, которое попыталось автоматизировать значительную часть действий по клиентской оптимизации. Приложение используется, главным образом, для объединения, минимизации и кэширования CSS- и JavaScript-файлов, минимизации и кэширования HTML-документов. Имеет модульную структуру и может быть встроено в процесс публикации веб-сайтов.

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

qpimg

qpimg php5-библиотека для динамического создания CSS спрайтов (CSS sprites). Использование CSS спрайтов является одним из эффективных методов клиентской оптимизации веб-страниц (подробнее описано в 4 главе). Данный инструмент позволяет назначать конечные позиции для фоновых изображений для автоматического их объединения.

В качестве альтернативного решения можно привести инструмент coolRunnings, который решает ту же самую задачу, но представляет собой отдельный веб-сервис.

Smart Sprites

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

SpriteMe

SpriteMe новый проект от известного Steve Souders (автора двух книги по клиентской оптимизации и со-организатора конференций Velocity, полностью посвященной вопросам клиентской производительности), который позволяет создавать CSS Sprites в интерактивном режиме.

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

Smart Optimizer

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

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

PHP Speedy

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

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

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

Web Optimizer

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

Список поддерживаемых систем управления сайтом и фреймворков включает несколько десятков наиболее известных, в том числе: Wordpress (ускорение WordPress), Joomla! (ускорение Joomla!), Drupal, Bitrix, NetCat, UMI.CMS, DataLife Engine, Simple Machines Forum, phpBB, Invision Power Board и т.д. Приложение обладает огромным функционалом, более подробно можно прочитать на странице приложения: code.google.com/p/web-optimizator/.

Web Optimizer работает как на PHP4, так и на PHP5, а также, если PHP подключается через CGI, а не mod_php.

Web Application Optimizer

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

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

Aptimize

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

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

Читать дальше

Все комментарии (habrahabr.ru)