Page 1


Это руководство содержит информацию об установке и настройке приложения 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

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.8 96 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

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

XOOPS 2.3.3

72 95

3.22

1.53

65

50

21 8

* для PHP-Nuke был добавлен второй хост для статичных файлов ** для SMF 2 были добавлены два хоста для статичных файлов

9

4

4


Web Optimizer существует в трех версиях: некоммерческой, облегченной и полной версиях. Таблица ниже показывает различия между этими версиями. Аспекты технологии

Некоммерческая Облегченная версия версия

Полная версия

Процессорные затраты

20-100 мс

10-50 мс

1-5 мс

Ускорение

до 100%

до 200%

до 500% и больше

Gzip-архивирование

экономия до 65% трафика

экономия до 65% трафика

экономия до 88% трафика

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

экономия до 40% трафика

экономия до 60% трафика

экономия до 85% трафика

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

отсутствует

отсутствует

экономия до 90% процессорного времени

CSS Sprites

отсутствует

отсутствует

экономия до 25% HTTP-запросов

Data:URI

отсутствует

экономия до 60% HTTP-запросов

экономия до 60% HTTP-запросов

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

отсутствует

отсутствует

до 200% быстрее загрузка сайта

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

отсутствует

отсутствует

до 100% быстрее загрузка сайта

Техническая поддержка

отсутствует

отсутствует

24/7

Обновление продукта

бесплатно

бесплатно

бесплатно

Цена

бесплатно

399 руб.

1999 руб.

экономия до 15% процессорного времени, экономия до 50% трафика, экономия до 60% HTTP-запросов, до 200% быстрее загрузка сайта

экономия до 99,5% процессорного времени, экономия до 87% трафика, экономия до 85% HTTP-запросов, до 400% быстрее загрузка сайта, техническая поддержка 24/7

Все преимущества


PHP 4.3+ или PHP 5+ Apache или IIS server с модулем mod_php, или Denwer, или любой другой сервер с поддержкой CGI 16 Мб доступной памяти (64+ Мб желательно для корректного создания CSS Sprites) Желательно: наличие библиотеки curl (для загрузки внешних файлов) Желательно: наличие библиотеки zlib (для возможности gzip-сжатия при помощи PHP) Желательно: наличие библиотеки gd (для CSS Sprites)

IE 5+ Firefox 2+ Safari 2+ Chrome Opera 7+

Web Optimizer может быть установлен на любую CMS удовлетворяющую приведенным выше требованиям, но он также имеет встроенную поддержку следующих CMS: 4images Bitrix (8.5+) 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+) Geeklog (1.6+) 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+) VaM Shop (1.5.5+) 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-документов). Вызодвы должны быть следующими: <?php require(/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). 1. Скопируйте web.optimizer.wordpress.php в директорию /wp-content/plugins/. 2. Сделайте директорию /wp-content/plugins/ доступной для записи для веб-сервера. 3. Убедитесь (при помощи раздела «Настройка» плагина Web Optimizer) в том, что все директории и пути определены правильно. 4. Включите Web Opimizer в разделе «Plugins» в WordPress. 5. Откройте веб-сайт. Первая загрузка займет примерно 10-100 (это время потребуется для создания всех файлов кэша). Заметьте, что плагин Web Optimizer для WordPress требует полный пакет файлов Web Optimizer. Он загружается автоматически при включении плагина. Если этого не произошло наобходимо вручную установить полный пакет файлов Web Optimizer. Для этого: 1. Загрузите полный пакет файлов (не Мини-Инсталятор), обычно он занимает порядка 1 Мб и имеет имя файла web.optimizer.vX.X.X.zip (где X это цифры версии). 2. Распакуйте пакет в директорию /wp-content/plugins/. Должна получиться следующая структура: plugins |__ web.optimizer.wordpress.php |__ web-optimizer . |__ cache . |__ controller . |__ ...

После создания приведенной структуры: 1. Создайте директорию web-optimizer/cache, и файл web-optimizer/config.webo.php доступные для записи для веб-сервера. 2. Включите плагин Web Optimizer в разделе «Plugins» в WordPress. Пожалуйста убедитесь, что на веб-сайте не установлен Web Optimizer в качестве отдельного приложения, а если установлен, — удалите его. Чтобы увидеть результат оптимизации не забудьте очистить кэш в WP-Super-Cache, Hyper Cache и любых других плагинах для кэширования. Вы также можете просто отключить эти плагины. После настройки Web Optimizer вы можете снова включить плагины для кэширования, HTML-документы будут сохранятся уже оптимизированными.


Перед установкой убедитесь в том, что: В коренной директории веб-сайта существует доступный для записи файл .htaccess или сама директория доступна для записи (только если используется Apache). Папка кэша Joomla! (/cache) доступна на запись. Web Optimizer находится ПЕРЕД "System - Cache" в списке активных плагинов. GZIP отключен в системной конфигурации Joomla!.

1. 2. 3. 4.

Откройте раздел Installers -> Mambots. Установите мамбот Web Optimizer. Включите его в разделе Mambots -> Site Mambots. Откройте веб-сайт. Первая загрузка займет примерно 10-100 (это время потребуется для создания всех файлов кэша). 5. Настройте Web Optimizer в разделе Mambots -> Site Mambots -> Web Optimizer.

1. 2. 3. 4.

Откройте раздел Extensions -> Install/Uninstall. Установите плагин Web Optimizer. Включите его в разделе Extensions -> Plugin Manager. Откройте веб-сайт. Первая загрузка займет примерно 10-100 (это время потребуется для создания всех файлов кэша). 5. Настройте Web Optimizer в разделе Extensions -> Plugin Manager -> System - Web Optimizer.

Серверное кэширование в Joomla! 1.5.x В таблице ниже приведено время генерации контента (HTML) при различной настройке кэширования Cache (настройка Joomla)

System-Cache (plugin)

Web Optimizer

Web Optimizer Cache

JRE

Нет

Нет

Нет

Нет

Нет 315

65

Да

Нет

Нет

Нет

Нет 200

65

Да

Нет

Да

Нет

Нет 205

93

Да

Да

Да

Нет

Нет 115

93

Да

Да

Да

Да

Нет 115

93

Нет

Нет

Да

Да

Нет 95

93

Нет

Нет

Да

Нет

Да

93

Time (мс)

63

YSlow


Перед установкой убедитесь в том, что в коренной директории веб-сайта существует доступный для записи файл .htaccess или сама директория доступна для записи (только если используется Apache).

1. Скопируйте все файлы из архива в директорию /sites/all/modules/weboptimizer/. 2. Сделайте эту директорию доступной для записи для веб-сервера. 3. Чтобы сжатие осуществлялось наиболее эффективно пожалуйста отключите использование gzip в Drupal. 4. Включите плагин Web Opimizer в разделе Administer -> Site building -> Modules. 5. Откройте веб-сайт. Первая загрузка займет примерно 10-100 (это время потребуется для создания всех файлов кэша).


Ниже приведены все группы опций, использующихся для настройки 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.ru ServerAlias i2.site.ru

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


отключить. Использование .htaccess. Большая часть настроек gzip-сжатия и кэширования могут быть записаны в конфигурационном файле вашего сервера для избежания дополнительной работы на стороне серверных скриптов. Это может быть проделано с помощью файла .htaccess (при необходимости вы можете впоследствии самостоятельно перенести все настройки в файл httpd.cond). Web Optimizer автоматически проверяет доступные модули и конфигурирует запись в . htaccess (естественно, для этого последний должен быть доступен на запись). mod_gzip, mod_deflate и mod_filter отвечают за сжатие файлов «на лету», mod_rewrite и mod_mime — за статическое архивирование. mod_headers и mod_setenvif — за обеспечение корректной обработки сжатых файлов на проксирующих серверах и в старых браузерах. mod_expires — за выставление кэширующих эаголовков. Также возможно расположить .htaccess либо в директории сайта (это бывает полезно, если на одном хосте располагается несколько сайтов в разных дирекориях), либо в самом корне сайта. По умолчанию оба месторасположения совпадают. Также возможно защитить установку Web Optimizer с помощью .htpasswd. В этом случае для доступа к настройкам нужно будет ввести логин и пароль через окно HTTP Basic Authorization в браузере (это позволяет вынести Web Optimizer в произвольную директорию внутри сайта, предварительно расположив директории кэширования вне защищенной области). Логотип Веб Оптимизатора. На каждый сайт добавляется небольшая печать «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: <?php require('/полный/путь/до/css.sprites.php'); $smushit = new css_sprites(); $smushit->smushit('/полный/путь/до/изображения'); ?>

в результате вместо изображения (при наличии прав на его изменение) мы получим его оптимизированную копию. Лучше проводить не на группе рабочих изображениях, а на их копиях, чтобы была возможность откатить изменения. Безопасная установка. Web Optimizer может быть установлен в произвольную директорию (внутри сайта) и защищен с помощью пароля через htpasswd. Для этого нужно включить: Использование .htaccess -> Защитить установку Веб Оптимизатора с помощью htpasswd -> да

При этом нужно убедиться, чтобы Директории кэширования были расположены вне папки с самим Web Optimizer (иначе все развалится для всех посетителей сайта кроме вас самих). При авторизации через HTTP Basic Authorization 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 On

Если требуется кэшировать HTML-файлы <FilesMatch \.(html|xhtml|xml|shtml|phtml|php)$> ExpiresDefault "access plus здесь_идет_таймаут_для_HTML seconds" </FilesMatch> ExpiresByType text/html A_HTML_таймаут ExpiresByType text/xml A_HTML_таймаут ExpiresByType application/xhtml+xml A_HTML_таймаут ExpiresByType text/plain A_HTML_таймаут

Если требуется кэшировать CSS-файлы <FilesMatch \.css$>


ExpiresDefault "access plus 10 years" </FilesMatch> ExpiresByType text/css A315360000

Если требуется кэшировать JavaScript-файлы <FilesMatch \.js$> ExpiresDefault "access plus 10 years" </FilesMatch> ExpiresByType text/javascript A315360000 ExpiresByType application/javascript A315360000 ExpiresByType application/x-javascript A315360000 ExpiresByType text/x-js A315360000 ExpiresByType text/ecmascript A315360000 ExpiresByType application/ecmascript A315360000 ExpiresByType text/vbscript A315360000 ExpiresByType text/fluffscript A315360000

Если требуется кэшировать изображения <FilesMatch \.(bmp|png|gif|jpe?g|ico)$> ExpiresDefault "access plus 10 years" </FilesMatch> ExpiresByType image/gif A315360000 ExpiresByType image/png A315360000 ExpiresByType image/jpeg A315360000 ExpiresByType image/x-icon A315360000 ExpiresByType image/bmp A315360000

Если требуется кэшировать шрифты <FilesMatch \.(eot|ttf|otf|svg)$> ExpiresDefault "access plus 10 years" </FilesMatch> ExpiresByType application/x-font-opentype A315360000 ExpiresByType application/x-font-truetype A315360000 ExpiresByType application/x-font-ttf A315360000 ExpiresByType application/x-font A315360000 ExpiresByType font/opentype A315360000 ExpiresByType font/otf A315360000 ExpiresByType application/vnd.oasis.opendocument.formula-template A315360000 ExpiresByType image/svg+xml A315360000 ExpiresByType application/vnd.ms-fontobject A315360000 ExpiresByType font/woff A315360000

Если требуется кэшировать видео-файлы <FilesMatch \.(flv|wmv|asf|asx|wma|wax|wmx|wm)$> ExpiresDefault "access plus 10 years" </FilesMatch> ExpiresByType video/x-flv A315360000 ExpiresByType video/x-ms-wmv A315360000 ExpiresByType video/x-ms-asf A315360000 ExpiresByType video/x-ms-asx A315360000 ExpiresByType video/x-ms-wma A315360000 ExpiresByType video/x-ms-wax A315360000 ExpiresByType video/x-ms-wmx A315360000 ExpiresByType video/x-ms-wm A315360000

Если требуется кэшировать другие статические ресурсы


<FilesMatch \.(swf|pdf|doc|rtf|xls|ppt)$> ExpiresDefault "access plus 10 years" </FilesMatch> ExpiresByType application/x-shockwave-flash A315360000 ExpiresByType application/pdf A315360000 ExpiresByType application/msword A315360000 ExpiresByType application/rtf A315360000 ExpiresByType application/vnd.ms-excel A315360000 ExpiresByType application/vnd.ms-powerpoint A315360000

mod_deflate + mod_filter (если отсутствует mod_gzip) – вся логика архивирования AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE image/x-icon

gzip для CSS-файлов AddOutputFilterByType DEFLATE text/css

gzip для JavaScript-файлов AddOutputFilterByType AddOutputFilterByType AddOutputFilterByType AddOutputFilterByType AddOutputFilterByType AddOutputFilterByType AddOutputFilterByType AddOutputFilterByType

DEFLATE DEFLATE DEFLATE DEFLATE DEFLATE DEFLATE DEFLATE DEFLATE

text/javascript application/javascript application/x-javascript text/x-js text/ecmascript application/ecmascript text/vbscript text/fluffscript

mod_gzip – для логика gzip-сжатия, если mod_deflate отсутствует Включаем модуль gzip mod_gzip_on Yes mod_gzip_can_negotiate Yes mod_gzip_static_suffix .gz AddEncoding gzip .gz mod_gzip_update_static No mod_gzip_keep_workfiles No mod_gzip_minimum_file_size 500 mod_gzip_maximum_file_size 5000000 mod_gzip_maximum_inmem_size 60000 mod_gzip_min_http 1000 mod_gzip_handle_methods GET POST mod_gzip_item_exclude reqheader \"User-agent: Mozilla/4.0[678]\" mod_gzip_dechunk No

Добавляем gzip для страницы mod_gzip_item_include mod_gzip_item_include mod_gzip_item_include mod_gzip_item_include

mime mime mime mime

^text/html$ ^text/plain$ ^image/x-icon$ ^httpd/unix-directory$

Добавляем gzip для CSS-файлов mod_gzip_item_include mime ^text/css$

Добавляем gzip для JavaScript-файлов


mod_gzip_item_include mod_gzip_item_include mod_gzip_item_include mod_gzip_item_include mod_gzip_item_include mod_gzip_item_include mod_gzip_item_include mod_gzip_item_include

mime mime mime mime mime mime mime mime

^text/javascript$ ^application/javascript$ ^application/x-javascript$ ^text/x-js$ ^text/ecmascript$ ^application/ecmascript$ ^text/vbscript$ ^text/fluffscript$

mod_headers – для предохранения прокси-серверов от gzip и корректного выставления условного кэширования Отменяем кэширование для архивов на прокси-серверах <FilesMatch \.(css|js)$> 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/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \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.$2 RewriteRule ^(.*)\.wo[0-9]+\.(js|php)$ $1.$2

Добавляем статическое архивирование для CSS-файлов RewriteCond RewriteCond RewriteCond RewriteRule

%{HTTP:Accept-encoding} gzip %{HTTP_USER_AGENT} !Konqueror %{REQUEST_FILENAME}.gz -f ^(.*)\.css$ $1.css.gz [QSA,L]

Добавляем статическое архивирование для JavaScript-файлов RewriteCond RewriteCond RewriteCond RewriteRule

%{HTTP:Accept-encoding} gzip %{HTTP_USER_AGENT} !Konqueror %{REQUEST_FILENAME}.gz -f ^(.*)\.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. Если не можем определить ни одного из указаных случаев (например, backgroundposition : 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-правил).


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

CSS Sprite — это, фактически, одно-единственное изображение, в котором находится много различных картинок. В этом она очень похода на карту изображений (_image map_). Мы можем при помощи CSS-свойства background-position вырезать из этого изображения только необходимую нам часть и показать ее в требуемом месте на странице. Также важно знать конечные размеры блока с фоновой картинкой, чтобы быть уверенным, что остальные картинки из этого CSS Sprite не будут показаны.

Необходимо собрать вместе все исходные картинки в одном файле и рассчитать их конечные позиции, чтобы включить их в CSS-правила. В случае нескольких картинок это не явлется сложной задачей. Однако если у вас десятки и сотни различных картинок, то это может быть весьма проблематичным и затратным по времени — корректно собрать их в одном или двух CSS Sprites.

Web Optimizer автоматически анализирует все CSS-правила, находит возможные варианты использования CSS Sprites и применяет их. Существует ряд ограничений на корректное использование этой техники в автоматическом режиме, поэтому стоит их учитывать при создании CSS-кода для ваших сайтов. Это поможет Web Optimizer лучше объединить изображения, избежать проблем с отображением CSS Sprites и увеличить общую производительность сайта. Несколько правил для написания CSS-кода для улучшения создания CSS Sprites. Используйте только абсолютные значения для background-position. Использование относительных единиц (например, em, % или даже center, bottom, right) приведет к тому, что Web Optimizer будет пытаться вычислить размеры блока с данной картинкой, и не всегда это можно сделать наверняка. Если нет возможности задать абсолютные значения, то постарайтесь задать абсолютные размеры для таких блоков. Используйте только абсолютные значения для свойств width, height и padding. Если Web Optimizer находит абсолютные значения для поцизии фона, но относительные значения для размеров блока, то приложение не может корректно вычислить безопасную позицию для фоновой картинки. Поэтому оно будет объединено с другими с использованием ненужных пустых полей, либо вообще не будет использовано.


Не используйте сложные CSS-селекторы для фоновых изображений. Web Optimizer не анализирует наверняка все дерево CSS-правил, он может применить только несколько наиболее очевидных действий, чтобы установить требуемые свойства (background-image, background-position, background-repeat, width, height, padding). С точки зрения Web Optimizer лучше обнаружить все эти правила в одном CSS-селекторе (никаких наследственных правил). Также это (малое количество фактических CSS-правил) является более оптимальным с точки зрения отрисовки страниц в браузерах. Старайтесь исключить неочевидные каскадные взаимоотношения между CSS-правилами для свойств фона. Например, вместо использования li.item, .active, .passive постарайтесь выставить .menu li, .menu li.active, .menu li.passive. Последний каскад правил будет корректно распознан Web Optimizer. Исключите неиспользуемые или редко используемые CSS-правила на те страницы, где они применяются. Web Optimizer старается объединить все обнаруженные изображения. Сказать наверняка, какие именно из этих картинок используются на данной страницы, невозможно. Поэтому удаление неиспользуемых CSS-селекторов позволит уменьшить общий размер CSS Sprites (а также ускорит отображение страницы в браузерах). Не используйте различные значения свойства background-position для одного и того же изображения, если это не CSS Sprite. Web Optimizer автоматически исключает изображения со множественными позициями фона (так как, по всей видимости, они должны быть спрайтами), поэтому такие картинки не объединяются. Для позиционирование элемента и его фона в качестве возможной альтернативы можно также использовать поля (_margin_). Все эти правила помогут Web Optimizer лучше проанализировать структуру вашего CSS-код и создать CSS Sprites более качественно.


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

Сейчас доступны следующие вызовы: onInstall - действия, которые будут применены при установке Web Optimizer. onUninstall - действия, который будут применены при удалении Web Optimizer. onBeforeOptionization - действия, которые будут применены перед проведением клиентской оптимизации. onAfterOptimization - действия, которые будут применены после проведения клиентской оптимизации (могут кэшироваться). onCache - действия, которые будут применены каждый раз перед выдачей закэшированного содержимого страниц.

Ниже приведен шаблон для файла расширения Web Optimizer: <?php if (!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 onBeforeOptimization ($content) { /* В $content находится текущее содержимое веб-страницы */ return $content; } /* пост-оптимизационные действия */ function onAfterOptimization ($content) { /* В $content находится оптимизированное содержимое веб-страницы */


return $content; } /* действия при выдаче HTML-кэша */ function onCache ($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 не получается правильно вычислить все пути по умолчанию для проведения установки (это может выражаться в отсутствии стилей или скриптов на сайте, а также в фатальной PHP-ошибке после установки). Обычно это происходит на CGI-окружениях. Web Optimizer пробует следующие подходы для вычисления путей. Обнаруживает корень хоста (document root). Обычно он определен в $_SERVERтом случае, если корень хоста обнаружить не удалось (или он определен в недоступную папку), Web Optimizer пробует получить значения переменной окружения SCRIPT_FILENAME и исключает из нее значение другой переменной — SCRIPT_NAME (это обычно помогает исправить ситуацию).

В том случае если сайт установлен в отдельной директории внутри хоста (например, в папке внутри document root), у Web Optimizer есть отдельная настройка для корня сайта (не хоста). Обычно она таже вычисляется автоматически. Если CGI-окружение настроено не совсем верно (например, не определена переменная $_SERVER['DOCUMENT_ROOT', а переменные окружения SCRIPT_NAME, SCRIPT_FILENAME определены относительно внутреннего PHP-процесса), Web Optimizer не удается правильно вычислить корень хоста. Что выражается в неверном вычислении всех остальных директорий (в большинстве случаев они автоматически определяются после корня хоста, document root).

В последнем случае необходимо определить все пути для Web Optimizer вручную. Это можно сделать через интерфейс Web Optimizer: все пути обычно приведены в самом начале параметров для изменения.

Довольно часто приходится разобраться с тем, работает ли 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 -> Включить авто-запись -> Нет

и на последнем шаге зайти на вкладку «Необходимые изменения». Также стоит убедиться, что сам Web Optimizer активен в настройках конфигурации (для всех типов установки кроме плагина для Joomla!). Для этого необходимо проверить в файле web-optimizer/config.webo.php следующую строку $compress_options['active'] = "1";

И выставить для нее значение в 1 (если оно равно 0`). Это активирует Web Optimizer для вашего сайта. Если и это не помогло, то, пожалуйста, проверьте настройки остальных плагинов и дополнений, которые могут применять gzip к содержимому (из-за чего Web Optimizer может получать все данные в сжатом виде и не может их проанализировать). Попробуйте отключить gzip в каждом таком плагине или глобальных настройках системы, чтобы сжатие не распространялось на HTML-код.


Обычно это связано с двойным сжатием 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-файлы -> Нет

а потом (при сохранении проблемы) попробовать исключить один за другим отдельные файлы: Включить внешние файлы -> Исключить из объединения файлы -> Список файлов через пробел

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


и расположить объединенный JavaScript-файл около начала страницы Включить внешние файлы -> Форсировать размещение объединенного JavaScript-файла перед &lt;/head> -> Нет

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

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


Если требуется включить несколько параллельных хостов для ускорения загрузки статических ресурсов, то стоит проверить следующие моменты: Наличие поддержки этих хостов в DNS. Для этого нужно сделать соответствующие этим хостам записи в вашей DNS-зоне, указывающие на требуемый IP-адрес (обычно тот же, что и у текущего сайта). Включить поддержку этих хостов на уровне самого сервера. Для Apache это делается директивой ServerAlias, например: ServerAlias i1.site.com ServerAlias 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.weboptimizer.us/about/contacts.html) .

Стебник  

Заводи кукукуку

Read more
Read more
Similar to
Popular now
Just for you