Как увеличить загрузку мобильного сайта: декомпозиция загрузки
Даже при среднем 4G(или хорошем 3G) мобильном соединении в 5-10 мбит/с средний мобильный сайт (1896 КБ) должнен загружаться не более чем за 2 секунды. Но почему же тогда практический любой сайт, открываемый на мобильном грузится довольно долго? Наверное вы замечали, что серфинг на мобильном значительно отличается от desktop.
Для описания загрузки сайта мы воспользовались проектом HTTP Archive, который краулит миллионы (делает замеры в lighthouse) url на десктопах(4 млн.) и мобильных(5 млн.), и построили следующую диаграмму:
Цифры на диаграмме (и ниже) усредненные: используется 3G, средний телефон Moto G4, и данные по всем сайтам усреднены.
При загрузке сайта сначала загружается html, далее в зависимости от протокола http/1 или http/2 формируются приоритеты для загрузки других ресурсов. Загружаются css, шрифты, js, img.
Сначала пояляется первая часть контента по которой пользователь понимает, что сайт грузится в принципе, метрика FCP(First Contentful Paint) для среднего смартфона и 3g соединения составляет 5.7 секунд, для desktop 2.3 секунды. Но в это время мы еще пока не можем пользоваться навигацией и прочими интерактивными элементами, до тех пор пока javascript не будет спарсен, скомпилирован и исполнен.
После этого можно посмотреть на метрику TTI(Time to interactive):
Эта метрика как раз показывает когда уже можно взаимодействовать с мобильным сайтом: сейчас это 9.3 секунды, а год назад было 15 секунд.
Все дело в том, что кроме затрат на загрузку ресурсов, самым дорогим по времени является парсинг и выполнение js и именно это замедляет первичную загрузку страницы(парсинг) и TTI(js execution). Парсинг и компиляция css и построение cssdom, шрифтов, рендеринг images также занимает какое-то время(обычно от 10 до 200 мс), но это не первое, что нужно оптимизировать.
Парсинг JS.
После загрузки js браузер производит декомпрессию(если source был сжат), парсинг кода и компиляцию. Операция parsing/compile выполняется в main thread и является блокирующей для всех других операций выполняющихся в этом потоке(до Chrome 71), в том числе рендеринг.
Данный этап может занимать от 2 до 15 секунд в зависимости от мощности процессора телефона и ресурсов сайта.
По данным наших замеров эмулятор Moto G4 с версией Chrome 61 250Kb gzipped(сжатого) кода ~ 1 Mb распакованного парсится за 2000 ms. Все замеры с пошаговой инструкцией и примерами мы выложим в след. статье посвященной парсингу JS.
Конечно в реальности нужно смотреть на google analytics, чтобы делать тесты своего сайта на девайсах ваших пользователей, а не на том смартфоне, что лежит у вас в кармане.
Возможные решения:
1) отказаться от тяжелых SPA приложений с большим кол-вом js кода, особенно на mobile.
2) Для mobile лучше всего сделать статический сайт, а если требуется функциональность SPA, то лучше сделать отдельное мобильное приложение. 3) Искать более легкие библиотеки.
Выполнение JS.
Выполнение скриптов зависит от выполняемых операций, а использование сторонних библиотек упрощает код, но часто приводит к потери производительности. Возьмем к примеру Jquery.
Для наглядной иллюстрации по скорости выполения мы замерили 1000 append операций с помощью Jquery и чистого JS. На чистом JS данная операция выполняется в 4 раза быстрее.
Данный замер проводился на macbook pro, и для среднего телефона можно умножить в 6-8 раз, а это уже 2-3 секунды.
Мы взяли эту операцию, т.к данная операция чаще всего используется в Jquery плагинах, например в каруселях, а поскольку карусель это то, что пользователь должен увидеть в хидере страницы, это замедлит FCP - фидбек от сайта, когда пользователь видит первично, что сайт загружается, что может перейти в отказ.
Решение: по возможности использовать чистые решения с минимальным кол-вом библиотек, по максимуму искать альтернативные решения на чистом JS.
В итоге получилось, что на загрузку ресурсов среднего сайта на среднем мобильном устройстве может уходить 3-5 секунд, на парсинг до 13, и на выполнение каких-то операций от 3 секунд(из примера). Но на самом деле итоговая цифра загрузки это не главное, сайт может грузиться хоть полчаса, лишь бы это не блокировало визуализацию и интерактивность сайта, ведь именно это приводит к отказам пользователей.
В следующей статье мы будем разбираться как уменьшить время парсинга и выполнения скриптов, а также посмотрим и узнаем как большие сайты загружают и исполняют скрипты в несколько десятков мегабайт.