Оптимизируем время загрузки страницы Мациевский Николай Acronis

Оптимизируем время загрузки страницы Мациевский Николай, Acronis

Время загрузки страницы Общее время загрузки Время на загрузку HTML % google. ru 359 ms 15 ms 4% mail. ru 1750 ms 31 ms 2% yandex. ru 1040 ms 7% vkontakte. ru 907 ms 16 ms 2% rambler. ru 531 ms 296 ms 56% liveinternet. ru 1290 ms 15 ms 1% rbc. ru 1930 ms 47 ms 2% * Данные получены с помощью Firefox/Firebug/YSlow

Время загрузки страницы Основное время уходит на: • Сетевые задержки • Загрузку ресурсов (картинок и др. ) • Загрузку CSS-файлов • Загрузку JS-файлов

Оптимизация загрузки Что можно уменьшить: • Время передачи запроса • Время передачи ответа • Число запросов

Оптимизация загрузки Основные направления: • Сжатие данных (уменьшение времени ответа) • Кеширование (уменьшение числа запросов) • Слияние (уменьшение числа запросов) • Распределенные системы (уменьшение времени ответа)

Сетевые задержки DNS lookup: • Обычно 20 -120 ms • Не более 2 -4 хостов на страницу • Заголовок keep-alive • Избегаем редиректов (301/302)

Сжатие данных (cookie) Размер HTTP-запроса Размер cookie % google. ru 698 b 275 b 39% mail. ru 825 b 448 b 54% yandex. ru 780 b 355 b 46% vkontakte. ru 600 b 196 b 33% rambler. ru 419 b 36 b 9% liveinternet. ru 441 b 53 b 12% rbc. ru 443 b 63 b 14%

Сжатие данных (cookie) Уменьшаем размер заголовка Cookie: • Убираем ненужные • Следим за размером • Выставляем только на требуемых страницах • Следим за сроком действия (Expires)

Сжатие данных (ответ) Уменьшаем размер кода: • Убираем все лишнее (minify) • AJAX-запросы. JSON вместо XML • gzip- / deflate-сжатие. Поддержка «старых» браузеров

Сжатие данных (gzip) Размер HTML Сжатый HTML % google. ru 3605 b 1684 b 47% mail. ru 61742 b 14424 b 23% yandex. ru 27440 b 9436 b 34% vkontakte. ru 31155 b 7217 b 23% rambler. ru 73944 b 14759 b 20% liveinternet. ru 20637 b 5418 b 26% rbc. ru 81032 b 20610 b 25%

Сжатие данных (CSS) Уменьшаем размер кода: • Имена классов / идентификаторов • Пути к фоновым изображениям • CSS Tidy / gzip Исходный CSS Tidy Gzip CSS Tidy + Gzip % Пример 1 22708 b 20343 b 4414 b 4165 b 18% Пример 2 118567 b 86916 b 22180 b 17468 b 15% Пример 3 44802 b 31646 b 9250 b 7341 b 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% * В качестве примера рассматривалась библиотека j. Query

Кеширование Уменьшаем число повторных запросов: • Фоновые картинки (CSS) вместо • Заголовки 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. 4 s -> 0. 9 s (2, 7 раза) Общие рекомендации: • Загрузка за 10 секунд на модеме (общий размер меньше 36 кб)

Спасибо за внимание Оптимизируем время загрузки страницы Мациевский Николай, Acronis