![Page 1: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/1.jpg)
Ускорение client-side )для мобильных устройств
Юрий Устинов
Москва, 23 мая 2014
![Page 2: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/2.jpg)
О чем речь?Как изменить
! ! ! ! ! ! ! контент сайта ! и его подачу,
чтобы
ускорить
отображение сайта
на мобильных.
![Page 3: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/3.jpg)
Фото девочки с телефоном
![Page 4: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/4.jpg)
Загрузка сайта
DNS (узнаем, где сайт)
![Page 5: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/5.jpg)
Загрузка сайта
DNS (узнаем, где сайт)
Сеть (стучимся туда, где сайт)
![Page 6: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/6.jpg)
Загрузка сайта
DNS (узнаем, где сайт)
Сеть (стучимся туда, где сайт)
Ждем ответа сервера (он создает html)
![Page 7: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/7.jpg)
Загрузка сайта
DNS (узнаем, где сайт)
Сеть (стучимся туда, где сайт)
Ждем ответа сервера (он создает html)
Загружаем содержимое (html)
![Page 8: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/8.jpg)
![Page 9: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/9.jpg)
Фото умной девочки
![Page 10: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/10.jpg)
Установка соединения
Посетитель Сервер
![Page 11: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/11.jpg)
RTT – правда жизни
Round Trip Time!время за которое сигнал проходит от
посетителя к серверу и обратно
![Page 12: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/12.jpg)
Скорость света конечна, да)
)
Москва Москва )
)
Москва Германия )
)
Москва Нидерланды
30-50 мс
70 мс
100 мс
![Page 13: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/13.jpg)
Данные передаются в рамках окна
• Для открытия окна требуется 1 RTT )
• Чем стабильнее канал, тем больше размер окна, выше скорость передачи
)
• Если есть потери - размер окна уменьшается, скорость передачи падает катастрофически
1 2 3 4 … N
![Page 14: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/14.jpg)
ПримерHtml-cтраница размером 30720 байт )
1 сегмент: 1400 байт )
1 окно: 9 сегментов или 12600 байт )
Для загрузки страницы потребуется 3 окна (30400/12600 ~ 3). )
Минимальное время загрузки в этих условиях: 4 RTT 1RTT (соединение) + 3RTT (данные)
![Page 15: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/15.jpg)
Подробно о сетевых протоколах
Александр Сербул
Сетевые протоколы для веб-разработчика - выжимаем максимум Сегодня, в 16:40
![Page 16: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/16.jpg)
![Page 17: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/17.jpg)
Вывод
• Минимизировать объем контента
• Облегчить браузеру загрузку
• Снизить RTT (время на прохождение сигнала)
![Page 18: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/18.jpg)
Варианты?
• Мобильное приложение
• Отдельная мобильная версия сайта
• Адаптивный дизайн
• Обычный сайт для всех
![Page 19: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/19.jpg)
Интересный пример
Приложение отдельно
Сайт как приложение
![Page 20: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/20.jpg)
ТОП 100 ИМ. Статистика
25 из 100 имеют мобильную версию
![Page 21: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/21.jpg)
Время «холодной» загрузки страницы
![Page 22: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/22.jpg)
Время отображения страницы в среднем, сек.
![Page 23: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/23.jpg)
Объем загружаемых данныхв среднем, КБ
![Page 24: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/24.jpg)
Как ускорить сайт для мобильных?
![Page 25: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/25.jpg)
Увеличить число параллельных потоков
На слайде не самый лучший пример. Выигрыш минимальный.
Данные: sitespeed.ru, webpagetest.org
![Page 26: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/26.jpg)
ОК
Данные: sitespeed.ru, webpagetest.org
Увеличить число параллельных потоков
![Page 27: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/27.jpg)
Сжатие данных
![Page 28: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/28.jpg)
Сжатие данных
![Page 29: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/29.jpg)
Снижение количества файлов
Объединение и минификация javascript. )
Объединение CSS )
Спрайты
![Page 30: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/30.jpg)
СпрайтыОдин большой спрайт – тоже плохо. Пока он загрузится посетитель будет ждать с полупустым сайтом.
![Page 31: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/31.jpg)
Спрайты: математика• 20 мелких повторяющихся элементов, суммарно 100 кб
• 1 окно: 12 600 байт (например) • 20 окон или 20*100 мс = 2000 мс
)
• 1 спрайт, 100 кб • 8 окон или 8*100 мс = 800 мс
![Page 32: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/32.jpg)
Спрайты: математика• 20 мелких повторяющихся элементов, суммарно 100 кб
• 1 окно: 12 600 байт (например) • 20 окон или 20*100 мс = 2000 мс
)
• 1 спрайт, 100 кб • 8 окон или 8*100 мс = 800 мс
![Page 33: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/33.jpg)
Спрайты: математика• 20 мелких повторяющихся элементов, суммарно 100 кб
• 1 окно: 12 600 байт (например) • 20 окон или 20*100 мс = 2000 мс
)
)
• 1 спрайт, 100 кб • 8 окон или 8*100 мс = 800 мс
![Page 34: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/34.jpg)
Спрайты: математика• 20 мелких повторяющихся элементов, суммарно 100 кб
• 1 окно: 12 600 байт (например) • 20 окон или 20*100 мс = 2000 мс
)
)
• 1 спрайт, 100 кб • 8 окон или 8*100 мс = 800 мс
![Page 35: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/35.jpg)
Уменьшение изображений• Не уменьшать картинки тегами в html • Сохранять в правильном формате • Сжимать посильнее • Lazy Loading!
)
)
• УДАЛЯТЬ служебную информацию из картинок!
![Page 36: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/36.jpg)
Реальный примерСайт веб-студии
-2 Мб фон в PNG
> 15 cек
> 5 cек
Оптимизация файлов
3 cек
![Page 37: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/37.jpg)
Реальный примерСайт веб-студии
-2 Мб фон в PNG
> 15 cек
> 5 cек
Оптимизация файлов
3 cек
![Page 38: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/38.jpg)
Реальный примерСайт веб-студии
-2 Мб фон в PNG
> 15 cек
> 5 cек
Оптими-зация файлов
3 cек
![Page 39: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/39.jpg)
Как проверить время отображения сайта на мобильном?
![Page 40: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/40.jpg)
webpagetest.org - для декстопа :(Превосходный инструмент:)
• Подробнейшая аналитика по ходу загрузки конента
• Огромное количество возможностей для проф. использования
• Бесплатный!
• НО проверяет сайты на декстопных браузерах
![Page 41: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/41.jpg)
Веб-сервис: mobitest.akamai.com
• Проверка с различных мобильных устройств
• Бесплатный!
• НО точка проверки в США, что означает большие задержки (RTT) и искажение данных
![Page 42: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/42.jpg)
Собственный испытательный стенд
Вам понадобится:
• Собрать из исходников приложение для iPhone BzAgent
• Развернуть собственную приватную ноду из дистрибутива webpagetest.org
![Page 43: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/43.jpg)
Как это работает?
Приватная нода (веб-интерфейс) Мобильное приложение
Адрес страницы
Результаты загрузки
![Page 44: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/44.jpg)
Собрать приложение для iPhone
BzAgent)
App для iPhone:
https://github.com/6a68/mobitest-agent
• Собрать в Xcode
• Запустить в эмуляторе
• При наличии dev-аккаунта в apple - установить на реальный девайс.
![Page 45: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/45.jpg)
Развернуть приватную ноду webpagetest.org
Нода нужна для визуализации результатов загрузки из мобильного приложения.
Документация:
https://sites.google.com/a/webpagetest.org/docs/private-instances
![Page 46: Ускорение client-side для мобильных устройств. Failoverconf 2014](https://reader034.vdocuments.site/reader034/viewer/2022042715/557f13bcd8b42a01678b4b76/html5/thumbnails/46.jpg)
Юрий Устинов Facebook: yuri.ustinov [email protected] Twitter: @sukahitriy
Спасибо, #failoverconf :)