Ускорение 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 yuri.ustinov@gmail.com Twitter: @sukahitriy

Спасибо, #failoverconf :)