Почему мобильная версия медленнее десктопа

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

Ниже — почему мобильная версия медленнее и что проверять в первую очередь. Большинство проблем решается без переписывания сайта.

Разница не только в железе

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

7 причин медленной мобильной версии

• Изображения без srcset: телефон скачивает десктопную картинку целиком.
• Слишком много JavaScript и тяжёлые библиотеки.
• Шрифты, которые блокируют отрисовку текста.
• Сторонние виджеты: чаты, отзывы, аналитика и пиксели.
• Сложный DOM и большое количество элементов в каталоге.
• Анимации и эффекты, которые нагружают процессор.
• Отсутствие кэша и повторная загрузка ресурсов при каждом переходе.

Отдельно стоит проверить, не показываете ли вы мобильным пользователям тот же объём контента, что и десктопным. Скрытые через CSS блоки всё равно загружаются и занимают память.

Как измерять на мобильных

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

• Lighthouse с throttling процессора и сети.
• PageSpeed Insights с данными поля.
• Метрика и RUM по мобильным сегментам.
• Реальное устройство среднего Android.

Что оптимизировать первым

Изображения и шрифты

Мобильный экран маленький, но именно туда часто отдают самую большую картинку. Проверьте, что для телефона готовится отдельный размер, а не десктопный баннер. Для карточек товаров достаточно 400–800 пикселей по ширине, если нет Retina-сценария.

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

JavaScript и сторонние скрипты

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

• Загружайте чат только после клика или прокрутки.
• Отключите дублирующие счётчики и пиксели.
• Не подключайте тяжёлые слайдеры ради одного баннера.
• Проверьте, не блокирует ли сторонний скрипт основной поток.

План на две недели

Мобильная скорость — это не отдельный проект, а часть работы над конверсией. Начните с изображений и скриптов: они чаще всего дают самый заметный эффект за короткое время.

Мобильный checkout

Даже быстрый каталог не спасёт, если оформление заказа на телефоне неудобно. Мобильный checkout нужно проверять отдельно: поля, клавиатура, автозаполнение, выбор доставки и оплаты.

• Одна колонка и крупные элементы управления.
• Правильные типы полей и автозаполнение.
• Маска телефона, которая не мешает вводу.
• Поиск пункта выдачи и понятная карта.
• Оплата в один тап через доступный способ.

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

Проверка на реальных устройствах

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

• Откройте сайт в мобильной сети, а не в Wi-Fi.
• Проверьте каталог, карточку, корзину и оплату.
• Сравните поведение в Chrome и Safari.
• Посмотрите, не теряется ли корзина при переключении вкладок.

Типичные ошибки

• Оценивать мобильную скорость только по Lighthouse.
• Сжимать картинки, но оставлять тяжёлые скрипты.
• Скрывать блоки через CSS, не убирая их из загрузки.
• Не проверять checkout на реальном телефоне.
• Оптимизировать один раз и не следить за регрессиями.

Что делать после оптимизации

После изменений сравните метрики и конверсию на мобильных. Если скорость выросла, а заказы нет, проблема может быть в удобстве формы, доверии или условиях доставки.

• Смотрите LCP и INP по мобильному сегменту.
• Сравнивайте конверсию до и после.
• Проверяйте ошибки и отказы на ключевых шагах.

Как выбрать приоритет

Ускорить всё сразу не получится. Выбирайте по влиянию на деньги: сначала первый экран и checkout, затем каталог, потом второстепенные страницы.

Что не поможет

• Покупка более мощного сервера без диагностики.
• Сжатие одного баннера вместо системных проблем.
• Отключение аналитики ради оценки Lighthouse.
• Однократная оптимизация без мониторинга.

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

Кэш и повторные визиты

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

• Долгий кэш для статики с версионированием.
• Кэш страниц с инвалидацией по изменениям.
• Проверка, что цены и остатки не залипают.

Что проверить в первый день

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

Не забывайте про повторные визиты и переходы внутри сайта. Если каждая страница загружается с нуля, пользователь тратит время на каждом шаге. Кэш и предзагрузка следующих экранов делают путешествие по каталогу заметно быстрее.

Начните с одного шаблона, который приносит больше всего денег. Доведите его до хороших метрик, проверьте на реальном телефоне и только потом переходите к остальным. Так вы быстрее увидите эффект и не распылите силы.