Similar presentations:
Разгони свой сайт. Особенности клиентской оптимизации
1. Разгони свой сайт
Лекция 1: Особенности клиентской оптимизацииМациевский Николай
webo.in
1 / 23
2. Содержание
Цели и задачи клиентской оптимизации
Психологические аспекты
Связь с серверной оптимизацией
Применение в разработке вебприложений
webo.in
2 / 23
3. Цели и задачи клиентской оптимизации
webo.in3 / 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.in10 / 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.in14 / 23
15. Основные правила
• Кэширование во главу угла– Уменьшает число запросов и время на их
передачу
• Меньше запросов – легче серверу
– Каждый сокет занимает серверные
ресурсы
• Архивировать и кэшировать на сервере
– Можно создавать статические архивы для
текстовых файлов
webo.in
15 / 23
16. Спорные моменты
• Параллельные загрузки– Создают большое число одновременные
соединений
• Все-в-одном файле
– Сложное технологическое решение
• Уменьшение cookie в размере
– Может быть тяжело поддерживать
webo.in
16 / 23
17. Плюсы для сервера
• Снижение нагрузки– За счет уменьшения числа соединений и
времени их использования
• Простое использование
– Несколько правил в конфигурационном
файле
• Поможет не только серверу
– Ускорение загрузки сайта у всех конечных
пользователей
webo.in
17 / 23
18. Применение в разработке приложений
webo.in18 / 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