Embed Size (px)
Citation preview
Это руководство содержит информацию об установке и настройке приложения Web
Optimizer. оно также поможет понять принципы работы всех используемых техник
оптимизации применяемых в Web Optimizer.
Web Optimizer автоматизирует все действия по улучшению клиентской составляющей
веб-сайта сайта, что приводит к существенному ускорению загрузки его страниц.
Проверенные временем решения с открытым кодом вместе с уникальными
инженерными находками объединяют все части процесса ускорения сайта, и теперь
вы можете провести его буквально в два клика.
Объединение внешнего и встроенного кода
Минимизация файлов
gzip-сжатие файлов
Клиентское кэширование
Серверное кэширование
Поддержка множественных хостов
Автоматическое создание CSS Sprites
Автоматическое применение Data:URI
Ненавязчивая загрузка JavaScript
и многое другое...
После того, как файлы кэша созданы, Web Optimizer тратит около 1-5 мс на разбор и
обновление HTML-документа (с настройками по умолчанию, опция вытягивания
HTML-документа в одну строку очень дорогостоящая процедура и может занимать
дополнительно 50-100 мс).
После ряда тестов на стандартных установках CMS Web Optimizer показал среднее
увеличение скорости загрузки страниц равное 250% от обычной скорости (и до 500% в
некоторых случаях). Если быть точным, сайты ускоряются в среднем в 2,5 раза
(+21 в оценке YSlow, -34% в размере, -43% в количестве внешних объектов).
Таблица ниже показывает насколько может увеличиться скорость загрузки веб-сайта
после установки Web Optimizer. Заметьте, что все CMS тестировались в идентичном
окружении при пропускной способности канала в ~100КБ/с с помощью браузера
Firefox 3.5. Веб-страницы загружались по нескольку раз для того, чтобы кэш прокси-
сервера был заполнен и для того, чтобы получить удовлетворительную статистику.
Локальный кэш очищался после каждой загрузки.
CMS YSlowВремя загрузки
(с)
Размер
(Кб)Объекты
До После До После До После До После
Bitrix 8.5.1 61 92 4.37 2.21 239 194 53 28
CMS Made Simple 74 96 0.483 0.375 49 35 15 5
cogear 1.0 76 91 5.11 1.57 447 129 11 9
DataLife Engine 8.0 65 91 4.48 1.29 147 120 43 16
Drupal 6.10 72 94 4.8 1.34 102 99 32 8
Etomite 1.1 89 96 0.874 0.477 19 14 7 6
ExpressionEngine
1.6.896 99 0.584 0.257 10 4 3 2
IPB 2.3.6 67 89 4.38 1.81 124 52 27 25
Joomla! 1.0.15 78 92 0.996 0.521 47 39 18 13
Joomla! 1.5.10 64 94 4.38 1.57 139 73 42 9
Joostina 1.2 63 91 8.07 3.77 426 333 45 17
Livestreet 0.3.1 51 96 10.87 1.97 298 111 48 5
MaxDev Pro 1.082 75 93 2.4 0.871 51 36 27 21
MaxSite 0.3.1 71 97 2.73 1.12 152 90 15 5
MODx 0.9.6.3 69 97 2.73 0.842 109 51 18 4
OpenSlaed 1.2 77 83 5.51 3.37 257 250 92 72
osCommerce 2.2 77 93 3.05 1.24 72 65 31 31
PHP-Nuke 8.0 * 72 91 2.785 1.272 181 91 19 19
phpBB 3.0.4 72 95 0.651 0.305 85 71 19 7
SMF 1.1.8 ** 61 91 2.68 1.72 183 132 63 25
Textpattern 4.0.8 92 97 1.26 0.823 8 5 4 4
UMI.CMS 2.7 58 93 4.52 2.89 269 177 59 10
vBulletin 3.8.3 70 92 3.33 1.81 124 67 20 14
Website Baker 2.6 77 95 1.51 0.47 17 12 10 8
Wordpress 2.7.1 72 95 4.58 2.08 133 125 31 6
Xaraya 1.1.5 81 97 1.79 0.78 35 16 8 4
XOOPS 2.3.3 72 95 3.22 1.53 65 50 21 8
* для PHP-Nuke был добавлен второй хост для статичных файлов
** для SMF 2 были добавлены два хоста для статичных файлов
Web Optimizer существует в двух версиях: демо-версии и полной версии. Таблица ниже
показывает различия между этими двумя версиями.
Аспекты технологии Демо-версия Полная версия
Процессорные затраты 20-100 мс 1-5 мс
Gzip-архивированиеэкономия до 65%
траффикаэкономия до 88% траффика
Клиентское
кэширование
экономия до 60%
траффикаэкономия до 85% траффика
Серверное
кэшированиеотсутствует
экономия до 90% процессорного
времени
CSS Sprites отсутствует экономия до 25% HTTP-запросов
Data:URI отсутствуетэкономия до 60%
HTTP-запросов
Множественные хосты отсутствует до 50% быстрее загрузка сайта
Ненавязчивый
JavaScriptотсутствует до 20% быстрее загрузка сайта
Техническая
поддержкаотсутствует 24/7
Обновление продукта бесплатно бесплатно
Цена бесплатно 1999 руб.
Все преимущества
экономия до 99,5%
процессорного времени,
экономия до 87% траффика,
экономия до 85%
HTTP-запросов,
до 70% быстрее загрузка сайта,
техническая поддержка 24/7
PHP 4.3+ или PHP 5+
Apache или IIS server с модулем mod_php, или Denwer, или любой другой сервер с
поддержкой CGI
16 Мб доступной памяти (64+ Мб желательно для корректного создания CSS
Sprites)
Желательно: наличие библиотеки curl (для загрузки внешних файлов)
Желательно: наличие библиотеки zlib (для возможности gzip-сжатия при
помощи PHP)
IE 5+
Firefox 2+
Safari 2+
Chrome
Opera 7+
Web Optimizer может быть установлен на любую CMS удовлетворяющую приведенным
выше требованиям, но он также имеет встроенную поддержку следующих CMS:
4images
Bitrix
CakePHP (1.2.3+)
CMS Made Simple (1.6+)
CodeIgniter (1.7+)
cogear (1.0+)
DataLife Engine (7.5+)
Drupal (5.x) в качестве плагина
Drupal (6.x) в качестве плагина
Etomite (1.1+)
ExpressionEngine (1.6.8+)
Invision Power Board (2.6+)
Joomla (1.0.x) в качестве плагина
Joomla (1.5.x) в качестве плагина
Joostina (1.2+)
Kohana (2.3+)
LiveStreet (0.2+)
MaxDev Pro (1.082+)
MaxSite (0.3+)
MODx (0.9+)
NetCat
Open Slaed (1.2+)
osCommerce (2.2+)
phpBB (3.0+)
PHP Nuke (8.0+)
Santafox (1.1+)
Simpla
Simple Machines Forum (1.1.8+)
Symfony (1.2+)
Textpattern (4.0+)
Typo3 (4.2+)
vBulletin (3.8.3+)
UMI.CMS (2.7+)
Website Baker (2.8+)
Wordpress (2.6+) в качестве плагина
Xayara (1.15+)
XOOPS (2.3.3+)
Yii (1.0+)
Zend Framework (с отключенным правилом перезаписи для Web Optimizer)
Web Optimizer просто установить на любой веб-сайт, отвечающий системным
требованиям. Существует два различных способа установки:
Установка в качестве отдельного приложения. Это наиболее распространенный
способ для большинства CMS.
Установка Web Optimizer в качестве плагина к одной из поддерживаемых CMS (эти
CMS отмечены в разделе системных требований). Установка в качестве плагина
подразумевает лучшую интеграцию и обеспечивает еще более высокое качество
оптимизации вместе с возможностью настройки Web Optimizer через привычный
интерфейс CMS.
В зависимости от способа, при помощи которого вы хотите установить Web Optimizer
существует несколько пошаговых инструкций:
Установка в качестве отдельного приложения
Установка плагина Joomla
Установка плагина WordPress
Установка плагина Drupal
Последнюю версию программного обеспечения можно загрузить на странице проекта
Web Optimizer (http://code.google.com/p/web-optimizator/downloads/list) .
Web Optimizer сообщает о выходе новой версии программного обеспечения. Если вы
решаете обновить Web Optimizer, все необходимые файлы загружаются и обновляются
автоматически. Список изменений публикуется на Web Optimizer странице проекта
(http://code.google.com/p/web-optimizator/) .
Web Optimizer поставляется в двух вариантах: ZIP-архив и мини-установщик. Для
загрузки первого варианта идем по адресу code.google.com/p/web-optimizator
/downloads/list (http://code.google.com/p/web-optimizator/downloads/list) и выбираем
Featured версию 0.5 или выше.
Загружаем ZIP-архив в корень сайта. Если к сайту есть SSH-доступ, то можно
использовать просто wget:
wget http://web-optimizator.googlecode.com/files/web-optimizer.v0.5.5.zip
Затем полученный архив нужно будет распаковать в корень, чтобы получилась папка
web-optimizer.
Если к сайту есть только FTP-доступ, то загружаем сначала на локальный диск, потом
распаковываем, а потом уже (например, через FAR) копируем в корень сайта.
При отсутствии желания загружать распакованный архив на сервер (или
распаковывать на сервере загруженный архив) есть версия мини-установщика,
который (при наличии curl на сервере) сам все загрузит и начнет установку. Для
этого нужно загрузить только файл install.me.php в корень сайта и открыть его в
браузере.
После того, как все необходимые файлы оказались на сайте, то нужно выставить права
на запись, как минимум, для файла web-optimizer/config.webo.php и (опционально)
папки web-optimizer/cache для пользователя, под которым работает сервер. Иначе
настройки и закэшированные версии сжатых файлов не смогут сохраниться. При
желании папка кэширования может быть другой (об этом чуть ниже), поэтому будет
необходимо только выставить права на конфигурационный файл.
Заходим в браузере по адресу
http://ваш_сайт/web-optimizer/index.php
Вместо web-optimizer может быть произвольная директория, в которой находится
Web Optimizer. Видим приветственный экран от Web Optimizer. Если не видим, то
стоит перепроверить, куда был скопирован Web Optimizer, а зайти именно в ту папку.
Здесь возможно 2 варианта развития событий:
Быстрая установка
Обычная установка
Ручная установка
Быстрая установка
Для начала быстрой установки вводим будущий логин и пароль доступа к
административной части и нажимаем зеленую кнопку "Быстрая установка". После
этого Web Optimizer вычисляет директории на сервере, сохраняет все настройки по
умолчанию и осуществляет цепочную оптимизацию для главной страницы: создает
закэшированные версии сжатых файлов. Только потом, если файлы (обычно только
корневой index.php, зависит от используемой CMS) доступны на запись, производится
их автоматическое изменение.
Иначе Web Optimizer выведет инструкции по изменению этих файлов.
Обычная установка
Обычная установка отличается от быстрой только наличием промежуточного шага с
редактированием настроек. Запустить ее можно, нажав по кнопке "Далее", цифре 2
или 3 в верхнем меню или оранжевой стрелочек справа.
Подробно все настройки и их особенности описаны в соответствующей статье. Прежде
всего нужно убедиться в том, что вычисленные пути являются правильными. Также
можно задать произвольные директории кэширования: это будет необходимо при
включении настройки "Защищенный режим" (находится в разделе "Использование
.htaccess"). После этой настройки пароль при доступе к Web Optimizer будет
запрашиваться только через HTTP Basic Authorization. Дополнительно вводить его не
потребуется. Однако файлы, которые находятся внутри папки с Web Optimizer, станут
не доступны обычным пользователям, поэтому директории кэширования нужно из
нее перенести.
Ручная установка
Вы можете установить Web Optimizer вручную на любую CMS или даже веб-сайт,
состоящий только из статичных HTML-страниц. Просто добавьте два вызова в начале и
в конце каждого файла, который отвечает за вывод веб-страницы (в большинстве
случаев это файл index.php и файлы *.html в случае сайтов из статичных
HTML-документов). Вызодвы должны быть следующими:
<?phprequire(/path/to/Web/Optimizer/web.optimizer.php);?>... первоначальное содержимое файла ...<?php$web_optimizer>finish();?>
Web Optimizer увеличивает серверную задержку всего на 5-10ms при работе в обычном
режиме (после того, как все файлы кэша созданы), но загрузка страниц клиентом
будет производиться существенно быстрее. Для сайтов на статичных
HTML-документах убедитесь что страницы с вызовами Web Optimizer обрабатываются
PHP-интерпретатором.
В Web Optimizer версии 0.5+ доступно несколько инструментов для управления
приложением.
Во-первых, это конфигурирование всех настроек (здесь и далее при работе не в
защищенном режиме нужно будет ввести логин и пароль), которое можно
осуществить по кнопке "Далее" (или клику по цифрам 2 или 3 или оранжевой
стрелочке справа). Во-вторых, это очистка кэша (будет необходимо, если вы провели
изменение каких-либо CSS- или JS-файлов на сервере при включенной настройке "Не
проверять время изменения файлов"). В-третьих, это возможность безболезненно
удалить Web Optimizer (будут удалены все добавленные в файлы CMS вызовы, а файл
.htaccess будет очищен от оптимизационных директив).
При наличии curl на сервере и существовании более новой версии, чем текущая,
будет предложено обновиться (появится блок с кнопкой "Обновить"). При обновлении
все исходные настройки будут сохранены. Также могут добавиться некоторые новые. В
обычном режиме панель администрирования для Web Optimizer выглядит следующим
образом:
Если во время установки Web Optimizer вы столкнулись с какими-то проблемами,
пожалуйста обратитесь к разделу Устранение неполадок и поддержка.
Перед установкой убедитесь в том, что в коренной директории веб-сайта существует
доступный для записи файл .htaccess или сама директория доступна для записи
(только если используется Apache).
Скопируйте web.optimizer.wordpress.php в директорию /wp-content/plugins/.1.
Сделайте директорию /wp-content/plugins/ доступной для записи для веб-сервера.2.
Убедитесь (при помощи раздела «Настройка» плагина Web Optimizer) в том, что
все директории и пути определены правильно.
3.
Включите Web Opimizer в разделе «Plugins» в WordPress.4.
Откройте веб-сайт. Первая загрузка займет примерно 10-100 (это время
потребуется для создания всех файлов кэша).
5.
Заметьте, что плагин Web Optimizer для WordPress требует полный пакет файлов Web
Optimizer. Он загружается автоматически при включении плагина. Если этого не
произошло наобходимо вручную установить полный пакет файлов Web Optimizer. Для
этого:
Загрузите полный пакет файлов (не Мини-Инсталятор), обычно он занимает
порядка 1 Мб и имеет имя файла web.optimizer.vX.X.X.zip (где X это цифры
версии).
1.
Распакуйте пакет в директорию /wp-content/plugins/. Должна получиться
следующая структура:
2.
plugins|__ web.optimizer.wordpress.php|__ web-optimizer. |__ cache. |__ controller. |__ ...
После создания приведенной структуры:
Создайте директорию web-optimizer/cache, и файл web-optimizer/config.webo.php
доступные для записи для веб-сервера.
1.
Включите плагин Web Optimizer в разделе «Plugins» в WordPress.2.
Пожалуйста убедитесь, что на веб-сайте не установлен Web Optimizer в качестве
отдельного приложения, а если установлен, — удалите его.
Чтобы увидеть результат оптимизации не забудьте очистить кэш в WP-Super-Cache,
Hyper Cache и любых других плагинах для кэширования. Вы также можете просто
отключить эти плагины. После настройки Web Optimizer вы можете снова включить
плагины для кэширования, HTML-документы будут сохранятся уже
оптимизированными.
Перед установкой убедитесь в том, что:
В коренной директории веб-сайта существует доступный для записи файл .htaccess
или сама директория доступна для записи (только если используется Apache).
Папка кэша Joomla! (/cache) доступна на запись.
Web Optimizer находится ПЕРЕД "System - Cache" в списке активных плагинов.
GZIP отключен в системной конфигурации Joomla!.
Откройте раздел Installers -> Mambots.1.
Установите мамбот Web Optimizer.2.
Включите его в разделе Mambots -> Site Mambots.3.
Откройте веб-сайт. Первая загрузка займет примерно 10-100 (это время
потребуется для создания всех файлов кэша).
4.
Настройте Web Optimizer в разделе Mambots -> Site Mambots -> Web Optimizer.5.
Откройте раздел Extensions -> Install/Uninstall.1.
Установите плагин Web Optimizer.2.
Включите его в разделе Extensions -> Plugin Manager.3.
Откройте веб-сайт. Первая загрузка займет примерно 10-100 (это время
потребуется для создания всех файлов кэша).
4.
Настройте Web Optimizer в разделе Extensions -> Plugin Manager -> System - Web
Optimizer.
5.
Серверное кэширование в Joomla! 1.5.x
В таблице ниже приведено время генерации контента (HTML) при различной
настройке кэширования
Cache
(настройка
Joomla)
System-Cache
(plugin)
Web
Optimizer
Web
Optimizer
Cache
JRETime
(мс)YSlow
Нет Нет Нет Нет Нет 315 65
Да Нет Нет Нет Нет 200 65
Да Нет Да Нет Нет 205 93
Да Да Да Нет Нет 115 93
Да Да Да Да Нет 115 93
Нет Нет Да Да Нет 95 93
Нет Нет Да Нет Да 63 93
Перед установкой убедитесь в том, что в коренной директории веб-сайта существует
доступный для записи файл .htaccess или сама директория доступна для записи
(только если используется Apache).
Скопируйте все файлы из архива в директорию /sites/all/modules/weboptimizer/.1.
Сделайте эту директорию доступной для записи для веб-сервера.2.
Чтобы сжатие осуществлялось наиболее эффективно пожалуйста отключите
использование gzip в Drupal.
3.
Включите плагин Web Opimizer в разделе Administer -> Site building -> Modules.4.
Откройте веб-сайт. Первая загрузка займет примерно 10-100 (это время
потребуется для создания всех файлов кэша).
5.
Ниже приведены все группы опций, использующихся для настройки Web Optimizer.
Ниже приведены все настройки и возможности, доступные в Web Optimizer 0.5.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 (http://smush.it/) . Для корректной оптимизации
изображений нужны права на запись для веб-сервера на сами изображения. Эта
настройка по умолчанию отключена, потому что оптимизировать изображения
имеет смысл всего один раз, и при последующих сборках CSS-файлов
использовать уже готовый результат.
Множественные хосты. Данная настройка позволяет включить распределение
изображений по статическим хостам. Каждому изображению всегда будет
соответствовать один хост (чтобы избежать забивания кэша одними и теми же
изображениями со всех доступных хостов). Для использования данного механизма
ускорения загрузки необходимо прописать в DNS все альтернативные хосты на тот
IP-адрес, который будет их обслуживать (обычно это текущий сайт) и добавить в
конфигурации сервера алиасы для основного сайта в виде этих хостов. Например:
ServerAlias i1.site.ruServerAlias 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 в произвольную директорию внутри сайта,
предварительно расположив директории кэширования вне защищенной области).
Логотип Веб Оптимизатора. На каждый сайт добавляется небольшая печать
«Accelerated with Web Optimizer» со ссылкой (закрытой через nofollow) на проект.
Доступно три вида печатей.
Автоматическое изменение /index.php. Web Optimizer поддерживает
автоматическое изменение необходимых для корректной работы файлов для
нескольких десятков CMS (в случае неизвестной системы ее название выводится
как CMS 42, и изменяется всегда корневой index.php). Перед автоматическим
изменением файла запускается цепочная оптимизация сайта, чтобы создать все
кэширующие файлы и избежать длительной загрузки главной страницы сайта в
первый раз.
Далее приведен список рекомендуемых действий по ручной настройке Web Optimizer.
Подключение общего(-их) JavaScript- или CSS-файла(-ов) на всех
страницах. Достаточно часто мы можем вставить на все страницы какую-то
общую JavaScript-библиотеку или таблицу стилей, нужную для всего сайта. Для
того чтобы Web Optimizer не пытался объединить этот общий файл со всеми
остальными, можно исключить его в конфигурации:
Включить внешние JavaScript-файлы и встроенный код > Исключить изобъединения файлы > список файлов через запятую
Склейка HTML в одну строку. Как уже было описано выше, Web Optimizer
может "слеить" весь выводимый HTML в одну строку. Для этого нужно включить
Настройки сжатия > Сжать HTML до 1 строки > да
Настройки сжатия > Удалить HTML-комментарии > да
Стоит сразу отметить, что данные настройки вносят дополнительную нагрузку на
сервер (корректное регулярное выражение достаточно ресурсоемко) и могут
привести к вырезанию некоторого JavaScript-кода (который вставляется через
комментарии). Также код внутри script, textarea, pre изменяться не будет (в
соответствии со спецификацией). Поэтому использовать данные настройки нужно
с большой осторожностью.
Оптимизация изображений через smush.it (http://smush.it/) . Сервис
smush.it разработан инженерами Yahoo! и Google и позволяет оптимизировать
размер фоновых изображений в автоматическом режиме. Подключить
оптимизацию изображений можно через библиотеку CSS Sprites:
<?phprequire('/полный/путь/до/css.sprites.php');$smushit = new css_sprites();$smushit->smushit('/полный/путь/до/изображения');?>
в результате вместо изображения (при наличии прав на его изменение) мы
получим его оптимизированную копию. Лучше проводить не на группе рабочих
изображениях, а на их копиях, чтобы была возможность откатить изменения.
Безопасная установка. Web Optimizer может быть установлен в произвольную
директорию (внутри сайта) и защищен с помощью пароля через htpasswd. Для
этого нужно включить:
Использование .htaccess -> Защитить установку Веб Оптимизатора спомощью htpasswd -> да
При этом нужно убедиться, чтобы Директории кэширования были расположены
вне папки с самим Web Optimizer (иначе все развалится для всех посетителей
сайта кроме вас самих).
Чтобы достичь наилучшего результата после оптимизации требуется хорошее
понимание всех техник и принципов оптимизации.
В следующих разделах вы узнаете о том, каким образом Web Optimizer интегрируется с
любой CMS и даже сайтами из статичных HTML-документов, как он выполняет все
действия по оптимизации и даже то, как вы можете расширить функциональность Web
Optimizer, дополнив его собственным расширением, API для расширений:
Интеграция с веб-сайтом
Алгоритм оптимизации
API для расширений
Web Optimizer может быть интегрирован на сайт при помощи нескольких подходов:
Подход с использованием буфера
Прямой подход
Комплексный подход
Это наиболее стандартный путь использования Web Optimizer. Самый первый вызов (с
require общей библиотеки) заканчивается вызовом ob_start(). Затем все содержимое
сайта, которое выводится (это может быть как простой вызов echo $content, так и
сотни небольших echo 'несколько тегов') будет буферизоваться до следующего
вызова Web Optimizer. Второй (и последний) вызов $web_optimizer->finish();
заканчивает буферизацию с ob_get_clean(). Затем весь контент (HTML-документ)
анализируется и возвращается в оптимизированном виде. Обычно в коде это выглядит
следуюим образом:
require('.../web.optimizer.php');...echo ......echo ......$web_optimizer->finish();
Замечено несколько проблем, связанных с PHP-буферизацией различными
подсистемами сайта, поэтому данный подход работает не всегда. Но обычно его можно
использовать для любого сайта.
В версии 0.5.9 появилась возможность анализировать HTML-содержимое без
какой-либо буферизации. Для этого необходимо добавить следующие строки кода:
$not_buffered = 1;require('.../web.optimizer.php');$content = $web_optimizer->finish($content);
как мы видим, нужно передать Web Optimizer содержимое для анализа, а затем Web
Optimizer вернет уже уже оптимизированным. Этот подход также можно использовать,
если требуется интегрировать приложение в процесс оптимизации по расписанию:
здесь не происходит никакой буферизации.
Оба подхода могут быть использованы вместе. Хорошим примером этого является
интеграция вызовов Web Optimizer в плагин для Wordpress:
/* основная функция для вызова на каждой странице */function web_optimizer_init() { ob_start('web_optimizer_shutdown');}/* оборачивает выходной поток в процесс оптимизации */function web_optimizer_shutdown ($content) { $not_buffered = 1; require(dirname(__FILE__) . '/web-optimizer/web.optimizer.php'); return $web_optimizer->finish($content);}/* добавляем эту функци в соответствующий хук */add_action('plugins_loaded', 'web_optimizer_init');
Подход с использованием буффера применен в функции web_optimizer_init, где
буфферизация инициализируется и откладывается до тех пор пока веб-страница не
будет готова к отправке браузеру. В то же время функция web_optimizer_shutdown
реализует прямой подход и возвращает оптимизированное содержимое после
единственного вызова Web Optimizer.
Изменения в файлах исходных кодов
После установки Web Optimizer добавляет несколько строк кода в ряд файлов (зависит
от CMS) которые отвечают за вывод HTML. В большинстве случаев изменяется только
файл index.php.
Обратите внимание, что при автоматической установке создаются резервные копии
всех изменяемых файлов. Таким образом вы всегда сможете узнать о произошедших
изменениях и восстановить исходные версии файлов. Файлам резервных копий
присваивается расширение .backup. Например, резервная копия файла index.php
после установки будет иметь имя index.php.backup.
Изменения в .htaccess
Если включена опция поддержки .htaccess, Web Optimizater автоматически создает
файл .htaccess (или изменяет его, если он уже существовал) для того, чтобы
реализовать необходимые действия по оптимизации. Возможные изменения описаны
ниже.
mod_expires – all cached headers
ExpiresActive OnExpiresDefault \"access plus 10 years\"<FilesMatch .*\.(php|phtml|shtml|html|xml)$> ExpiresActive Off</FilesMatch>
Если не требуется кэшировать CSS-файлы
<FilesMatch .*\.css$> ExpiresActive Off</FilesMatch>
Если не требуется кэшировать JavaScript-файлы
<FilesMatch .*\.js$>
ExpiresActive Off</FilesMatch>
Если не требуется кэшировать другие статические ресурсы
<FilesMatch .*\.(bmp|png|gif|jpe?g|ico|swf|flv|pdf)$> ExpiresActive Off</FilesMatch>
mod_deflate + mod_filter (если отсутствует mod_gzip) – вся
логика архивирования
AddOutputFilterByType DEFLATE text/htmlAddOutputFilterByType DEFLATE text/xmlAddOutputFilterByType DEFLATE image/x-icon
gzip для CSS-файлов
AddOutputFilterByType DEFLATE text/css
gzip для JavaScript-файлов
AddOutputFilterByType DEFLATE text/javascriptAddOutputFilterByType DEFLATE application/javascriptAddOutputFilterByType DEFLATE application/x-javascriptAddOutputFilterByType DEFLATE text/x-jsAddOutputFilterByType DEFLATE text/ecmascriptAddOutputFilterByType DEFLATE application/ecmascriptAddOutputFilterByType DEFLATE text/vbscriptAddOutputFilterByType DEFLATE text/fluffscript
mod_gzip – для логика gzip-сжатия, если mod_deflate отсутствует
Включаем модуль gzip
mod_gzip_on Yesmod_gzip_can_negotiate Yesmod_gzip_static_suffix .gzAddEncoding gzip .gzmod_gzip_update_static Nomod_gzip_keep_workfiles Nomod_gzip_minimum_file_size 500mod_gzip_maximum_file_size 5000000mod_gzip_maximum_inmem_size 60000mod_gzip_min_http 1000mod_gzip_handle_methods GET POSTmod_gzip_item_exclude reqheader \"User-agent: Mozilla/4.0[678]\"mod_gzip_dechunk No
Добавляем gzip для страницы
mod_gzip_item_include mime ^text/html$mod_gzip_item_include mime ^text/plain$mod_gzip_item_include mime ^image/x-icon$mod_gzip_item_include mime ^httpd/unix-directory$
Добавляем gzip для CSS-файлов
mod_gzip_item_include mime ^text/css$
Добавляем gzip для JavaScript-файлов
mod_gzip_item_include mime ^text/javascript$mod_gzip_item_include mime ^application/javascript$
mod_gzip_item_include mime ^application/x-javascript$mod_gzip_item_include mime ^text/x-js$mod_gzip_item_include mime ^text/ecmascript$mod_gzip_item_include mime ^application/ecmascript$mod_gzip_item_include mime ^text/vbscript$mod_gzip_item_include mime ^text/fluffscript$
mod_headers – для предохранения прокси-серверов от gzip и
корректного выставления условного кэширования
Отменяем кэширование для архивов на прокси-серверах
<FilesMatch .*\.(css|js|php|phtml|shtml|html|xml)$> Header append Vary User-Agent Header append Cache-Control private</FilesMatch>
Отменяем заголовок Last-Modified (и добавляем вместо него ETag)
<FilesMatch \"\\.(ico|pdf|flv|swf|jpe?g|png|gif|bmp|js|css)$\"> Header unset Last-Modified FileETag MTime</FilesMatch>
mod_setenvif – для предохранения старых браузеров от gzip
Иключаем браузеры, которые некорректно обходятся с gzip
BrowserMatch ^Mozilla/4 gzip-only-text/htmlBrowserMatch ^Mozilla/4\.0[678] no-gzipBrowserMatch \bMSIE !no-gzip !gzip-only-text/html
mod_rewrite + mod_mime (в дополнение к mod_deflate или
mod_gzip) -- для статического архивирования CSS- и JS- файлов
Добавляем кодировку для статических архивов
AddEncoding gzip .gz
Добавляем редиректы на физические файлы (имена файлов выставляются по времени
их изменения, чтобы корректно сбрасывать кэш на клиенте)
RewriteRule ^(.*)\.wo[0-9]+\.(css|php)$ $1.$2RewriteRule ^(.*)\.wo[0-9]+\.(js|php)$ $1.$2
Добавляем статическое архивирование для CSS-файлов
RewriteCond %{HTTP:Accept-encoding} gzipRewriteCond %{HTTP_USER_AGENT} !KonquerorRewriteCond %{REQUEST_FILENAME}.gz -fRewriteRule ^(.*)\.css$ $1.css.gz [QSA,L]
Добавляем статическое архивирование для JavaScript-файлов
RewriteCond %{HTTP:Accept-encoding} gzipRewriteCond %{HTTP_USER_AGENT} !KonquerorRewriteCond %{REQUEST_FILENAME}.gz -fRewriteRule ^(.*)\.js$ $1.js.gz [QSA,L]
Оптимизация по расписанию. Уже сейчас Web Optimizer может быть встроен
в схему публикации произвольного сайта в "статическом" режиме. Для этого
необходимо открыть все страницы сайта с установленным Web Optimizer, а потом
просто скопировать выведенный HTML и кэширующие директории.
Предположим, что Web Optimizer установлен на dev.site.ru. Запустив,
например, wget мы получим оптимизированный "слепок" сайта, который можно
загрузить уже в рабочую систему.
wget -d -r -c http://dev.site.ru/
Первоначальный разбор HTML-документа
Анализируется секция Head:
тэги <script>.
тэги <style> и тэги <link>.
Выбирается содержимое JS-сценариев.
Для содержимого head-секции и (всего набора скриптов) выполняем 3 функции
(для каждой группы преобразований) — для страницы, CSS и JavaScript.
Разбор скриптов и стилей и запись их в массив
Если у элемента есть src и href, значит, он содержит вызов внешнего файла.
Внутренний код сразу записывается в содержимое элемента.
Полное содержимое файлов по умолчанию выбирается, только если отключена
настройка "Не проверять время изменения файлов".
Вычисляем имя файла. Если такое файл уже существует, то больше ничего не
делаем, а просто удалем текущие стили и скрипты из head-секции и вносим туда
вызовы для двух новых файлов.
Если подключена "ненавязчивая" загрузка JavaScript, то располагаем вызовы
JavaScript-файлов перед </body>.
Если объединяем внешние скрипты и внутренний код, то располагаем
финальный JavaScript-файл перед </head>.
Если внутренний код и внешние скрипты не включаем, то JavaScript-файл будет
расположен сразу после CSS-файла.
Располагаем CSS-файл сразу за <head>, чтобы он загружался максимально быстро.
Если у нас нет еще файлов в кэше и у нас включена настройка "Не проверять
время изменения файлов", то содержимое файлов выбирается (чтобы создать
файлы в кэше).
Для JavaScript
Ввсе объединенное содержимое прогоняется через JSMin / Packer или YUI
Compressor.
Если сжатие или кэширование осуществляется не через .htacess, то формируем
.php файл со всеми необходимыми gzip или кэширующими заголовками.
Для CSS
CSS-файлы объединяются с учетом всех конструкций @import (рекурсивно).
К ним применяется CSS Tidy (если используются CSS Sprites или data:URI).
Иначе просто накладываются простейшие регулярные выражения для
уменьшения размера CSS-содержимого.
Если сжатие или кэширование осуществляется не через .htacess, то формируем
.php файл со всеми необходимыми gzip или кэширующими заголовками.
Для CSS Sprites
CSS Tidy анализирует изначальный объединенный массив CSS-файл и формирует
хэш CSS-правил.
CSS-правила анализируются на предмет наличия в них фоновых свойств
(background, background-position, background-image, background-repeat).
Дополнительно CSS-правила анализируются на предмет свойств, определяюших
размер элемента (width, height, padding). Также пытаемся проанализировать
CSS-селектор на наличие псевдо-вариантов (например, :hover, :link и т.д. – все по
спецификации CSS3) и выяснить наследуюмые свойства.
Если у нас есть CSS-изображение с множественным background-position, то оно
исключается (по-видимому, относится к уже готовому CSS Sprite).
Если у нас есть background-repeat: repeat, то также исключаем.
Если у нас есть background-repeat: repeat-x, и не задана высота (или задана в
относительных единицах), то помечаем это изображение как repeat-xl (для
включения одного такого изображения в самый низ к группе repeat-x).
Если у нас есть background-repeat: repeat-x, и задана высота, то помечаем
изображение как repeat-x.
Если у нас есть background-repeat: repeat-y, и не задана ширина (или задана в
относительных единицах), то помечаем это изображение как repeat-yl (для
включения одного такого изображения в самый низ к группе repeat-y).
Если у нас есть background-repeat: repeat-y, и задана ширина, то помечаем
изображение как repeat-y.
Если у нас есть background-position: bottom и background-repeat: no-repeat, то
помечаем изображение как no-repeatb.
Если у нас есть background-position: right и background-repeat: no-repeat, то
помечаем изображение как no-repeatr.
Если у нас есть background-repeat: no-repeat, и не задана ширина или высота
элемента (или задана в относительных единицах), и background-position не right
или bottom, то помечаем это изображение как no-repeati (для объединения как
инонок - лесенкой).
Если у нас есть background-repeat: no-repeat, и задана высота и ширина элемента,
и background-position не right или bottom, то помечаем изображение как no-repeat.
Если не можем определить ни одного из указаных случаев (например, background-
position : none), то исключаем изображение.
Выясняем геометрические размеры файла изображения. Запоминаем исходное
положение (background-position), увеличиваем размеры элемента на величину
отступов (padding). Размеры элемента (из CSS-правил) запоминаем для
вычисления исходного сдвига (всего 3 пары чисел: позиция фона, размеры
изображения и возможный запас по размеру элемента).
Объединяем все изображения согласно их типам. Для repeat-x и repeat-y ищем
небольшие картинки no-repeat и располагаем их в начале файлов. В конце файлов
располагаем 1 изображение repeat-xl или repeat-yl. No-repeatb объединяются
"приклеенными" к низу, а no-repeatr – к правому краю итогового изображения.
Остаются только группы изображений no-repeat и no-repeati.
Для изображений no-repeat вычисляем итоговое расположение (используя
двумерную матрицу, простой алгоритм свободного места).
После создания этого спрайта всталвяем в него изображения no-repeati (лесенкой,
учитывая свободное место).
Вставляем в это изображение уже подготовленные файлы no-repeatb (расширяя
левый нижний угол) и no-repeatr (расширяя правый верхний угол).
CSS-правила обновлятся с учетом новых изображений и новых позиций. Неколько
CSS-селекторов для одного изображеия объединяются в одно правило (для
оптимизации data:URI преобразования).
Итоговые имена файлов формируются при помощи md5-хэша на основе всех
CSS-правил, участвующих в образовании CSS Sprites. Перед созданием
изображений проверяется их существование.
Вызываем оптимизацию с smush.it для уменьшения размера итоговых
изображений CSS Sprites.
Если у на не получилось создать изображение CSS Spirtes (ошибка GDlib?), тогда
возвращаем исходные CSS-правила для селекторов.
Применяем data:URI (через хэш CSS-правил).
API для расширений предназначено помочь разработчикам внедрить некоторые
автоматические действия по оптимизации системы управления сайтом (как на
клиентском, так и на серверном уровне) в процесс установки Web Optimizer.
Сейчас доступны следующие вызовы:
onInstall - действия, которые будут применены при установке Web Optimizer.
onUninstall - действия, который будут применены при удалении Web Optimizer.
beforeOptionization (еще не готово) - действия, которые будут применены перед
проведением клиентской оптимизации.
afterOptimization (еще не готово) - действия, которые будут применены после
проведения клиентской оптимизации.
Ниже приведен шаблон для файла расширения Web Optimizer:
<?phpif (!class_exists('web_optimizer_plugin_joomla15')) {/* Начинаем объявление класса */ class web_optimizer_plugin_your_cms_here {
/* Конструктор, фактически не используется */ function web_optimizer_plugin_your_cms_here() {
}
/* Установщик */ function onInstall ($root) {/* Здесь можно использовать $root для операций с локальными файлами сайта*/ }
/* Мастер по удалению */ function onUninstall ($root) {/* Здесь можно использовать $root для операций с локальными файлами сайта*/ }
/* пред-оптимизационные действия */ function beforeOptimization ($content) {/* В $content находится текущее содержимое веб-страницы */ return $content; }
/* пост-оптимизационные действия */ function afterOptimization ($content) {/* В $content находится оптимизированное содержимое веб-страницы */ return $content; }
}/* Заканчиваем объявление класса */}
$web_optimizer_plugin = new web_optimizer_plugin_your_cms_here();?>
Рабочий пример для Joomla! 1.5.xx (http://code.google.com/p/web-optimizator/source
/browse/trunk/plugins/joomla15.php)
Что нужно сделать для внедрения вашего расширения:
Разместить файл расширения (PHP-файл) в директории plugins установки Web
Optimizer.
Добавить имя файла (без .php) вашег орасширения в config.webo.php (настройка
['plugins'], самая последняя).
Запустить установку.
Стоит отметить, что Web Optimizer пытается автоматически определить расширения,
основываясь на данных о текущей CMS. Например, для Drupal вы можете расположить
файлы drupal61.php или drupal56.php в директории plugins, и Web Optimizer
автоматически подключит их в процессе установки и добавит в config.webo.php.
Используйте дополнение Firebug для Firefox (или аналогичные средства), чтобы
просматривать код веб-страниц, диаграммы загрузки объектов веб-страниц, заголовки
запросов серверу и ответов от него. Эта сведения помогут вам получить максимум
информации о работе Web Optimizer на вашем сайте.
Если вы столкнулись с проблемой во время установки или работы с Web Optimizer,
обратитесь к следующим разделам:
Проблемы при установке
Проблемы на стороне клиента
Проблемы на стороне сервера
Если ни один из этих разделов не помог решить вашу проблему пожалуйста
обратитесь к разделу technical технической поддержки.
Довольно часто приходится разобраться с тем, работает ли Web Optimizer на сайте, или
его установка каким-то образом не подключилась к обработке HTML-документа.
Начиная с версии 0.5.2 это можно установить, найдя строку
Для более ранних версий это решение можно принять на основе отсутствия в коде
HTML-документа отступов в начале строки, двойных переводов строк или наличия
характерных закэшированных имен файлов в head-секции (cache/1234a6789b.css или
cache/1234c6789d.js, здесь 1234c6789d — произвольная строка в шестнадцатеричной
записи).
Если обнаружить следы работы Web Optimizer не удалось, то необходимо
перепроверить корректность вызовов Web Optimizer в файлах системы управления
сайтом и, возможно, провести установку приложения еще раз — таким образом Web
Optimizer сможет самостоятельно произвести все необходимые изменения.
Если нужно получить информацию о необходимых изменениях исходных файлов
CMS, то следует в ходе установки отключить автоматическое изменение /index.php:
Изменение /index.php -> Включить авто-запись -> Нет
и на последнем шаге зайти на вкладку «Необходимые изменения».
Обычно это связано с двойным сжатием HTML-документа. Одно из сжатий может
быть наложено самим Web Optimizer, а второе — как используемой системой
управления сайтом, так и сервером.
Чтобы снять одно из накладываемых сжатий, можно отключить его либо в CMS, либо в
конфигурации сервера, либо в самом Web Optimizer:
Настройки архивирования -> Применить gzip для HTML -> Нет
Основная проблема возникновения белого экрана (превышение лимита памяти при
создании CSS Sprites) уже устранена в версии 0.5+, поэтому если у вас более старая
версия, то стоит просто ее обновить.
Также стоит заглянуть в логи ошибок вашего сервера, чтобы узнать, что привело к
такому состоянию. Обычно это помогает решить проблему.
В некоторых случаях белый экран возникает из-за некорректной установки
приложения либо двойного сжатия. Как решить эти проблемы, описано чуть выше.
Если все приведенные шаги не принесли результата, то можно попробовать
отключить часть настроек Web Optimizer, чтобы понять, какие вещи ваш сервер может
выполнить самостоятельно. Начать стоит с корневого набора («Настройки сжатия» и
«Настройки архивирования») для всех трех групп (CSS, JavaScript, HTML) действий по
оптимизации и двигаться в сторону подключения более детальных параметров
(например, «Включить внешние файлы», «Вечное» кэширование» или «CSS Sprites»).
Это может быть причиной различных проблем, но для начала можно попробовать
отключить 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/
(http://jigsaw.w3.org/css-validator/) и попробовать объединить снова.
В некоторых случаях проблемы после установки Web Optimizer сводятся к тому, что
некоторые фоновые изображения пропадают или «портятся». Для решения этого
набор проблем необходимо установить, с какими первоначальными фоновыми
изображениями возникают трудности (используя любые средства для отладки
верстки) и исключить эти изображения из процесса создания CSS Sprites:
CSS Sprites -> Исключить из CSS Sprites файлы -> Список файлов черезпробел
Если данная мера не приносит результата, то CSS Sprites можно вообще выключить:
CSS Sprites -> Применить CSS Sprites -> Нет
Обычно это сводится к тому, что часть клиентской логики перестает отрабатывать.
Нужно хорошо понимать, что если, например, форма для ввода комментариев у вас на
сайте выводится при помощи JavaScript, и после Web Optimizer она перестала
выводиться, то это проблемы не внешнего вида, а клиентской логики.
Для локализации проблемы с клиентской логикой рекомендуется попробовать
отключить минимизацию JavaScript-файлов:
Настройки сжатия -> Минимизировать и объединить JavaScript-файлы -> Нет
а потом (при сохранении проблемы) попробовать исключить один за другим
отдельные файлы:
Включить внешние файлы -> Исключить из объединения файлы -> Список файловчерез пробел
При установлении имени файла, на котором объединение отказывает, можно просто
его исключить из общего пакета либо попытаться настроить его корректное
включение в первоначальную логику (обычно ошибки происходят из-за
некорректного синтаксиса исходных файлов, которые не конфликтуют внутри одного
окружения-файла, но начинают конфликтовать при объединении этих окружений).
Иногда возникают проблемы с отображением и функционированием сайта у всех
пользователей, хотя у владельца сайта (в его браузере) при этом все хорошо. Если
диагноз проблемы звучит подобным образом, то нужно проверить, по какому адресу
находятся директории кэширования, сам Web Optimizer и включена ли защита Web
Optimizer от внешнего доступа:
Использование .htaccess -> Защитить установку Веб Оптимизатора с помощьюhtpasswd -> Да
В этом случае директории кэширования нужно вынести из папки самого Web
Optimizer (например, в корневую директорию cache, доступную на запись для
веб-сервера) либо отключить защиту приложения:
Использование .htaccess -> Защитить установку Веб Оптимизатора с помощьюhtpasswd -> Нет
Если требуется включить несколько параллельных хостов для ускорения загрузки
статических ресурсов, то стоит проверить следующие моменты:
* Наличие поддержки этих хостов в DNS. Для этого нужно сделать соответствующие
этим хостам записи в вашей DNS-зоне, указывающие на требуемый IP-адрес (обычно
тот же, что и у текущего сайта).
* Включить поддержку этих хостов на уровне самого сервера. Для Apache это делается
директивой ServerAlias, например:
ServerAlias i1.site.comServerAlias i2.site.com
* Проверить, что эти хосты зеркалируют основной сайт. Для этого нужно взять адрес
любого статического объекта на сайте (например, site.com/images/my.png) и
попробовать его открыть через все дополнительные хосты (i1.site.com/images/my.png).
При наличии каких-либо проблем необходимо повторить предыдущие шаги.
* Добавить указанные хосты в конфигурацию Web Optimizer
Множественные хосты -> Доступные хосты -> Название хостов через пробел
* и включить поддержку множественных хостов
Множественные хосты -> Включить параллельные хосты, например, i1 i2 -> Да
Web Optimizer автоматически проверяет несколько наиболее распространенных хостов
и последняя настройка может и не потребоваться.
После описанных действий все изображения на сайте будут отдаваться через
несколько хостов, что существенно ускорит загрузку каждой страницы.
Web Optimizer автоматически проверяет все введенные хосты на доступность, чтобы
быть уверенным, что их можно использовать для параллельных загрузок. Вы можете
отключить данную проверку (если в силу каких-либо причин она производится
некорректно):
Множественные хосты -> Автоматически проверять доступность хостов -> Нет
В этом случае можно использовать цепочную оптимизацию:
Загружаем главную страницу сайта (в виде простого HTML) в кэширующую
директорию и сохраняем в файле compressing.php.
Вставляем в файл compressing.php вызовы Web Optimizer.
Перенаправляем пользователя на страницу compressing.php со специфическим
GET-параметром (web_optimizer_stage).
Файл compressing.php перенаправляет сам на себя перед созданием CSS Sprites,
после п.16 в логике создания CSS Spites (repeat-x, repeat-y, no-repeatb, no-repeatr),
после создания всех CSS Sprites и после включения data:URI в файл стилей (всего
5 редиректов).
Удаляем файл compressing.php.
Обновляем текущий index.php (при этом все необходимые файлы в кэше для
отображения главной страницы уже присутствуют).
Пожалуйста попробуйте решить вашу проблему при помощи раздела устранение
неполадок.
Если ваша проблема не описана в этом разделе попробуйте найти вашу проблему
(http://code.google.com/p/web-optimizator/issues/advsearch) в списке задач проекта
(http://code.google.com/p/web-optimizator/issues/list?can=1&cells=tiles) . Скорее всего
ваша проблема уже известна и будет решена в одном из ближайших обновлений. Если
вы не нашли описание вашей проблемы и там, сообщите нам о ней при помощи
формы создания новой задачи (http://code.google.com/p/web-optimizator/issues/entry)
(Необходима учетная запись Google). Все важные проблемы обычно решаются в
течение суток (а часто в течение нескольких часов). Пожалуйста, создавайте
отдельные задачи по каждой отдельной проблеме.
Пользователи, обладающие полной версией Web Optimizer обладают приоритетной
поддержкой в режиме 24/7 и они могут решить любые проблемы с Web Optimizer в
интерактивном используя нашу контактную информацию (http://www.web-
optimizer.us/about/contacts.html) .
