Оптимизируем время загрузки страницы

Мациевский Николай, Acronis

Время загрузки страницыОбщее время загрузки Время на загрузку 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 кб)

Спасибо за внимание

Оптимизируем времязагрузки страницы

Мациевский Николай, Acronis