Download - Оптимизируем время загрузки страницы
Время загрузки страницыОбщее время загрузки Время на загрузку HTML %
google.ru 359ms 15ms 4%
mail.ru 1750ms 31ms 2%
yandex.ru 1040ms 70ms 7%
vkontakte.ru 907ms 16ms 2%
rambler.ru 531ms 296ms 56%
liveinternet.ru 1290ms 15ms 1%
rbc.ru 1930ms 47ms 2%
* Данные получены с помощью Firefox/Firebug/YSlow
Время загрузки страницы
Основное время уходит на:• Сетевые задержки
• Загрузку ресурсов (картинок и др.)
• Загрузку CSS-файлов
• Загрузку JS-файлов
Оптимизация загрузки
Что можно уменьшить:• Время передачи запроса
• Время передачи ответа
• Число запросов
Оптимизация загрузки
Основные направления:• Сжатие данных (уменьшение времени ответа)
• Кеширование (уменьшение числа запросов)
• Слияние (уменьшение числа запросов)
• Распределенные системы (уменьшение времени ответа)
Сетевые задержки
DNS lookup:• Обычно 20-120ms
• Не более 2-4 хостов на страницу
• Заголовок keep-alive
• Избегаем редиректов (301/302)
Сжатие данных (cookie)Размер HTTP-запроса Размер cookie %
google.ru 698b 275b 39%
mail.ru 825b 448b 54%
yandex.ru 780b 355b 46%
vkontakte.ru 600b 196b 33%
rambler.ru 419b 36b 9%
liveinternet.ru 441b 53b 12%
rbc.ru 443b 63b 14%
Сжатие данных (cookie)
Уменьшаем размер заголовка Cookie: • Убираем ненужные
• Следим за размером
• Выставляем только на требуемых страницах
• Следим за сроком действия (Expires)
Сжатие данных (ответ)
Уменьшаем размер кода:• Убираем все лишнее (minify)
• AJAX-запросы. JSON вместо XML
• gzip- / deflate-сжатие. Поддержка «старых» браузеров
Сжатие данных (gzip)Размер HTML Сжатый HTML %
google.ru 3605b 1684b 47%
mail.ru 61742b 14424b 23%
yandex.ru 27440b 9436b 34%
vkontakte.ru 31155b 7217b 23%
rambler.ru 73944b 14759b 20%
liveinternet.ru 20637b 5418b 26%
rbc.ru 81032b 20610b 25%
Сжатие данных (CSS)Уменьшаем размер кода:• Имена классов / идентификаторов
• Пути к фоновым изображениям
• CSS Tidy / gzip
Исходный CSS CSS Tidy Gzip CSS Tidy + Gzip %
Пример 1 22708b 20343b 4414b 4165b 18%
Пример 2 118567b 86916b 22180b 17468b 15%
Пример 3 44802b 31646b 9250b 7341b 16%
Сжатие данных (JS)
Уменьшаем размер кода:• Dean Edwards Packer dean.edwards.name/packer/ -78%
• Dean Edwards Packer + gzip: -82%
• YUI Compressor julienlecomte.net/yuicompressor/ -50%
• YUI Compressor + gzip: -83%
* В качестве примера рассматривалась библиотека jQuery
КешированиеУменьшаем число повторных запросов: • Фоновые картинки (CSS) вместо <img>
• Заголовки Expires / Cache-Control
• ETags (уникальные идентификаторы запрашиваемых ресурсов)
• Проблема версионности
СлияниеУменьшаем число запросов: • Слияние CSS-файлов (подключение через
@media)
• Слияние JS-файлов («сборка» одного файла для публикации)
• Слияние картинок: CSS sprites (все иконки в одном файле / roll-over эффекты)
Экстремальное слияниеУменьшаем число запросов: • JS / CSS в одном файле (взаимные комментарии)
• HTML / JS / CSS в одном файле (yandex)
• CSS / картинки в одном файле (IE не поддерживает)
• Минимальный размер страницы «по умолчанию» (google)
Распределенные системыУменьшаем время ответа: • Round-robin балансировка
• Балансировка по нагрузке
• Балансировка по географии
• Балансировка на клиенте
Распределенные системыБалансировка на клиенте: • Сеть серверов для обслуживания запросов
• Список серверов в одном файле
• AJAX/Flash-приложение для выбора сервера
Балансировка на клиенте
Выбор сервера производится непосредственно на клиенте
веб-сервер
веб-сервер
веб-сервер
ЗаключениеУменьшение времени загрузки
страницы:• Yahoo: 2.4s -> 0.9s (2,7 раза)
Общие рекомендации:• Загрузка за 10 секунд на модеме (общий размер
меньше 36 кб)