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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

<?php
require(/путь/к/Web/Optimizer/
web.optimizer.php);
?>
и затем в самом низу страницы:
<?php
$web_optimizer->finish();
?>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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