Оптимизация сайта для мобильных устройств: как mobile first увеличивает продажи с сайта

Когда вы последний раз заказывали продукты, покупали что-то онлайн, вызывали такси или записывались к врачу через стационарный компьютер? Для многих смартфон уже давно стал настоящим помощником в рутинных делах.

Мы в WebCanape отчетливо видим, как эпоха десктопа в e-commerce постепенно уходит в прошлое. И с уверенностью можем сказать, что если ваш бизнес доступен или удобен для клиентов только на широкоформатных дисплеях, то вы рискуете капитально отстать от конкурентов и оказаться в прямом смысле вне рынка. Поговорим сегодня о том, как оптимизировать сайт для телефона и почему так важно это делать.

Содержание статьи:

1. Что такое адаптированный под мобильные устройства сайт?
2. Зачем адаптировать сайт под мобильные устройства
3. Принцип mobile first в WebCanape
4. Что лучше: мобильная версия сайта, адаптивный дизайн или приложение
5. Оптимизация сайта для телефона на практике
6. Теряете «мобильных» клиентов или нет: чек-лист

Что такое адаптированный под мобильные устройства сайт?

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

Казалось бы, это очевидно, но по готовым сайтам, которые приходят в WebCanape на продвижение, мы видим, что принцип mobile first далеко не всегда стоит во главе угла. Часто разработчики тратят время и деньги клиентов на «игры шрифтами» или перемещение элементов на баннерах, ориентируясь на отображение страниц в десктопе, даже если оттуда приходит меньше 5% посетителей. При том, что в смартфоне такие сайты могут выглядеть так:

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

Зачем адаптировать сайт под мобильные устройства

По данным Яндекс Радара, доля мобильного трафика в России за последний год составила 62-68%.

Распределение трафика по видам устройств в России

При этом, по информации от Яндекс Маркета и GfK Rus, еще в 2021 году 6 покупок из 10 приходились именно на смартфоны. Как показало исследование медиапотребления компании Ipsos, заказы онлайн совершают почти 80% населения, и налицо предпосылки к увеличению этой цифры.

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

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

Динамика мобильного трафика клиента из сферы b2c

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

Вот «живой» пример промышленника, у которого только треть трафика — это мобильники, но конверсия у десктопа составляет 1,48%, в то время как у смартфонов — 1,61%, а у планшетов — 2,08%.

Распределение трафика у клиента-промышленника

Распределение конверсий у этого же клиента

Принцип mobile first в WebCanape

За ростом мобильного трафика мы наблюдаем уже давно и составили для себя вот такую статистику:

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

«Думать десктопом» в какой-то момент стало опасно для бизнеса клиентов. Так принцип mobile first надежно закрепился в команде WebCanape. Что это значит для нас, как для разработчиков?

Это значит, что мы давно изменили подход и алгоритм работы над проектами:

• Еще на старте мы анализируем Яндекс Метрику клиента или аналогичных проектов, если сайт только предстоит разработать. Определяем, какой трафик преобладает, откуда приходит большинство целевых лидов.
• Если мобайл безоговорочно лидирует, то рекомендуем начинать работу с дизайн-макетов страниц именно под него. И только потом реализовывать версию для стационарных ПК.
• Если заказчик пришел с готовым сайтом на услуги продвижения или рекламы, то проводим аудит с учетом mobile first. Тестируем не только на эмуляторах, но и на реальных устройствах с разными операционками. В итоге, определяем слабые места и в первую очередь работаем над ними.

В ТОПе на десктопе, а в мобильнике?

Принцип mobile first предусматривает стратегию комплексного подхода, потому что понятие «оптимизация сайта под мобильные устройства» включает в себя два аспекта — юзабилити и SEO. С одной стороны очевидно, что сайт должен быть удобен для пользователя мобильных устройств, но с другой — нельзя забывать и про его позиции в выдаче.

Еще в 2018 году Google запустил алгоритм Mobile first index, т.е. наличие мобильной версии стало не единственным, но очень важным фактором ранжирования. С тех пор естественная выдача на смартфонах изменилась, и в лидерах оказались mobile friendly сайты, потеснив вниз лидеров рынка с более скромной оптимизацией под мобильники.

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

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

Что лучше: мобильная версия сайта, адаптивный дизайн или приложение

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

Мобильная версия — это отдельный сайт, который предназначен именно для пользователей с смартфонов. Сервер распознает user-agent смартфона или планшета и перенаправляет его на специальный поддомен. 

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

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

Плюсы адаптивной верстки:

• Сайт доступен со всех устройств по единому URL.
• Его проще наполнять и продвигать.
• Размеры шрифта и контента подстраиваются автоматически под размер экрана.

В зависимости от того, с какого устройства прошел запрос на сервер, с одного и того же URL реализуются разные варианты кода HTML и CSS.

Для дизайна страницы используют векторные (SVG) изображения и иконки. Они не потеряют качество при изменении масштаба картинки, поэтому подойдут для экранов любой диагонали. Но в некоторых CMS могут возникнуть проблемы с загрузкой SVG, поэтому нужно учитывать движок ресурса. В нашей Canape CMS такой проблемы нет.

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

Определить, нужно ли вашему бизнесу приложение, несложно:

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

Кстати, технология — Progressive Web App или PWA — позволяет визуально и функционально перевести сайт в приложение без спецдоработок под разные операционки смартфонов.

Теперь расскажем, что мы делаем для того, чтобы сайты наших клиентов выходили в ТОП Яндекса и Google в смартфонах и почему ими удобно пользоваться даже одним пальцем.

Оптимизация сайта для телефона на практике

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

• Настройка robots.txt

Из-за неправильно настроенного файла robots.txt сайт просто останется недоступным для поисковых роботов. Часто служебные разделы закрывают от индексирования, забывая, что закрытыми от сканирования будут JavaScript и CSS. А ведь именно от них зависит корректность отображения страниц на мобильных.

Так выглядит работающая настройка robots.txt сайта нашего клиента

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

Проверить качество оптимизации сайта для мобильных устройств можно в Google Search Console. Сервис укажет, например, на ошибки, связанные с показом шрифтов и изображений. Способ подходит и для адаптивной верстки, и для мобильной версии. Можно выбрать вкладку «Контент шире экрана» и увидеть все URL, у которых есть эта проблема.

Ответ Google Console по результату проверки неадаптивного сайта

Пройти тест на «мобильность» можно также в Яндекс Вебмастере, вкладки Индексирование — Проверка страницы. 

• Максимальная скорость загрузки

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

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

Максимальное время загрузки должно составлять 3-5 секунд. Проверить это можно тоже в Google.

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

• Оптимизированные изображения

Долгая загрузка картинки на странице — частая причина низкой конверсии, ухудшения поведенческих факторов и ранжирования. Проверьте, что изображения на вашем сайте весят до 1 мб, а лучше — 100-200 кб. Тогда они точно не будут замедлять работу сайта. Наши SEO-менеджеры для поиска «тяжелых» картинок используют программу Screaming Frog.

Уменьшить вес изображений можно путем их сжатия, изменения размера или формата. Для сжатия подойдет сервис TinyPNG, а для конвертации из традиционно «тяжелого» PNG в JPEG или WebP — Convertio.

Кстати для эффективного продвижения нужно следить не только за «весом» картинок, но и за заполнением их атрибутов title и alt. С ними ваши изображения смогут попасть в поиск по картинкам, который сейчас активно развивается.

• Первый экран

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

Пример «говорящего» и нечитабельного первого экрана

Тщательно продумывайте содержание первого экрана — текстовое наполнение, цветовые решения, расположение кнопок и т.д.

• Удобная и понятная навигация

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

Примеры удобных и понятных для пользователей меню

• Крупные кнопки и читабельный шрифт

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

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

Далее проанализируйте, весь ли текст на страницах, например каталожных, нужен «мобильному» пользователю или часть можно скрыть, упростив доступ к сути. Часто перед товарами, в угоду SEO, располагают такую «портянку» текста, которую пользователь устает скроллить в попытках дойти до каталога. Так делать не надо.

• Кликабельные контакты

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

• «Нет» горизонтальной прокрутке

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

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

В Tilda такие элементы можно делать в режиме «Дизайн», выбрав на панели инструментов вкладку «Блоки». Настраивайте параметры адаптивности, и клиенту с вами всегда будет удобно. Кстати и в Bitrix есть аналогичный конструктор блоков для сайтов.

• Pop-up не мешают пользователю

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

Следите, чтобы рекламные баннеры, jivo-чат, квизы и другие подобные элементы не «выскакивали» на клиентов, мешая совершить целевое действие.

Контента не видно, а формы слишком навязчивы

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

• Простая форма регистрации

Если от клиента требуется регистрация, то максимально упростите форму для нее. Делиться персональными данными и так готовы не многие, так еще и вводить их на экране мобильного очень неудобно.

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

Примеры простых форм регистрации и входа в ЛК

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

• Автозаполнение

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

• Фавикон подходящего разрешения и размера

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

Некачественный и качественный фавикон

• Фиксация популярных разделов

​Для интернет-магазинов на улучшение пользовательского опыта отлично работает нижнее меню с самыми популярными разделами. Обычно это «Каталог», «Корзина», «Личный кабинет» и «Поиск». 

Зафиксированное меню на популярном маркетплейсе и на сайте нашего клиента

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

• Мессенджеры

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

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

Иконки мессенджеров статичны и разумного размера

• Автоопределение региона

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

Если ассортимент или условия различаются в зависимости от региона, настройте запрос геоданных

• Баннер с мобильным приложением

Разработали и запустили собственное приложение? Расскажите об этом посетителям сайта при помощи баннера со ссылкой на скачивание. А если за установку приложения дарить бонусные баллы, скидки или подарки, то вероятность скачивания и совершения покупки вырастает в разы.

Примеры баннеров с предложением установить приложение

Реальный пример

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

Исходный вид сайта

Мы перерабатывали структуру, работали над ускорением загрузки, упрощением форм и навигацией, перерисовывали макеты:

Оптимизированная мобильная версия сайта

Эффект не заставил себя долго ждать. Визиты из поисковых систем возросли от 2 400 до 20 400 именно со смартфонов.

Знаете о чем это говорит? О том, что на рынке все еще много игроков, которые полноценно не «переместились» в смартфоны своих клиентов. Не упускайте время и не давайте конкурентам шанса занять ТОП и увести ваших клиентов.

Мы дадим вам чек-лист, по которому получится определить, отвечает ли сайт реальности и насколько дружелюбен к «мобильным» клиентам.

Теряете «мобильных» клиентов или нет: чек-лист

Если ваш продукт понятен и востребован большинством пользователей, то принцип mobile first — ваше всё.

Проверьте, что:

1. Сайт корректно индексируется.
2. Страницы загружаются не дольше 5 секунд.
3. Меню читабельно и понятно.
4. Навигационные элементы легко «поймать» на экране.
5. Все тексты, в том числе на кнопках, читабельны.
6. Всплывающие окна не перекрывают контент или интерактивные элементы.
7. Телефоны и электронка кликабельны, а интерфейс отзывчив к потребностям клиента.
8. Иконки мессенджеров активны и заметны на экране.
9. При повторных покупках или обращениях срабатывает автозаполнение форм.
10. Весь контент вертикализирован, горизонтальная прокрутка — только для длинных таблиц.
11. Формы содержат минимум полей, а клавиатура автоматически переходит с буквенного режима на текстовой.
12. На страницах нет лишнего текста, особенно перед товарами, ценами, описанием услуг.
13. Автоопределение региона работает корректно и автоматически подставляет нужный город.
14. Фавикон одинаково презентабелен на любом устройстве.

Не хотите тратить время или не уверены, что получится самостоятельно проверить мобильную версию сайта на адекватность требованиям современного SEO? Пишите нам — проведем аудит и дадим экспертную оценку состояния и потенциала вашего сайта.

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