Скорость на мобильных: почему телефон показывает худший результат

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

Почему телефон медленнее

• Процессор телефона, особенно недорогого, выполняет JavaScript заметно медленнее компьютера
• Мобильный интернет имеет большую задержку и нестабильную скорость
• Памяти меньше, и тяжёлые страницы обрабатываются дольше
• Экран меньше, но сайты часто отдают те же огромные картинки, что и для компьютера

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

Главный враг — JavaScript

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

• Слайдеры и анимации на главной
• Виджеты чатов, обратного звонка, всплывающих окон
• Несколько систем аналитики и рекламных пикселей
• Тяжёлые темы и конструкторы страниц
• Библиотеки, подключённые целиком ради одной функции

Картинки

Для мобильного экрана не нужна картинка шириной в несколько тысяч пикселей. Используйте адаптивные изображения с разными размерами для разных экранов, современные форматы WebP или AVIF и отложенную загрузку для картинок ниже первого экрана. Главное изображение первого экрана, наоборот, не должно загружаться отложенно: от него зависит LCP.

Первый экран

Посмотрите на сайт с телефона: что видно до прокрутки? Часто это огромный баннер-слайдер, который грузится дольше всего и не несёт смысла. Лучше простой заголовок с предложением, кнопка связи и лёгкое изображение. Так страница и быстрее, и понятнее.

Шрифты

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

Сдвиги макета

На мобильных особенно раздражают прыгающие элементы: начал читать, а текст уехал вниз из-за подгрузившегося баннера. Задавайте размеры для картинок и рекламных блоков заранее, не вставляйте уведомления о cookies и баннеры поверх уже загруженного контента сдвигом.

Как проверять

• Отчёт о Core Web Vitals в Search Console отдельно для мобильных
• PageSpeed Insights во вкладке мобильной версии
• Реальный недорогой телефон через мобильный интернет, а не офисный Wi-Fi
• Режим эмуляции устройств и замедления сети в инструментах разработчика

Не ограничивайтесь главной: проверьте страницы услуг, категории и карточки, через которые приходят посетители из поиска.

Мобильная версия и индексация

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

С чего начать оптимизацию

1. Найдите и уберите лишние скрипты и виджеты.
2. Оптимизируйте главное изображение первого экрана.
3. Включите сжатие и кэширование на сервере.
4. Настройте адаптивные картинки и отложенную загрузку.
5. Упростите первый экран мобильной версии.

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