Время загрузки страницы

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