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

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

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

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

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

Рост популярности мобильного интернета согласно данным Яндекс.Радара можно увидеть на графике

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

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

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

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

    Плюсы:

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

    Минусы:

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

    Плюсы:

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

    Минусы:

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

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

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

    Плюсы:

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

    Минусы:

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

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

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

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

Пример адаптивной вёрстки на разных гаджетах

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

Особенности разных устройств, которые описаны в справке Google

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

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

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

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

Спрятанное под «гамбургером» меню

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

    Пример отображения блоков в зависимости от типа устройства

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

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

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

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

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

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

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

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

<link rel="alternate" href="http://m.site.ua/page/">

и rel="canonical":

<link rel="canonical" href="http://site.ua/page/">

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

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

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

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

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

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

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

Пример из Яндекс.Вебмастер:

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

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

Как проверить оптимизацию сайта для мобильных устройств в сервисе Mobile-Friendly Test

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

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

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

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

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

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

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