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

С июля 2019 года мобильный индекс стал приоритетным в ранжировании поисковой системой Google для всех новых сайтов, что говорит о важности оптимизации сайта для мобильных устройств. В этом посте я расскажу, как сделать сайт mobile-friendly и повысить позиции в поисковой выдаче.

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

Рост мобильной активности начался давно: ещё пять лет назад 75% пользователей выбирали мобильный интернет вместо десктопного.

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

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

1. Разработка отдельной мобильной версии сайта.

   Плюсы:

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

   Минусы:

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

   Плюсы:

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

   Минусы:

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

     

3. Адаптивная вёрстка.

   Плюсы:

   • правильное отображение на всех устройствах;
   • минимум лишних элементов;
   • единый URL сайта;
   • быстрая реализация;
   • комфортное пользование сайтом.

   Минусы:

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

Теперь расскажу подробнее про адаптивную вёрстку и мобильную версию.

2. Что такое адаптивная вёрстка

Адаптивная вёрстка — адаптация сайта под устройство, с которого пользователь переходит на сайт.

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

Google в первую очередь рекомендует делать акцент на адаптации сайта к смартфонам.

Адаптивная вёрстка избавляет от потребности в создании отдельного домена для мобильной версии, так как используется один адрес. При правильном внедрении адаптивной вёрстки сайт корректно отображается на разных экранах. Функционал сохраняется, но страницы могут дольше грузиться из-за тяжеловесных элементов (скрипты, объёмные изображения, gif-картинки, фильтры, калькуляторы). Чтобы снизить нагрузку, желательно упростить функционал.

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

• адаптировать изображения под размер экрана через параметр CSS;
• масштабировать видео в CSS;
• добавить горизонтальную прокрутку таблиц;
• скрыть длинное описание под кнопками;
• частично скрыть пункты меню либо спрятать все меню под «гамбургером»;

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

  

3. Мобильная версия сайта

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

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

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

Также важно проследить, чтобы основной и мобильный сайт не конкурировали друг с другом. Для этого их свяжите их в панелях вебмастеров Search Console и Bing Webmaster либо используйте атрибут rel="alternate".

Для создания мобильной версии можно использовать:

• онлайн-конструкторы. Например, Mobirise;
• плагины для CMS. Например, AMP for WP или WPtouch;
• адаптивные темы в WordPress или других CMS.

Мобильная версия создаётся на поддомене или отдельном домене и копирует основной сайт. Чтобы поисковый робот не сканировал дубли страниц, рекомендуется использовать атрибут rel="alternate":

и rel="canonical":

Обе строки нужно прописать на каждой странице версии для мобильных. Так вы укажете поисковику, что site.ua — основной сайт, а m.site.ua — альтернативная версия, которую не нужно сканировать. При переходе с мобильного устройства пользователь будет автоматически перемещаться на адаптивную версию.

Детальнее о поисковой оптимизации мобильных сайтов читайте в справке Google.

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

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

Статистика об отображении сайта на мобильных доступна в панелях вебмастеров Google и Bing. Пример из Search Console:

У Google также есть специальный сервис Mobile-Friendly для тестирования мобильной версии.

Ещё один сервис ThinkWithGoogle, аналог PageSpeed Insights, который проверяет скорость загрузки сайта для мобильных устройств.

Подводим итоги

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

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

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

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