Mobile Device Management. Управление жизненным циклом мобильных устройств
Ускорение client-side для мобильных устройств. Failoverconf 2014
-
Upload
yuri-ustinov -
Category
Technology
-
view
409 -
download
0
description
Transcript of Ускорение client-side для мобильных устройств. Failoverconf 2014
Ускорение client-side )для мобильных устройств
Юрий Устинов
Москва, 23 мая 2014
О чем речь?Как изменить
! ! ! ! ! ! ! контент сайта ! и его подачу,
чтобы
ускорить
отображение сайта
на мобильных.
Фото девочки с телефоном
Загрузка сайта
DNS (узнаем, где сайт)
Загрузка сайта
DNS (узнаем, где сайт)
Сеть (стучимся туда, где сайт)
Загрузка сайта
DNS (узнаем, где сайт)
Сеть (стучимся туда, где сайт)
Ждем ответа сервера (он создает html)
Загрузка сайта
DNS (узнаем, где сайт)
Сеть (стучимся туда, где сайт)
Ждем ответа сервера (он создает html)
Загружаем содержимое (html)
Фото умной девочки
Установка соединения
Посетитель Сервер
RTT – правда жизни
Round Trip Time!время за которое сигнал проходит от
посетителя к серверу и обратно
Скорость света конечна, да)
)
Москва Москва )
)
Москва Германия )
)
Москва Нидерланды
30-50 мс
70 мс
100 мс
Данные передаются в рамках окна
• Для открытия окна требуется 1 RTT )
• Чем стабильнее канал, тем больше размер окна, выше скорость передачи
)
• Если есть потери - размер окна уменьшается, скорость передачи падает катастрофически
1 2 3 4 … N
ПримерHtml-cтраница размером 30720 байт )
1 сегмент: 1400 байт )
1 окно: 9 сегментов или 12600 байт )
Для загрузки страницы потребуется 3 окна (30400/12600 ~ 3). )
Минимальное время загрузки в этих условиях: 4 RTT 1RTT (соединение) + 3RTT (данные)
Подробно о сетевых протоколах
Александр Сербул
Сетевые протоколы для веб-разработчика - выжимаем максимум Сегодня, в 16:40
Вывод
• Минимизировать объем контента
• Облегчить браузеру загрузку
• Снизить RTT (время на прохождение сигнала)
Варианты?
• Мобильное приложение
• Отдельная мобильная версия сайта
• Адаптивный дизайн
• Обычный сайт для всех
Интересный пример
Приложение отдельно
Сайт как приложение
ТОП 100 ИМ. Статистика
25 из 100 имеют мобильную версию
Время «холодной» загрузки страницы
Время отображения страницы в среднем, сек.
Объем загружаемых данныхв среднем, КБ
Как ускорить сайт для мобильных?
Увеличить число параллельных потоков
На слайде не самый лучший пример. Выигрыш минимальный.
Данные: sitespeed.ru, webpagetest.org
ОК
Данные: sitespeed.ru, webpagetest.org
Увеличить число параллельных потоков
Сжатие данных
Сжатие данных
Снижение количества файлов
Объединение и минификация javascript. )
Объединение CSS )
Спрайты
СпрайтыОдин большой спрайт – тоже плохо. Пока он загрузится посетитель будет ждать с полупустым сайтом.
Спрайты: математика• 20 мелких повторяющихся элементов, суммарно 100 кб
• 1 окно: 12 600 байт (например) • 20 окон или 20*100 мс = 2000 мс
)
• 1 спрайт, 100 кб • 8 окон или 8*100 мс = 800 мс
Спрайты: математика• 20 мелких повторяющихся элементов, суммарно 100 кб
• 1 окно: 12 600 байт (например) • 20 окон или 20*100 мс = 2000 мс
)
• 1 спрайт, 100 кб • 8 окон или 8*100 мс = 800 мс
Спрайты: математика• 20 мелких повторяющихся элементов, суммарно 100 кб
• 1 окно: 12 600 байт (например) • 20 окон или 20*100 мс = 2000 мс
)
)
• 1 спрайт, 100 кб • 8 окон или 8*100 мс = 800 мс
Спрайты: математика• 20 мелких повторяющихся элементов, суммарно 100 кб
• 1 окно: 12 600 байт (например) • 20 окон или 20*100 мс = 2000 мс
)
)
• 1 спрайт, 100 кб • 8 окон или 8*100 мс = 800 мс
Уменьшение изображений• Не уменьшать картинки тегами в html • Сохранять в правильном формате • Сжимать посильнее • Lazy Loading!
)
)
• УДАЛЯТЬ служебную информацию из картинок!
Реальный примерСайт веб-студии
-2 Мб фон в PNG
> 15 cек
> 5 cек
Оптимизация файлов
3 cек
Реальный примерСайт веб-студии
-2 Мб фон в PNG
> 15 cек
> 5 cек
Оптимизация файлов
3 cек
Реальный примерСайт веб-студии
-2 Мб фон в PNG
> 15 cек
> 5 cек
Оптими-зация файлов
3 cек
Как проверить время отображения сайта на мобильном?
webpagetest.org - для декстопа :(Превосходный инструмент:)
• Подробнейшая аналитика по ходу загрузки конента
• Огромное количество возможностей для проф. использования
• Бесплатный!
• НО проверяет сайты на декстопных браузерах
Веб-сервис: mobitest.akamai.com
• Проверка с различных мобильных устройств
• Бесплатный!
• НО точка проверки в США, что означает большие задержки (RTT) и искажение данных
Собственный испытательный стенд
Вам понадобится:
• Собрать из исходников приложение для iPhone BzAgent
• Развернуть собственную приватную ноду из дистрибутива webpagetest.org
Как это работает?
Приватная нода (веб-интерфейс) Мобильное приложение
Адрес страницы
Результаты загрузки
Собрать приложение для iPhone
BzAgent)
App для iPhone:
https://github.com/6a68/mobitest-agent
• Собрать в Xcode
• Запустить в эмуляторе
• При наличии dev-аккаунта в apple - установить на реальный девайс.
Развернуть приватную ноду webpagetest.org
Нода нужна для визуализации результатов загрузки из мобильного приложения.
Документация:
https://sites.google.com/a/webpagetest.org/docs/private-instances
Юрий Устинов Facebook: yuri.ustinov [email protected] Twitter: @sukahitriy
Спасибо, #failoverconf :)