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

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

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

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

Методы оптимизации сайта под мобильные устройства

Чтобы оптимизировать ресурс, можно использовать один из следующих способов:

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

Если пользователь заходит на сайт со смартфона, он перенаправляется на поддомен мобайл-версии. Как правило, имя поддомена в этом случае получает приставку m, mobile или pda перед основным именем. Перенаправление происходит автоматически: сервер «распознаёт» тип устройства пользователя и перенаправляет его на поддомен. Для различных устройств применяются разные типы кода и URL страниц.

Плюсы mobile version:

• Скорость загрузки. Мобильная версия — это по сути отдельный сайт, на котором отключены многие элементы, необходимые для десктопных страниц. За счёт этого страницы прогружаются практически мгновенно.
• Простая модернизация. Вносить изменения на мобайл-версии гораздо проще и быстрее, чем на полноформатном варианте. Если нужно что-то изменить в дизайне или функционале, переживать о том, как это отразится на десктопном варианте не придётся. А вот в случае, например, адаптивного дизайна, любое, даже малейшее изменение, потребует проверки на обоих форматах.
• Оптимизация под мобильную выдачу. Так как mobile version — самостоятельный сайт, для него можно разработать функционал или контент, отличный от десктопного варианта. Это позволит учесть другие группы запросов, привлечь новых посетителей.
• Можно быстро переключиться на полную версию сайта. Например, если пользователь заходит с планшета, но ему удобнее работать с десктопным вариантом, он может перейти на него. При адаптивном дизайне так сделать не получится.

Минусы mobile version:

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

Адаптивный дизайн

При этом варианте код страниц и URL не меняются. Сервер никуда не перенаправляет пользователя, отдавая всем устройства единый HTML-код. Однако он адаптируется в зависимости от параметров экрана при помощи CSS. При этом важно учитывать, что определённые файлы CSS, JavaScript и изображения должны быть доступны для индексации.

Плюсы адаптивного дизайна:

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

Минусы адаптивного дизайна:

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

Как способ лучше

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

Как проверить оптимизацию сайта

Для проверки существует несколько инструментов:

Page Speed Insights используется для оценки скорости загрузки страниц, а также отображает проблемные места с рекомендациями по устранению ошибок.

Google Mobile-Friendly Tool — собственный инструмент Google, который помогает проверить насколько удобно будет пользователям просматривать мобильную версию на маленьком экране.

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

Fetch and Render в Google Search Console показывает мобильную версию вашего ресурса «глазами» поисковых роботов.

На что обратить внимание при оптимизации сайта под мобильный поиск

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

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

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

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

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