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

Знакомая картина: владелец открывает сайт на рабочем компьютере — всё летает, страницы появляются мгновенно, претензий нет. Потом кто-то из клиентов жалуется, что сайт «висит». Открывают на телефоне — и действительно: белый экран пять секунд, потом рывками появляется шапка, потом прыгает вёрстка, потом наконец грузится главная картинка.

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

Разберём, откуда берётся эта разница и что с ней делать.

Почему на телефоне медленнее: четыре причины

Дело не в одном факторе, а в совпадении сразу нескольких.

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

Плохая связь. Компьютер в офисе подключён по проводу или по устойчивой сети. Телефон — по мобильной связи, часто в движении, в подвале магазина, в лифте, за городом. Скорость скачет, задержки растут, часть запросов уходит в никуда и повторяется.

Другой сценарий использования. С телефона заходят на ходу, часто из объявления или из карточки на карте, с готовностью ждать пару секунд, не больше. Порог терпения ниже.

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

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

Что чаще всего тормозит именно мобильную версию

Тяжёлые изображения

Самая распространённая причина, и почти всегда самая простая для исправления.

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

Что нужно:

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

Одна эта работа часто ускоряет сайт на телефоне вдвое.

Скрипты и виджеты

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

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

Что делать:

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

Шрифты

Нестандартные шрифты подключаются файлами, и пока они не скачались, текст либо не виден вовсе, либо потом перерисовывается со скачком вёрстки.

Что помогает: подключать только используемые начертания (не восемь, а два-три), хранить файлы шрифтов на своём сервере, а не тянуть с чужого, включить режим показа запасного шрифта до загрузки основного.

Тяжёлый первый экран

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

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

Вёрстка, которая прыгает

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

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

Мобильная версия, которая грузит всё «взрослое»

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

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

Медленный ответ сервера

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

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

Как проверить правильно

Ошибка большинства проверок — смотреть с быстрого компьютера в офисе.

Проверяйте на реальном телефоне. Не в режиме имитации на компьютере, а на настоящем аппарате, желательно не самом новом.

Проверяйте в режиме без сохранённых данных. Иначе вы измеряете кэш.

Проверяйте при мобильной связи, а не по офисной сети. Выйдите на улицу.

Проверяйте не только главную. Страница услуги, карточка товара, страница контактов, страница блога — они могут вести себя совершенно по-разному.

Смотрите на реальную статистику. В Яндекс.Метрике есть данные о времени загрузки страниц и разбивка по устройствам. Это точнее любого теста, потому что показывает, что происходит у ваших посетителей, а не у тестового робота.

Сравнивайте поведение. В Яндекс.Метрике сравните долю посетителей с телефонов и с компьютеров, дошедших до обращения. Если с телефонов она заметно ниже при сопоставимом трафике — почти наверняка дело в скорости или в удобстве мобильной версии.

Полезный приём — посмотреть запись сеанса посетителя с телефона в вебвизоре. Часто становится сразу видно: человек ждёт, ждёт, пытается нажать, промахивается из-за скачка вёрстки, уходит.

Порядок работ: с чего начинать

Не пытайтесь сделать всё сразу. Порядок по соотношению эффекта и трудозатрат.

1. Изображения. Уменьшить, сжать, включить отложенную загрузку. Самый большой эффект при наименьших усилиях.
2. Ревизия виджетов. Убрать неиспользуемые, отложить загрузку оставшихся.
3. Первый экран. Убрать тяжёлый слайдер, оставить одно лёгкое изображение.
4. Кэширование на сервере. Чтобы страница не собиралась заново при каждом обращении.
5. Шрифты. Сократить количество начертаний, положить к себе.
6. Фиксированные размеры элементов, чтобы вёрстка не прыгала.
7. Проверка времени ответа сервера и, если нужно, переезд на нормальный тариф.
8. Разные размеры картинок для разных экранов.

После каждого шага — замер. Иначе непонятно, что дало эффект.

Скорость — это не только загрузка

Есть вещи, которые воспринимаются посетителем как «сайт тормозит», хотя формально страница загрузилась быстро. Их стоит проверить отдельно, потому что на обращения они влияют не меньше.

Долгий отклик на нажатие. Человек нажимает кнопку, ничего не происходит, он нажимает ещё раз, потом третий. Причина — тяжёлые скрипты, занявшие процессор телефона: страница нарисована, но не реагирует. Лечится сокращением и отсрочкой скриптов.

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

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

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

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

Автовоспроизведение видео. Тянет мегабайты по мобильной связи и мгновенно портит впечатление, особенно если ещё и со звуком.

Все эти вещи не видны в тестах скорости. Они видны в вебвизоре и при личной проверке на телефоне.

Что не нужно делать

Гнаться за оценкой в сервисах проверки. Оценка — вспомогательный ориентир. Сайт с невысокой оценкой, который открывается за две секунды и даёт обращения, лучше сайта с идеальной оценкой и пустой формой.

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

Убирать всё подряд ради скорости. Онлайн-консультант, дающий двадцать обращений в месяц, стоит полсекунды загрузки. Считайте баланс, а не только миллисекунды.

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

Как это связано с продвижением 3 в 1

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

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

Яндекс.Справочник. Из карточки в Яндекс Картах человек переходит на сайт почти всегда с телефона, часто на ходу и при слабой связи. Если сайт не открывается за пару секунд, он возвращается в карточку и звонит конкуренту, который рядом. Поэтому в карточке обязательно должны быть телефон, услуги и цены — чтобы обращение состоялось даже без перехода на сайт.

2ГИС. Здесь ситуация ещё жёстче: аудитория приложения полностью мобильная. Переход на сайт из 2ГИС — это всегда телефон, всегда на ходу.

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

Как измерить результат

Время загрузки по данным Яндекс.Метрики, отдельно для телефонов, до и после. Это объективная цифра по реальным посетителям.

Доля посетителей с телефонов, дошедших до обращения. Главный показатель. Если она выросла — работа окупилась.

Количество обращений с мобильных устройств в абсолютных числах.

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

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

Что в итоге

Разница между «быстро на компьютере» и «медленно на телефоне» — это почти всегда сумма из тяжёлых картинок, лишних виджетов, нестандартных шрифтов и медленного ответа сервера. Каждая составляющая по отдельности кажется мелочью, вместе они дают пять секунд ожидания и потерянные обращения.

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

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