Сайт при слабом мобильном интернете: как не потерять клиента в поле

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

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

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

Что происходит при плохом соединении

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

Низкая скорость передачи. Очевидная часть: тяжёлые файлы грузятся долго. Страница весом четыре мегабайта на слабом сигнале открывается десятки секунд.

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

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

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

Экономия трафика. Некоторые режимы браузера и настройки телефона блокируют часть содержимого или загружают изображения в низком качестве.

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

Как проверить сайт в этих условиях

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

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

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

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

Проверка через инструменты оценки скорости. Они показывают вес страницы, число запросов, самые тяжёлые элементы. Полезны как отправная точка, но не заменяют живую проверку.

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

Что чинить в первую очередь

Изображения. Почти всегда главный источник веса. Что делать:

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

Отдавать в подходящем размере. Картинка шириной 2000 точек, показанная в блоке шириной 400 — это в двадцать пять раз больше данных, чем нужно.

Подгружать по мере прокрутки. Изображения ниже первого экрана не должны загружаться сразу.

Использовать современные форматы, которые весят меньше при том же качестве.

Убрать декоративные фоновые изображения там, где они ничего не добавляют.

Количество запросов. Каждый отдельный файл — это отдельное обращение к серверу с задержкой. Объединение стилей и скриптов в меньшее число файлов заметно ускоряет открытие именно на мобильной связи.

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

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

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

Видео на первом экране. Фоновое видео в шапке — самый быстрый способ сделать сайт непригодным для мобильных пользователей. На слабой связи оно не загрузится вовсе, но успеет съесть трафик и время.

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

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

Устойчивость формы заявки

Отдельная тема, потому что здесь теряются уже почти полученные обращения.

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

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

Внятное сообщение об ошибке. Не молчание и не технический текст, а «не удалось отправить, проверьте соединение и попробуйте ещё раз». И телефон рядом — на случай, если не получится совсем.

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

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

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

Устойчивость к слабой связи влияет на все три канала, и особенно на два из них.

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

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

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

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

Что показать в первую очередь

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

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

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

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

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

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

Отложенная загрузка всего второстепенного. Чат, виджеты, карты, счётчики, галереи — всё это должно подключаться после того, как основное содержимое показано, а не до.

Хороший ориентир: даже если у человека загрузилось только двадцать процентов страницы, он должен видеть, куда попал, и иметь возможность позвонить.

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

Проверка только в офисе. Сайт всегда быстрый на проводном интернете. Реальная картина не видна.

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

Накопление сторонних скриптов. Каждый добавляется «на пробу», ни один не удаляется.

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

Форма без обработки ошибок. Отправка не удалась, человек об этом не узнал.

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

Заброшенные карточки на картах. Тот самый резервный канал, который спасает в плохой связи, оказывается пустым.

Порядок действий

Проверьте сайт с ограничением скорости в браузере и запишите время до появления содержимого.

Съездите с телефоном туда, где связь плохая, и пройдите путь клиента целиком.

Посмотрите в Яндекс.Метрике время загрузки и долю отказов отдельно по мобильным устройствам.

Проведите ревизию сторонних скриптов и уберите всё, чем не пользуетесь.

Сожмите изображения, настройте подгрузку по мере прокрутки, отдавайте картинки в нужном размере.

Сократите набор шрифтов и настройте показ текста до их загрузки.

Проверьте сжатие ответов сервера и кэширование.

Сделайте форму устойчивой: сохранение введённого, индикация, внятная ошибка, телефон рядом.

Заполните карточки в Яндекс Бизнесе и 2ГИС так, чтобы клиент мог решить свой вопрос, вообще не открывая сайт.

Повторите живую проверку через месяц.

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