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

Содержание

Цели и задачи клиентской оптимизации
Психологические аспекты
Связь с серверной оптимизацией
Применение в разработке

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

webo.in

3 / 23

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

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

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

Загрузка HTML занимает 5%
Остальное приходится на статические ресурсы
Текстовые

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

Предзагрузка
Белый экран в браузере пользователя
Интерактивная загрузка
JavaScript-файлы
Полная загрузка
Картинки и мультимедиа
Пост-загрузка
После

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

Уменьшение времени предзагрузки
Максимально быстро показать пользователю предварительную картинку
Ускорение основной загрузки
Распараллелить

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

Уменьшение размера объектов
Сжатие текста и оптимизация изображений
Кэширование статики
Минимум запросов

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

Параллельная загрузка объектов
Уменьшение времени ожидания ответа
Оптимизация CSS
Оптимальная структура стилевых

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

webo.in

10 / 23

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

Меньше раздражают пользователей
Ожидание больше 4 секунд нервирует
Пользователи

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

Быстрый интернет-магазин
Создает ощущение надежности
Быстрый развлекательный портал
Затягивает пользователей
Быстрый новостной портал

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

Google (2006)
400ms = 20% рекламных доходов
Amazon (2007)
100ms = 1%

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

webo.in

14 / 23

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

Кэширование во главу угла
Уменьшает число запросов и время на их

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

Параллельные загрузки
Создают большое число одновременные соединений
Все-в-одном файле
Сложное технологическое решение
Уменьшение cookie

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

Снижение нагрузки
За счет уменьшения числа соединений и времени их

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

webo.in

18 / 23

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

Максимальное ускорение предзагрузки
Сжатие для CSS/HTML
Объединение CSS-файлов
Убираем интерактивную загрузку
Переносим JavaScript в

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

Кэширование
Статические ресурсы должны браться из клиентского кэша
Архивирование
«На лету» или в

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

«Ненавязчивый» JavaScript
JavaScript – это расширение, а не основной функционал
Находит

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

Предупреждаем действия пользователя
Ресурсы, которые используются на второстепенных страницах
«Скрытый» функционал данной страницы
Загрузка