Оптимизация сайта для мобильной аудитории: что надо знать

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

Почему сегодня нельзя обойтись без мобильной оптимизации

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

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

Какой тип мобильной оптимизации выбрать для сайта

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

1. Разработка мобильного приложения.
2. Создание полноценной мобильной версии сайта.
3. Использование ускоренных AMP- или «Турбо» мобильных страниц.
4. Добавление на сайт адаптивной верстки.

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

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

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

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

С какими проблемами на сайтах сталкиваются владельцы смартфонов

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

1. Медленная загрузка — этот фактор важен и для десктопных устройств, но для владельцев смартфонов он играет еще большую роль. Вы кликнули по ссылке уже несколько секунд назад, а экран так и остается пустым или же на нем неторопливо появляются элемент за элементом. Как итог: сайт быстро наберет значительное число отказов, и поведенческие факторы просядут.
2. Неправильное разрешение изображений и плывущая верстка — наверное, этот способ потери пользователей является самым надежным. Нетерпеливый посетитель, видя картинки и абзацы, вылезающие за пределы экрана, уйдет сразу. Терпеливый перезагрузит страницу, надеясь на лучшее, а потом уже уйдет.
3. Неудобный интерфейс — у смартфона нет мышки, и поэтому пользователь, который не сможет попасть пальцем по крохотной кнопочке заказа или в очередной раз промахнется мимо нужной графы в форме регистрации, больше не захочет иметь с вашим сайтом ничего общего. Если полноценно воспользоваться функционалом ресурса можно только с десктопа, вы заранее отсеиваете значительную аудиторию.
4. Некрасивый внешний вид — принесение дизайна в жертву функциональности тоже может сослужить сайту плохую службу. Даже если все опции работают на смартфоне как задумано, но оформление, цвета и расположение элементов режут глаз и побуждают закрыть вкладку, мобильную оптимизацию нельзя считать удачной.
5. Сложность навигации — смартфоны имеют существенно меньший экран, чем компьютер и ноутбук, вдобавок все клики приходится делать пальцами. Если пользователи не могут быстро переключаться между разделами и переходить со страницы на страницу, сайт им однозначно не понравится.
6.  Некорректная работа интерактивных элементов — если на сайте все работает, когда вы заходите с десктопного устройства, совершенно необязательно, что многочисленные кнопки и формы будут вести себя таким же образом у пользователей смартфонов. Например, когда кнопки в корзине покупок оказываются вне зоны первого экрана, вы рискуете потерять потенциального покупателя.
7. Отсутствие оптимизации под голосовой поиск — одна из особенностей мобильного поиска заключается в активном использовании голосового ввода. Это нужно учитывать при оптимизации, в противном случае по запросам, сделанным со смартфонов, ваш сайт может удалиться от вершины поисковой выдачи.

Как выявить недостатки мобильной оптимизации

Перед тем, как приступать к мобильной оптимизации, нужно обнаружить все слабые места, которые вам в дальнейшем предстоит проработать. Найти их можно несколькими способами:

• Ручная проверка — несмотря на кажущуюся сложность и наличие более технологичных методов проверки, ручной анализ мобильной оптимизации вполне оправдан. Зайдите на сайт со смартфона или эмулятора, проверьте основные функции, пройдите предполагаемый путь пользователя. Вполне вероятно, что вы обнаружите различные ошибки и недоработки. Например, некоторые элементы могут выглядеть или функционировать совсем не так, как вы предполагали.
• Сервисы поисковиков — поскольку для поисковиков мобильная оптимизация крайне важна, о чем мы уже говорили ранее, они предлагают бесплатные инструменты для ее тестирования. Специализированные сервисы Яндекса и Google могут достаточно быстро оценить адаптивность сайта и обозначить основные проблемы. Однако они не слишком гибкие в использовании, например, оценить внешний вид сайта на смартфонах с разным размером экрана вы не сможете.
• Прочие аналитические инструменты — помимо вариантов от поисковых систем, существует также достаточное количество сторонних сервисов. Каждый из них имеет свои преимущества и недостатки. Например, Quirktools может показать, как будет меняться вид сайта на экранах разных габаритов, но отчета по найденным проблемам не предоставляет. А Adaptivator дает более комплексную оценку адаптивности, но имеет ограниченный выбор разрешений экрана для анализа.

Таким образом, делать выбор в пользу только одного конкретного метода проверки мобильной оптимизации нерационально. Скорее всего, в таком случае вы что-либо упустите и не получите полной картины. Лучшим (хотя и более трудоемким) будет использование одновременно нескольких типов проверки и комплексный анализ. Так вы с большей вероятностью сможете обнаружить все проблемные места и приступить непосредственно к оптимизации.

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

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

1. Выберите дизайн

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

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

2. Улучшите читабельность и кликабельность

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

Разместите
тендер бесплатно

Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.

Заполнить заявку 13229 тендеров
проведено за восемь лет работы нашего сайта.

3. Обеспечьте достаточную скорость загрузки

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

Пустоты вместо незагрузившихся вовремя элементов сразу ухудшают пользовательский опыт

4. Настройте навигацию

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

5. Добавьте активные элементы

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

Оптимально, чтобы кнопки, элементы меню и навигации не мешали друг другу

6. Проследите за уместностью баннеров и попапов

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

7. Приоритезируйте контент

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

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

Итоги

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