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

Разгони свой сайт
Лекция 1: Особенности клиентской оптимизации
Мациевский Николай
webo.in
1 / 23
Содержание
•
•
•
•
Цели и задачи клиентской оптимизации
Психологические аспекты
Связь с серверной оптимизацией
Применение в разработке вебприложений
webo.in
2 / 23
Цели и задачи клиентской
оптимизации
webo.in
3 / 23
Структура веб-страницы
• Один HTML-файл
• И много-много ресурсных файлов
– Таблицы стилей
– Клиентские скрипты
– Фоновые картинки
– Изображения на странице
– Мультимедийные файлы
webo.in
4 / 23
Фокус на стороне клиента
• Загрузка HTML занимает 5%
• Остальное приходится на статические
ресурсы
– Текстовые файлы
– Бинарное содержимое страницы
webo.in
5 / 23
Процесс загрузки страницы
• Предзагрузка
– Белый экран в браузере пользователя
• Интерактивная загрузка
– JavaScript-файлы
• Полная загрузка
– Картинки и мультимедиа
• Пост-загрузка
– После window.onload
webo.in
6 / 23
Основные задачи
• Уменьшение времени предзагрузки
– Максимально быстро показать
пользователю предварительную картинку
• Ускорение основной загрузки
– Распараллелить поток загрузки после
прохождения «узкого места»
• Обеспечить комфортную работу
– Устранить задержки при взаимодействии с
сайтом
webo.in
7 / 23
Основные методы (1)
• Уменьшение размера объектов
– Сжатие текста и оптимизация изображений
• Кэширование статики
– Минимум запросов при повторном
посещении
• Объединение объектов
– CSS Sprites, data:URI, объединение
текстовых файлов
webo.in
8 / 23
Основные методы (2)
• Параллельная загрузка объектов
– Уменьшение времени ожидания ответа
• Оптимизация CSS
– Оптимальная структура стилевых правил
• Оптимизация JavaScript
– Устранение «узких мест» в работе
клиентских скриптов
webo.in
9 / 23
Психологические аспекты
webo.in
10 / 23
Быстрые сайты – это хорошо
• Меньше раздражают пользователей
– Ожидание больше 4 секунд нервирует
– Пользователи с быстрым доступом ждут
меньше
• Вызывают больше доверия
– Побуждают к дальнейшим действиям
– Пользователи проводят больше времени
webo.in
11 / 23
Эффекты быстрых сайтов
• Быстрый интернет-магазин
– Создает ощущение надежности
• Быстрый развлекательный портал
– Затягивает пользователей
• Быстрый новостной портал / блог
– Повышает достоверность информации
webo.in
12 / 23
Прибыль быстрых сайтов
• Google (2006)
– 400ms = 20% рекламных доходов
• Amazon (2007)
– 100ms = 1% продаж
• Live.com (2007)
– 1000ms = 1,5% рекламных доходов
webo.in
13 / 23
Связь с серверной
оптимизацией
webo.in
14 / 23
Основные правила
• Кэширование во главу угла
– Уменьшает число запросов и время на их
передачу
• Меньше запросов – легче серверу
– Каждый сокет занимает серверные
ресурсы
• Архивировать и кэшировать на сервере
– Можно создавать статические архивы для
текстовых файлов
webo.in
15 / 23
Спорные моменты
• Параллельные загрузки
– Создают большое число одновременные
соединений
• Все-в-одном файле
– Сложное технологическое решение
• Уменьшение cookie в размере
– Может быть тяжело поддерживать
webo.in
16 / 23
Плюсы для сервера
• Снижение нагрузки
– За счет уменьшения числа соединений и
времени их использования
• Простое использование
– Несколько правил в конфигурационном
файле
• Поможет не только серверу
– Ускорение загрузки сайта у всех конечных
пользователей
webo.in
17 / 23
Применение в разработке
приложений
webo.in
18 / 23
Доставка информации
• Максимальное ускорение предзагрузки
– Сжатие для CSS/HTML
– Объединение CSS-файлов
• Убираем интерактивную загрузку
– Переносим JavaScript в основную загрузку
• В итоге: доставленный и оформленный
HTML
webo.in
19 / 23
Настройка сервера
• Кэширование
– Статические ресурсы должны браться из
клиентского кэша
• Архивирование
– «На лету» или в виде статических архивов
• Зеркала для параллельных запросов
– Зависит от общего числа файлов на
странице
webo.in
20 / 23
После основной загрузки
• «Ненавязчивый» JavaScript
– JavaScript – это расширение, а не основной
функционал
– Находит DOM-элементы и обеспечиваем
их взаимодействие с пользователем
• Серверные интерфейсы для AJAX
• Модульная загрузка компонентов
– Или один JavaScript-файл
webo.in
21 / 23
Пост-загрузка
• Предупреждаем действия пользователя
– Ресурсы, которые используются на
второстепенных страницах
– «Скрытый» функционал данной страницы
• Загрузка в процессе ознакомления
– 1-2 секунды уходит на знакомство с сайтом
– При чтении статей это может быть
несколько минут
– «Линия сгиба» страницы
webo.in
22 / 23
В следующей лекции:
Сжатие файлов
•
•
•
•
•
•
•
HTML-архивирование
Все секреты сжатия для CSS
Сжатие и кэширование для JavaScript
favicon.ico
PNG и GIF
Сжатие изображений
Два слова о cookie
webo.in
23 / 23