Опубликован: 16.06.2010 | Доступ: свободный | Студентов: 2353 / 93 | Оценка: 4.39 / 4.00 | Длительность: 17:32:00
ISBN: 978-5-9963-0253-6
Лекция 8:

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

< Лекция 7 || Лекция 8: 12345 || Лекция 9 >

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7.3.8. CSS Sprites

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

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

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

7.3.9. data:URI

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

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

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

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

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

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

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

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

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

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

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

7.3.12. Логотип Web Optimizer

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

< Лекция 7 || Лекция 8: 12345 || Лекция 9 >
Ольга Артёмова
Ольга Артёмова

Доброго времени суток!

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

Сертификация: оптимизация и продвижение web-сайтов.

Наталья Алмаева
Наталья Алмаева
Россия
Вадим Барков
Вадим Барков
Украина, Киев