Приложение или сайт: почему приложение быстрее?

Листаете ленту Instagram — она скользит под пальцем, гладко, как по льду. Фотографии уже на месте, ещё до того как вы их попросили. Потом нажимаете ссылку на сайт того же бренда в его профиле. И белый экран, крутящийся кружок, а следом страница вздрагивает и встаёт на место.

Тот же телефон. Тот же Wi-Fi. Та же секунда. Одно кажется живым, другое — будто с трудом переводит дыхание. Вы замечали это сотни раз. Почему так?

Короткий ответ не в дизайне. Почему мобильные приложения работают быстрее и плавнее сайтов? Потому что приложение живёт в вашем телефоне. Его экраны и логика уже установлены. А сайт чаще всего каждый раз подгружается заново из сети. Вся разница в том, где выполняется работа. Ниже разберём это на цифрах и на реальных примерах: Twitter, Starbucks, Pinterest.

Разница, которую ловит глаз: 16 миллисекунд

Плавность — это не дело вкуса. Её можно измерить.

Экран телефона перерисовывается 60 раз в секунду. Значит, на каждый кадр есть всего 16 миллисекунд. Моргнуть вы успеваете примерно за 100 миллисекунд, а телефон за это же одно моргание должен перерисовать экран шесть раз. Не успел — кадры выпадают, и глаз ловит это мгновенно. Инженеры называют такой рывок jank.

Сколько человек готов ждать, исследователи измеряют десятилетиями. Классические пороги Якоба Нильсена такие:

Время ответа	Что чувствует человек
0,1 секунды	Мгновенно: система ответила сразу
1 секунда	Мысль не прерывается, работа идёт
10 секунд	Внимание уходит, и человек тоже

Есть ещё одна черта. В 1982 году инженеры IBM выяснили: если система отвечает быстрее ~400 миллисекунд, человек перестаёт ждать и втягивается в работу. Практическое правило Google похоже: ответь на касание в пределах 100 миллисекунд, крути анимацию на 60 кадрах в секунду.

Плавность — не вкус, а точный бюджет, который замечает ваш мозг. Весь вопрос в том, кто этот бюджет платит, а кто нет.

Секрет: приложение живёт в телефоне, а сайт каждый раз приходит из сети

Объясним просто. Каждый раз, когда вы открываете страницу, сайт отправляет гонца на другой конец города: «принеси мне свежую копию». А приложение держит всю книгу на вашей полке. Оно просто перелистывает на следующую страницу.

Экраны, кнопки и логика вёрстки нативного приложения уже установлены в вашем телефоне. Когда вы нажимаете кнопку, приложение в основном переставляет то, что и так на месте. Интернет ждать не нужно.

Обычный сайт при каждом переходе чаще всего запрашивает страницу из сети заново. Это поездка на далёкий сервер и обратно, потом повторная загрузка и повторная отрисовка. В мобильном интернете или при слабом сигнале именно эта поездка превращается в ту задержку, которую вы чувствуете.

Приложения хранят ваши данные и в телефоне, а в фоне синхронизируют их. Поэтому вчерашняя переписка появляется на экране ещё до того, как ответит сеть.

Вы это чувствовали: приложение открывается сразу с контентом, а сайт — сначала с крутящимся кружком.

Одно и то же касание — разный результат, потому что работа выполняется в разных местах.

Иллюзия — это тоже инженерия: как приложения прячут ожидание

Большая часть плавности — тщательно продуманная иллюзия.

Скелетон (skeleton screen) — вместо контента сначала появляются серые блоки и линии, будто страница уже здесь и осталось только наполнить её. Крутящийся кружок (spinner) говорит лишь «жди». В контролируемых тестах скелетоны воспринимались быстрее при одинаковой реальной скорости. Например, в тесте Viget примерно на 20% быстрее. Но это не магия: плохой, застывший скелетон, наоборот, кажется медленнее. Надёжно работает только тот, что мерцает в направлении загрузки.

Оптимистичный интерфейс (optimistic UI): нажимаете сердечко — оно заполняется сразу. Приложение заранее предполагает успех, тихо сверяется с сервером и откатывает только при ошибке. Лайки в Instagram и Twitter работают именно так.

Предзагрузка: пока вы читаете текущий экран, приложение в фоне готовит тот, который вы, скорее всего, откроете следующим.

Большая часть ощущения «плавно» — честная инженерная иллюзия. Сайты умеют все эти приёмы; просто большинство их не применяет.

Почему многие сайты кажутся медленными: что ломает скорость сайта

Поездка на сервер из прошлого раздела — это лишь фундамент. Многие сайты наваливают сверху ещё несколько тяжестей:

• Тяжёлый JavaScript: единственный работник страницы занят сборкой вёрстки и буквально «не слышит» ваше касание. Экран на миг застывает.
• Пересчёт вёрстки (reflow): поздно загрузившаяся реклама сдвигает текст вниз, ровно в тот момент, когда палец уже жмёт.
• Груз третьих сторон: рекламные скрипты, трекеры (tracker), виджеты чата, пять отдельных файлов шрифтов. Каждый добавляет вес и задержку.
• Первая загрузка без кеша: при первом визите ничего не сохранено, поэтому всё грузится с нуля.

Теперь реальные цифры. Они старые, но направление показывают точно:

• Исследование Google (2017): если страница не открывается за 3 секунды, 53% мобильных визитов теряются. Сайты, грузящиеся за 5 секунд, против 19-секундных дают на 70% более длинные сессии и на 35% меньше отказов.
• Те же данные Google/DoubleClick (2016): средний мобильный сайт грузился по 3G около 19 секунд.
• Akamai (2009): почти половина людей (47%) ждёт открытия страницы за 2 секунды. Это цифра Akamai, а не Google. С тех пор сети перешли на 4G и 5G, но порог терпения не изменился.

Возникает вопрос: если решение известно, почему его применяет не каждый сайт? Потому что медленность — обычно не технический предел, а вопрос приоритетов. Кто-то выбрал маркетинговые теги, рекламные сети и виджеты вместо скорости.

Многие медленные сайты не сломаны. Они придавлены чьими-то решениями.

Когда сайты стали приложениями: 4 реальных примера

Так что же происходит, когда сайт действительно платит бюджет плавности? Около 2017 года четыре крупных продукта сделали именно это. Перестроили свой сайт так, чтобы он работал как приложение. Тот же веб, тот же браузер, другие решения.

Такие сайты называют PWA (Progressive Web App): сайт, который открывается в браузере, но работает как приложение и хранит свою «оболочку» в телефоне.

• Twitter Lite: страниц за сессию стало на 65% больше. Веб-версия весила всего 600 КБ, почти в 40 раз меньше, чем 23,5 МБ приложения под Android. (разбор web.dev)
• Starbucks: число ежедневных активных веб-пользователей выросло вдвое. Веб-приложение — 233 КБ, почти в 600 раз меньше, чем 148 МБ приложения под iOS. 148 МБ — это сезон подкаста; 233 КБ — пара SMS. А экран заказа тот же.
• Pinterest: рекламная выручка выросла на 44%, вовлечённость — на 60%. Загрузка по 3G упала с 23 секунд до менее чем 5. Старый сайт превращал в клиентов лишь 1% мобильных пользователей.
• Tinder Online: загрузка сократилась с 11,91 до 4,69 секунды, первая отрисовка — примерно с 1 до 0,5 секунды. Веб-версия — 2,8 МБ вместо 30 МБ+ у нативного приложения. (разбор Эдди Османи)

Собрали всё в одну таблицу. Все они перестроены как PWA:

Сайт	Размер: веб и native	Загрузка: было → стало	Главный результат
Twitter Lite	600 КБ и 23,5 МБ (~40× меньше)	—	+65% страниц за сессию
Starbucks	233 КБ и 148 МБ (~600× меньше)	—	2× ежедневных веб-пользователей
Pinterest	—	23 с → менее 5 с (3G)	+60% вовлечённости, +44% выручки
Tinder	2,8 МБ и 30 МБ+	11,91 с → 4,69 с	опыт, близкий к нативному

Веб-приложение Starbucks почти в 600 раз меньше нативного. И делает ту же работу.

Ничего из этого не потребовало App Store. Потребовалась лишь команда, которая решила, что веб-версия достойна той же заботы.

Плавность — не привилегия App Store; её можно повторить и в открытом вебе.

Так эта разница навсегда?

Будем честны: нативное приложение кое-где всё ещё впереди.

• Глубокие технические задачи: тяжёлые 3D-игры, камера, Bluetooth, датчики и плотная работа в фоне.
• Реальность iPhone: на iPhone PWA до сих пор второсортны. Apple долго ограничивала установку, хранение данных и push-уведомления, поэтому «добавить на главный экран» на iOS работает заметно слабее.
• Распространение и доверие: присутствие в App Store, рейтинг, повторное вовлечение через push, привычная иконка на главном экране — всё это сайт бесплатно не получает.

Поэтому скажем прямо: по ощущению веб почти закрыл разрыв, но по возможностям — ещё не полностью.

Теперь покажем на практике мысль «всё дело в решениях». В следующий раз, когда будете пользоваться каким-нибудь продуктом, вы сами это заметите:

• скелетон вместо крутящегося кружка;
• сердечко, которое «заполнилось» ещё до ответа сервера;
• страница, которая не прыгает во время загрузки.

Это признаки плавности. Плавный продукт уважает ваше внимание, те самые 16 миллисекунд. А тот, что застывает, к нему безразличен.

Вспомните картину из начала: скользящая лента Instagram и вздрагивающий сайт бренда. Тот сайт проиграл не App Store. Он проиграл команде, которая приняла решения иначе, чем команда Instagram.

В следующий раз, когда сайт покажется живым, значит, кто-то приложил внимание. А если он вздрогнет, теперь вы точно знаете, что именно упустили.

Плавность — не магия, а уважение.