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

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-спрайтов является одним из эффективных методов клиентской оптимизации веб-страниц (подробнее об этом см. в лекции 4). Данный инструмент позволяет назначать конечные позиции для фоновых изображений для автоматического их объединения.

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 для одного сервера.

7.2. Установка Web Optimizer

Давайте рассмотрим базовую установку веб-приложения для автоматической клиентской оптимизации — Web Optimizer.

7.2.1. Шаг 1: загрузка архива

Web Optimizer поставляется в двух вариантах: ZIP-архив и мини-установщик. Для загрузки первого варианта идем по адресу code.google.com/p/web-optimizator/downloads/list и выбираем Featured версию 0.5 или выше.

Загружаем ZIP-архив в корень сайта. Если к сайту есть SSH-доступ, то можно использовать просто wget: wget http://web-optimizator.googlecode.com/files/weboptimizer.v0.5beta.zip

Затем полученный архив нужно будет распаковать в корень, чтобы получилась папка web-optimizer.

Если к сайту есть только FTP-доступ, то загружаем сначала на локальный диск, потом распаковываем, а потом уже (например, через FAR) копируем в корень сайта.

При отсутствии желания загружать распакованный архив на сервер (или распаковывать на сервере загруженный архив) есть версия мини-установщика, который (если имеется curL на сервере) сам все загрузит и начнет установку. Для этого нужно загрузить только файл instaLL.me.php в корень сайта и открыть его в браузере.

После того как все необходимые файлы оказались на сайте, нужно выставить права на запись, как минимум, для файла web-optimizer/config.php и (опционально) папки web-optimizer/cache для пользователя, под которым работает сервер. Иначе настройки и закэшированные версии сжатых файлов не смогут сохраниться. При желании папка кэширования может быть другой (об этом чуть ниже), в этом случае будет необходимо только выставить права на конфигурационный файл.

7.2.2. Шаг 2: настройка

Заходим в браузере по адресу

http://ваш_сайт/web-optimizer/index.php

Вместо web-optimizer может быть произвольная директория, в которой находится Web Optimizer. Видим приветственный экран от Web Optimizer. Если не видим, то стоит перепроверить, куда был скопирован Web Optimizer, и зайти именно в ту папку.

Здесь возможно два варианта развития событий:

Быстрая установка

Для начала быстрой установки вводим будущий логин и пароль доступа к административной части и нажимаем зеленую кнопку "Быстрая установка". После этого Web Optimizer вычисляет директории на сервере, сохраняет все настройки по умолчанию и осуществляет цепочную опти- мизацию для главной страницы: создает закэшированные версии сжатых файлов. Только потом, если файлы (обычно только корневой index.php, зависит от используемой CMS) доступны на запись, производится их автоматическое изменение.

Иначе Web Optimizer выведет инструкции по изменению этих файлов.

Обычная установка

Обычная установка отличается от быстрой только наличием промежуточного шага с редактированием настроек. Запустить ее можно, нажав по кнопке "Далее", цифре 2 или 3 в верхнем меню или оранжевой стрелочке справа.

Все настройки и их особенности подробно описаны в следующем разделе. Прежде всего нужно убедиться в том, что вычисленные пути яв- ляются правильными. Также можно задать произвольные директории кэ- ширования: это будет необходимо при включении настройки "Защищен- ный режим" (находится в разделе "Использование .htaccess "). После этой настройки пароль при доступе к Web Optimizer будет запрашиваться только через HTTP Basic Authorization. Дополнительно вводить его не по- требуется. Однако файлы, которые находятся внутри папки с Web Optimizer, станут недоступны обычным пользователям, поэтому директо- рии кэширования нужно из нее перенести.

7.2.3. Шаг 3: Управление

В Web Optimizer доступно несколько инструментов для управления приложением.

Во-первых, это конфигурирование всех настроек (здесь и далее при работе не в защищенном режиме нужно будет ввести логин и пароль), которое можно осуществить по кнопке "Далее" (или клику по цифрам 2 или 3 или оранжевой стрелочке справа). Во-вторых, это очистка кэша (будет необходимо, если вы провели изменение каких-либо CSS- или JS-файлов на сервере при включенной настройке "Не проверять время изменения файлов") — кнопка "Очистить кэш". В-третьих, это возможность безболезненно удалить Web Optimizer (будут удалены все добавленные в файлы CMS вызовы, а файл .htaccess будет очищен от оптимизационных директив) кнопкой "Удалить".

При наличии curl на сервере и существовании более новой версии, чем текущая, будет предложено обновиться (появится блок с кнопкой "Обновить"). При обновлении все исходные настройки будут сохранены. Также могут добавиться некоторые новые. В обычном режиме панель администрирования для Web Optimizer выглядит следующим образом:

7.3. Настройка Web Optimizer

Ниже приведены настройки, доступные в Web Optimizer версии 0.5.

7.3.1. Директории кэширования

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

7.3.2. Настройки сжатия

Эта группа настроек отвечает за объединение и минимизацию JavaScript- и CSS-файлов. По умолчанию JavaScript-файлы объединяются и минимизируются при помощи JSMin (или YUI Compressor, если доступна Java). Также можно сжимать JavaScript при помощи Dean Edwards Packer (является лучшим выбором при отсутствии gzip-сжатия). Здесь также можно настроить, каким образом минимизировать выводимый HTML-код (простое удаление лишних переводов строк и пробелов, "вытягивание" в одну строку и(или) удаление комментариев). Условные комментарии для IE не затрагиваются ни в каком случае.

7.3.3. Включить внешние JavaScript-файлы

Web Optimizer может загружать внешние JavaScript-файлы (вызываемые с других доменов), а также внутренний код (заключенный прямо в <script> ). Здесь можно настроить и "склеивание" CSS-кода, находящегося в <style> (по умолчанию включено). Также можно указать (через пробел) названия файлов (названия, а не полные пути), которые нужно исключить из логики объединения. На этапе тестирования была обнаружена невозможность объединить исходные библиотеки Tiny MCE и FCE Editor, поэтому они исключаются по умолчанию.

7.3.4. "Ненавязчивый" JavaScript

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

7.3.5. Не проверять время изменения

Данная настройка позволяет не проверять при загрузке каждой страницы время изменения и содержание всех файлов, а только существование закэшированных версий. За счет этого мы получаем существенный прирост серверной производительности (по умолчанию настройка включена). В случае отладки или очень частого изменения исходных JavaScript- или CSS-файлов настройку лучше отключить.

7.3.5. Gzip-сжатие (архивирование)

Данная группа настроек регулирует, отдавать ли браузеру JavaScript-, CSS- или HTML-файлы в виде архивов. gzip-сжатие позволяет сэкономить 70-85% трафика при передаче текстовых файлов, однако может быть (особенно в случае сжатия через PHP и высоконагру-женных проектов) не очень оптимальной для сервера. В любом случае по возможности все настройки сжатия выносятся в .htaccess (для CSS-и JavaScript- в статическом виде). При невозможности изменения .htaccess gzip-версии JavaScript- и CSS-кода сохраняются в кэши-рующих директориях, что также сводит нагрузку на процессор (через PHP) к минимуму.

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

7.3.6. Клиентское кэширование

Настройки этой группы отвечают за выставление кэширующих заголовков для JavaScript-, CSS-, HTML- или статических файлов (изображений и анимации). Для изображений и анимации соответствующие правила размещаются только в .htaccess, для остальных файлов они дублируются по необходимости через PHP. По умолчанию для статических файлов выставляется срок кэширования на 10 лет (при изменении файлов новые версии имеют другое имя, создаваемое на основе md5-хэша от общего содержимого файлов).

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

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

7.3.7. Серверное кэширование

Для существенного ускорения работы серверной стороны практически во всех случаях требуется применять серверное кэширование. И практически все CMS это поддерживают (на том или ином уровне). Web Optimizer предлагает альтернативный вариант (для тех случаев, когда текущая система этого не умеет либо требуется более "жесткое" решение): простое кэширование HTML-документов. При включении этой настройки HTML-файлы сохраняются в директории кэширования и отдаются при первом вызове Web Optimizer, без обработки внутренней логики системы. Естественно, учитывается срок действия кэша.

Также возможно выдавать сразу не весь документ, а первые 1-2 Кб (через сброс документа), и потом рассчитывать остальную часть. Это может помочь визуально ускорить загрузку страницы на некоторых окружениях. Для настройки кэширования доступен список частей URL сайта, которые нужно исключить (есть возможность задавать регулярные выражения), и список роботов (USER AGENTS), для которых нужно форсировать выдачу кэширующего файла.

7.3.8. CSS Sprites

Это, пожалуй, самая технологически мощная и самая спорная часть Web Optimizer. Правильное использование спрайтов позволяет на порядок (!) уменьшить число запросов к серверу при загрузке страницы с большим количеством фоновых изображений (с 20-100 до 3-10). Однако существуют некоторые проблемы с отображением комбинированных картинок для IE 6 (картинки по умолчанию создаются в 32-битной палитре, а IE 6 не умеет корректно обрабатывать прозрачность для таких PNG), и проблемы эти у страняются исключением IE 6 из создания спрайтов (соответствующей настройкой) либо использованием непрозрачных картинок.

Также доступны настройки по использованию JPEG вместо PNG для полноцветных изображений, по "агрессивному" режиму ( repeat-x и repeat-y будут объединяться без учета фактических размеров кон-

Для повышения стабильности работы добавлен режим "ограниченной" памяти: если у PHP-процесса меньше 64 Мб памяти (этого хватает для создания спрайта примерно 3000 на 3000 пикселей, что вполне достаточно для большинства сайтов), то изображения, по площади большие 4000 пикселей, будут исключены. Также есть настройка по исключению больших изображений по их линейным размерам (в пикселях, по умолчанию 900) и прямому исключению файлов (опять-таки задаются имена файлов, а не полный путь к ним) из процесса создания CSS Sprites.

7.3.9. data:URI

Технология data:URI позволяет включать фоновые изображения прямо в CSS-файл. Поддерживается всеми современными браузерами и IE 8. Имеет опциональное ограничение на размер изображения в 24 Кб (32 Кб data:URI кода получаются из 24576 байтов бинарного кода). При создании data:URI для IE 7 в CSS-файл вставляются хаки, благодаря чему дизайн сайта остается неизменным для этих браузеров.

Также при создании data:URI крайне желательно оптимизировать изображения. Для этого используется API от smush.it. Для корректной оптимизации изображений нужны права на запись для веб-сервера на сами изображения. Эта настройка по умолчанию отключена, потому что оптимизировать изображения имеет смысл всего один раз и при последующих сборках CSS-файлов использовать уже готовый результат.

Для гибкого управления настройками данной группы также доступно конфигурируемое исключение ряда файлов и ограничение включения файлов по размеру.

7.3.10. Множественные хосты

Данная настройка позволяет включить распределение изображений по статическим хостам. Каждому изображению всегда будет соответствовать один хост (чтобы избежать забивания кэша одними и теми же изображениями со всех доступных хостов). Для использования данного механизма ускорения загрузки необходимо прописать в DNS все альтернативные хосты на тот IP-адрес, который будет их обслуживать (обычно это текущий сайт) и добавить в конфигурации сервера алиасы для основного сайта в виде этих хостов. Например:

ServerAlias i1.site.ru
ServerAlias i2.site.ru

После этого можно добавить i1 i2 в список хостов для Web Optimizer и убедиться в том, что изображения "раскидываются" по этим хостам. При установке Web Optimizer автоматически проверяется ряд хостов на возможность их использования в качестве альтернативных (с тем же корнем сайта), также все вручную указанные хосты проверяются на доступность (с них загружаются тестовые картинки). Стоит иметь в виду, что при включении "безопасной" установки (о ней чуть ниже) проверка хостов становится недоступной и их прописывать нужно будет вручную, не перезапуская настройку Web Optimizer.

7.3.11. Использование .htaccess

Большая часть настроек gzip-сжатия и кэширования может быть записана в конфигурационном файле вашего сервера для избежания дополнительной работы на стороне серверных скриптов. Это можно проделать с помощью файла .htaccess (при необходимости вы сможете впоследствии самостоятельно перенести все настройки в файл httpd.cond ). Web Optimizer автоматически проверяет доступные модули и конфигурирует запись в .htaccess (естественно, для этого последний должен быть доступен на запись), modgzip, moddeflate и modfilter отвечают за сжатие файлов "на лету", modrewrite и modmime — за статическое архивирование, modheaders и modsetenvif — за обеспечение корректной обработки сжатых файлов на проксирующих серверах и в старых браузерах, modexpires — за выставление кэширующих эаголовков.

Также возможно расположить .htaccess либо в директории сайта (это бывает полезно, если на одном хосте располагается несколько сайтов в разных дирекориях), либо в самом корне сайта. По умолчанию оба месторасположения совпадают. Возможно и защитить установку Web Optimizer с помощью .htpasswd. В этом случае для доступа к настройкам нужно будет ввести логин и пароль через окно HTTP Basic Authorization в браузере (это позволяет вынести Web Optimizer в произвольную директорию внутри сайта, предварительно расположив директории кэширования вне защищенной области).

В случае тестирования сайта на закрытом от внешнего доступа хосте (закрытом при помощи HTTP Basic Authorization) есть возможность задать логин и пароль доступа в конфигурации Web Optimizer, чтобы последний имел возможность загрузить и обработать динамические файлы.

7.3.12. Логотип Web Optimizer

Web Optimizer поддерживает автоматическое изменение необходимых для корректной работы файлов для нескольких десятков CMS (в случае неизвестной системы ее название выводится как CMS 42 и изменяется всегда корневой index.php). Перед автоматическим изменением файла запускается цепочная оптимизация сайта, чтобы создать все кэширую-щие файлы и избежать длительной загрузки главной страницы сайта в первый раз.

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

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

7.4.1. Подключение общего(-их) JavaScript- или CSS-файла(-ов) на всех страницах

Достаточно часто мы можем вставить на все страницы какую-то общую JavaScript-библиотеку или таблицу стилей, нужную для всего сайта. Для того чтобы Web Optimizer не пытался объединить этот общий файл со всеми остальными, можно исключить его в настройках:

Включить внешние файлы -> Исключить из объединения файлы ->
список файлов через пробел

7.4.2. Отключение CSS Sprites

Зафиксированы случаи, когда в силу ряда причин (отсутствия корректной поддержки GDLib на хостинге, ограничениях по памяти и т. д.) попытка создания CSS Sprites приводит к "белому экрану" в браузере (и сайт перестает открываться). В таких случаях обычно помогает полное отключение CSS Sprites:

CSS Sprites -> Применить CSS Sprites -> нет

При желании CSS Sprites можно создать вручную через Auto Sprites (http://sprites.in/), указав минимизированный CSS-файл (или объединенный исходный).

7.4.3. Некорректное отображение сайта в IE 6

В этом случае может помочь простое отключение спрайтов для IE 6:

CSS Sprites -> Исключить IE 6 (через хаки) из процесса создания
CSS Sprites -> да

Также возможно, что IE 6 некорректно обрабатывает объединение стилей (и наложение фона вместе с рядом других хаков). Тогда может помочь отключение data:URI:

Data:URI -> Применить data:URI -> нет

или вообще объединения CSS-файлов:

Настройки сжатия -> Минимизировать и объединить CSS-файлы -> нет

7.4.4. Безопасная установка

Web Optimizer может быть установлен в произвольную директорию (внутри сайта) и защищен с помощью пароля через htpasswd. Для этого нужно включить:

Использование .htaccess -> Защитить установку Веб Оптимизатора с
помощью htpasswd -> да

При этом нужно убедиться, что директории кэширования расположеы вне папки с самим Web Optimizer (иначе все развалится для всех посетителей сайта, кроме вас самих).

7.4.5. Подключение для статического сайта

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 или какое-либо другое, определяемое настройками сервера).

7.4.6. Оптимизация по расписанию

Уже сейчас Web Optimizer может быть встроен в схему публикации произвольного сайта в "статическом" режиме. Для этого необходимо открыть все страницы сайта с установленным Web Optimizer, а потом просто скопировать выведенный HTML и кэширующие директории. Предположим, что Web Optimizer установлен на dev.site.ru. Запустив, например, wget:

wget -d -r -c http://dev.site.ru/

мы получим оптимизированный "слепок" сайта, который можно загрузить уже в рабочую систему.

7.4.7. "Склейка" HTML в одну строку

Как уже было описано выше, Web Optimizer может "слеить" весь выводимый HTML в одну строку. Для этого нужно включить

Настройки сжатия -> Сжать HTML до 1 строки -> да
Настройки сжатия -> Удалить HTML-комментарии -> да

Стоит сразу отметить, что данные настройки создают дополнитель- ную нагрузку для сервера (корректное регулярное выражение достаточно ресурсоемко) и могут привести к вырезанию некоторого JavaScript-кода (который вставляется через комментарии). Заметим также, что код внут- ри < script > , <textarea> , <pre> изменяться не будет (в соответствии со спецификацией), поэтому использовать данные настройки нужно с боль- шой осторожностью.

7.4.8. Оптимизация изображений через smush.it

Сервис smush.it разработан инженерами Yahoo! и GoogLe и позволяет оптимизировать размер фоновых изображений в автоматическом режиме. Подключить оптимизацию изображений можно через библиотеку CSS Sprites:

<?php
require('/полный/путь/до/css.sprites.php');
$smushit = new css_sprites();
$smushit->smushit('/полный/путь/до/изображения');
?>

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

7.5. Решаем проблемы с установкой Web Optimizer

После многочисленных установок Web Optimizer (http://www.web-optimizer.ru/) на JoomLa! (http://joomLa.org/, как версии 1.0, так и 1.5) было решено собрать воедино полезное знание о возникающих проблемах (связанных в основном с текущим некорректным серверным окружением), чтобы позволить их самостоятельно решить большому числу пользователей.

Итак, давайте разбираться по порядку, что нам делать в следующих случаях.

7.5.1. Функционирование Web Optimizer

Довольно часто приходится разбираться с тем, работает ли Web Optimizer на сайте или его установка каким-то образом не подключилась к обработке HTML-документа. Начиная с версии 0.5.2 это можно установить, найдя строку <title lang="wo"> в коде страницы (если метка там отсутствует, значит, Web Optimizer не отрабатывает).

Для более ранних версий это решение можно принять на основе отсутствия в коде HTML-документа отступов в начале строки, двойных переводов строк или наличия характерных закэшированных имен файлов в секции head(cache/1234a6789b.css или cache/1234c6789d.js, здесь 1234c6789d — произвольная строка в шестнадцатеричной записи).

Если обнаружить следы работы Web Optimizer не удалось, то необходимо перепроверить корректность вызовов Web Optimizer в файлах системы управления сайтом и, возможно, провести установку приложения еще раз — таким образом Web Optimizer сможет самостоятельно произвести все необходимые изменения.

Если нужно получить информацию о необходимых изменениях исходных файлов CMS, то следует в ходе установки отключить автоматическое изменение /index.php:

Изменение /index.php -> Включить автозапись -> Нет

и на последнем шаге зайти на вкладку "Необходимые изменения".

7.5.2. "Кракозябры" вместо сайта

Обычно это связано с двойным сжатием HTML-документа. Одно из сжатий может быть наложено самим Web Optimizer, а второе — как используемой системой управления сайтом, так и сервером.

Чтобы снять одно из накладываемых сжатий, можно отключить его либо в CMS, либо в конфигурации сервера, либо в самом Web Optimizer:

Настройки архивирования — Применить gzip для HTML — Нет

7.5.3. Белый экран вместо сайта

Основная проблема возникновения белого экрана (превышение лимита памяти при создании CSS Sprites) уже устранена в версии 0.5+, поэтому если у вас более старая версия, то стоит просто ее обновить.

Также стоит заглянуть в логи ошибок вашего сервера, чтобы узнать, что привело к такому состоянию. Обычно это помогает решить проблему.

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

Если все приведенные шаги не принесли результата, то можно попробовать отключить часть настроек Web Optimizer, чтобы понять, какие вещи ваш сервер может выполнить самостоятельно. Начать стоит с корневого набора ("Настройки сжатия" и "Настройки архивирования") для всех трех групп (CSS, JavaScript, HTML) действий по оптимизации и двигаться в сторону подключения более детальных параметров (например, "Включить внешние файлы", ""Вечное" кэширование" или "CSS Sprites").

7.5.4. Некорректный внешний вид

Это может быть причиной различных проблем, но для начала можно попробовать отключить CSS Sprites:

CSS Sprites - Применить CSS
Sprites - Нет

затем, если это не помогло ситуации, можно отключить data:URI:

Data:URI - Применить data:URI
- Нет

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

Если и после этого внешний вид сайта "разъехался", то стоит отклю- чить объединение стилей внутри <head>:

Включить внешние файлы - Включить объединение внешних CSS-файлов - Нет

или вообще минимизацию для CSS-файлов:

Настройки сжатия - Минимизировать и объединить CSS-файлы - Нет

Если есть желание разобраться в возникшей проблеме более детально, то можно при отключенном объединении стилей внутри <head> попробовать исключить файлы один за другим при помощи следующей настройки:

Включить внешние файлы - Исключить из объединения файлы - Список файлов через пробел

найти тот файл (или те файлы), которые обрабатываются некорректно, привести их к стандартному состоянию при помощи валидатора jigsaw.w3.org/css-validator/ и попробовать объединить снова.

7.5.5. Пропавшие или неправильные фоновые изображения

В некоторых случаях проблемы после установки Web Optimizer сводятся к тому, что некоторые фоновые изображения пропадают или "портятся". Для устранения этого набора проблем необходимо установить, с какими первоначальными фоновыми изображениями возникают трудности (используя любые средства для отладки верстки), и исключить эти изображения из процесса создания CSS Sprites:

CSS Sprites — Исключить из CSS Sprites файлы — Список файлов через пробел

Если данная мера не приносит результата, то CSS Sprites можно вообще выключить:

CSS Sprites — Применить CSS Sprites — Нет

7.5.6. Некорректное поведение сайта

Обычно это сводится к тому, что часть клиентской логики перестает отрабатывать. Нужно хорошо понимать, что если, например, форма для ввода комментариев у вас на сайте выводится при помощи JavaScript и после Web Optimizer она перестала выводиться, то это проблемы не внешнего вида, а клиентской логики.

Для локализации проблемы с клиентской логикой рекомендуется попробовать отключить минимизацию JavaScript-файлов:

Настройки сжатия — Минимизировать и объединить JavaScript-файлы — Нет

а потом (при сохранении проблемы) попробовать исключить один за другим отдельные файлы:

Включить внешние файлы - Исключить из объединения файлы - Список файлов через пробел

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

7.5.7. Недоступность файлов для пользователей

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

Использование .htaccess - Защитить установку Веб Оптимизатора с помощью htpasswd - Да

В этом случае директории кэширования нужно вынести из папки самого Web Optimizer (например, в корневую директорию cache, доступную на запись для веб-сервера) либо отключить защиту приложе ния:

Использование .htaccess - Защитить установку Веб Оптимизатора с помощью htpasswd - Нет

7.5.8. Отсутствие поддержки множественных хостов

Если требуется включить несколько параллельных хостов для ускорения загрузки статических ресурсов, то стоит выполнить следующие действия:

ServerAlias i1.site.ru
ServerAlias i2.site.ru

Множественные хосты - Доступные хосты - Название хостов через пробел

Множественные хосты - Включить параллельные хосты, например, i1 i2 - Да

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

7.5.9. Множественные хосты не сохраняются

Web Optimizer автоматически проверяет все введенные хосты на доступность, чтобы быть уверенным, что их можно использовать для параллельных загрузок. Вы можете отключить данную проверку (если в силу каких-либо причин она производится некорректно):

Множественные хосты - Автоматически проверять доступность хостов - Нет