Разгони свой сайт Лекция 1: Особенности клиентской оптимизации Мациевский Николай 1 / 23 webo.in

Содержание Цели и задачи клиентской оптимизации Психологические аспекты Связь с серверной оптимизацией Применение в разработке веб- приложений 2 / 23 webo.in

Цели и задачи клиентской оптимизации webo.in 3 / 23

Структура веб-страницы Один HTML-файл И много-много ресурсных файлов –Таблицы стилей –Клиентские скрипты –Фоновые картинки –Изображения на странице –Мультимедийные файлы 4 / 23 webo.in

Фокус на стороне клиента Загрузка HTML занимает 5% Остальное приходится на статические ресурсы –Текстовые файлы –Бинарное содержимое страницы 5 / 23 webo.in

Процесс загрузки страницы Предзагрузка –Белый экран в браузере пользователя Интерактивная загрузка –JavaScript-файлы Полная загрузка –Картинки и мультимедиа Пост-загрузка –После window.onload 6 / 23 webo.in

Основные задачи Уменьшение времени предзагрузки –Максимально быстро показать пользователю предварительную картинку Ускорение основной загрузки –Распараллелить поток загрузки после прохождения «узкого места» Обеспечить комфортную работу –Устранить задержки при взаимодействии с сайтом 7 / 23 webo.in

Основные методы (1) Уменьшение размера объектов –Сжатие текста и оптимизация изображений Кэширование статики –Минимум запросов при повторном посещении Объединение объектов –CSS Sprites, data:URI, объединение текстовых файлов 8 / 23 webo.in

Основные методы (2) Параллельная загрузка объектов –Уменьшение времени ожидания ответа Оптимизация CSS –Оптимальная структура стилевых правил Оптимизация JavaScript –Устранение «узких мест» в работе клиентских скриптов 9 / 23 webo.in

Психологические аспекты webo.in 10 / 23

Быстрые сайты – это хорошо Меньше раздражают пользователей –Ожидание больше 4 секунд нервирует –Пользователи с быстрым доступом ждут меньше Вызывают больше доверия –Побуждают к дальнейшим действиям –Пользователи проводят больше времени 11 / 23 webo.in

Эффекты быстрых сайтов Быстрый интернет-магазин –Создает ощущение надежности Быстрый развлекательный портал –Затягивает пользователей Быстрый новостной портал / блог –Повышает достоверность информации 12 / 23 webo.in

Прибыль быстрых сайтов Google (2006) –400ms = 20% рекламных доходов Amazon (2007) –100ms = 1% продаж Live.com (2007) –1000ms = 1,5% рекламных доходов 13 / 23 webo.in

Связь с серверной оптимизацией webo.in 14 / 23

Основные правила Кэширование во главу угла –Уменьшает число запросов и время на их передачу Меньше запросов – легче серверу –Каждый сокет занимает серверные ресурсы Архивировать и кэшировать на сервере –Можно создавать статические архивы для текстовых файлов 15 / 23 webo.in

Спорные моменты Параллельные загрузки –Создают большое число одновременные соединений Все-в-одном файле –Сложное технологическое решение Уменьшение cookie в размере –Может быть тяжело поддерживать 16 / 23 webo.in

Плюсы для сервера Снижение нагрузки –За счет уменьшения числа соединений и времени их использования Простое использование –Несколько правил в конфигурационном файле Поможет не только серверу –Ускорение загрузки сайта у всех конечных пользователей 17 / 23 webo.in

Применение в разработке приложений webo.in 18 / 23

Доставка информации Максимальное ускорение предзагрузки –Сжатие для CSS/HTML –Объединение CSS-файлов Убираем интерактивную загрузку –Переносим JavaScript в основную загрузку В итоге: доставленный и оформленный HTML 19 / 23 webo.in

Настройка сервера Кэширование –Статические ресурсы должны браться из клиентского кэша Архивирование –«На лету» или в виде статических архивов Зеркала для параллельных запросов –Зависит от общего числа файлов на странице 20 / 23 webo.in

После основной загрузки «Ненавязчивый» JavaScript –JavaScript – это расширение, а не основной функционал –Находит DOM-элементы и обеспечиваем их взаимодействие с пользователем Серверные интерфейсы для AJAX Модульная загрузка компонентов –Или один JavaScript-файл 21 / 23 webo.in

Пост-загрузка Предупреждаем действия пользователя –Ресурсы, которые используются на второстепенных страницах –«Скрытый» функционал данной страницы Загрузка в процессе ознакомления –1-2 секунды уходит на знакомство с сайтом –При чтении статей это может быть несколько минут –«Линия сгиба» страницы 22 / 23 webo.in

В следующей лекции: Сжатие файлов HTML-архивирование Все секреты сжатия для CSS Сжатие и кэширование для JavaScript favicon.ico PNG и GIF Сжатие изображений Два слова о cookie 23 / 23 webo.in