Разгони свой сайт. Особенности клиентской оптимизации

1. Разгони свой сайт

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

2. Содержание

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

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

webo.in
3 / 23

4. Структура веб-страницы

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

5. Фокус на стороне клиента

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

6. Процесс загрузки страницы

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

7. Основные задачи

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

8. Основные методы (1)

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

9. Основные методы (2)

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

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

webo.in
10 / 23

11. Быстрые сайты – это хорошо

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

12. Эффекты быстрых сайтов

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

13. Прибыль быстрых сайтов

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

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

webo.in
14 / 23

15. Основные правила

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

16. Спорные моменты

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

17. Плюсы для сервера

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

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

webo.in
18 / 23

19. Доставка информации

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

20. Настройка сервера

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

21. После основной загрузки

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

22. Пост-загрузка

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

23. В следующей лекции: Сжатие файлов

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