Оптимизируем время загрузки страницы Мациевский Николай, 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