Доклад для технологической конференции failoverconf.ru. Москва, 23 мая 2014. Доступность современного онлайн-бизнеса 24/7 - это не только бесперебойная работа сайта, но и его удобство и работоспособность с мобильных устройств в условиях низкого качества связи. Доля посетителей и покупателей, использующих мобильные устройства, стремительно увеличивается. Несмотря на это, мы практически не учитываем интересы мобильных пользователей при разработке или оптимизации сайтов и интернет-магазинов. В докладе мы поговорим об ускорении client-side для мобильных устройств. Рассмотрим инструменты для измерения скорости загрузки и тестирования страниц в реальных «мобильных» условиях.

1. Ускорение client-side )
для мобильных устройств
Юрий Устинов
Москва, 23 мая 2014

2. О чем речь?
Как изменить
! ! ! ! ! ! ! контент сайта !
и его подачу,
чтобы
ускорить
отображение сайта
на мобильных.

3. Фото девочки с телефоном

4. Загрузка сайта
DNS (узнаем, где сайт)

5. Загрузка сайта
DNS (узнаем, где сайт)
Сеть (стучимся туда, где сайт)

6. Загрузка сайта
DNS (узнаем, где сайт)
Сеть (стучимся туда, где сайт)
Ждем ответа сервера (он создает html)

7. Загрузка сайта
DNS (узнаем, где сайт)
Сеть (стучимся туда, где сайт)
Ждем ответа сервера (он создает html)
Загружаем содержимое (html)

9. Фото умной девочки

10. Установка соединения
Посетитель Сервер

11. RTT – правда жизни
Round Trip Time!
время за которое сигнал проходит от
посетителя к серверу и обратно

12. Скорость света конечна, да
)
)
Москва Москва
)
)
Москва Германия
)
)
Москва Нидерланды
30-50 мс
70 мс
100 мс

13. Данные передаются в рамках окна
• Для открытия окна требуется 1 RTT
)
• Чем стабильнее канал, тем больше размер окна,
выше скорость передачи
)
• Если есть потери - размер окна уменьшается,
скорость передачи падает катастрофически
1 2 3 4
… N

14. Пример
Html-cтраница размером 30720 байт
)
1 сегмент: 1400 байт
)
1 окно: 9 сегментов или 12600 байт
)
Для загрузки страницы потребуется 3 окна (30400/12600 ~ 3).
)
Минимальное время загрузки в этих условиях: 4 RTT
1RTT (соединение) + 3RTT (данные)

15. Подробно о сетевых
протоколах
Александр Сербул
Сетевые протоколы для
веб-разработчика -
выжимаем максимум
Сегодня, в 16:40

17. Вывод
• Минимизировать объем контента
• Облегчить браузеру загрузку
• Снизить RTT (время на прохождение
сигнала)

18. Варианты?
• Мобильное приложение
• Отдельная мобильная версия сайта
• Адаптивный дизайн
• Обычный сайт для всех

19. Интересный пример
Приложение
отдельно
Сайт как
приложение

20. ТОП 100 ИМ. Статистика
25 из 100
имеют мобильную версию

21. Время «холодной» загрузки страницы

22. Время отображения страницы
в среднем, сек.

23. Объем загружаемых данных
в среднем, КБ

24. Как ускорить сайт
для мобильных?

25. Увеличить число параллельных потоков
На слайде не самый лучший пример.
Выигрыш минимальный.
Данные: sitespeed.ru, webpagetest.org

26. ОК
Данные: sitespeed.ru, webpagetest.org
Увеличить число параллельных потоков

27. Сжатие данных

28. Сжатие данных

29. Снижение количества файлов
Объединение и минификация javascript.
)
Объединение CSS
)
Спрайты

30. Спрайты
Один большой спрайт – тоже плохо.
Пока он загрузится посетитель будет
ждать с полупустым сайтом.

31. Спрайты: математика
• 20 мелких повторяющихся элементов,
суммарно 100 кб
• 1 окно: 12 600 байт (например)
• 20 окон или 20*100 мс = 2000 мс
)
• 1 спрайт, 100 кб
• 8 окон или 8*100 мс = 800 мс

32. Спрайты: математика
• 20 мелких повторяющихся элементов,
суммарно 100 кб
• 1 окно: 12 600 байт (например)
• 20 окон или 20*100 мс = 2000 мс
)
• 1 спрайт, 100 кб
• 8 окон или 8*100 мс = 800 мс

33. Спрайты: математика
• 20 мелких повторяющихся элементов,
суммарно 100 кб
• 1 окно: 12 600 байт (например)
• 20 окон или 20*100 мс = 2000 мс
)
)
• 1 спрайт, 100 кб
• 8 окон или 8*100 мс = 800 мс

34. Спрайты: математика
• 20 мелких повторяющихся элементов,
суммарно 100 кб
• 1 окно: 12 600 байт (например)
• 20 окон или 20*100 мс = 2000 мс
)
)
• 1 спрайт, 100 кб
• 8 окон или 8*100 мс = 800 мс

35. Уменьшение изображений
• Не уменьшать картинки тегами в html
• Сохранять в правильном формате
• Сжимать посильнее
• Lazy Loading!
)
)
• УДАЛЯТЬ служебную информацию из
картинок!

36. Реальный пример
Сайт веб-студии
-2 Мб
фон в
PNG
> 15
cек
> 5
cек
Оптими
зация
файлов
3
cек

37. Реальный пример
Сайт веб-студии
-2 Мб
фон в
PNG
> 15
cек
> 5
cек
Оптими
зация
файлов
3
cек

38. Реальный пример
Сайт веб-студии
-2 Мб
фон в
PNG
> 15
cек
> 5
cек
Оптими-
зация
файлов
3
cек

39. Как проверить время
отображения сайта
на мобильном?

40. webpagetest.org - для декстопа :(
Превосходный инструмент:)
• Подробнейшая аналитика
по ходу загрузки конента
• Огромное количество
возможностей для проф.
использования
• Бесплатный!
• НО проверяет сайты на
декстопных браузерах

41. Веб-сервис: mobitest.akamai.com
• Проверка с различных
мобильных устройств
• Бесплатный!
• НО точка проверки в США,
что означает большие
задержки (RTT) и
искажение данных

42. Собственный
испытательный стенд
Вам понадобится:
• Собрать из исходников
приложение для iPhone
BzAgent
• Развернуть собственную
приватную ноду из
дистрибутива
webpagetest.org

43. Как это работает?
Приватная нода (веб-интерфейс) Мобильное приложение
Адрес
страницы
Результаты
загрузки

44. Собрать приложение для iPhone
BzAgent)
App для iPhone:
https://github.com/6a68/
mobitest-agent
• Собрать в Xcode
• Запустить в эмуляторе
• При наличии dev-аккаунта в
apple - установить на
реальный девайс.

45. Развернуть приватную ноду
webpagetest.org
Нода нужна для визуализации
результатов загрузки из
мобильного приложения.
Документация:
https://sites.google.com/a/
webpagetest.org/docs/private-
instances

46. Юрий Устинов Facebook: yuri.ustinov
yuri.ustinov@gmail.com Twitter: @sukahitriy
Спасибо,
#failoverconf :)