Секреты мобильной оптимизации: как улучшить видимость вашего сайта на мобильных устройствах

В этой статье специалист по продвижению сайтов агентства интернет-маркетинга «Директ Лайн» Марта Г. рассказала, зачем нужно оптимизировать сайт под мобильные устройства, как проверить текущие позиции и какие действия нужно совершить, чтобы улучшить их в мобильной выдаче.

Что такое мобильная выдача?

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

Зачем нужна мобильная оптимизация сайта

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

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

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

Основные требования для продвижения сайта в мобильной выдаче или с чего начать оптимизацию?

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

Главными факторами для продвижения сайта в мобильной выдаче являются:

1. Мобильная оптимизация контента (оптимизация изображений, шрифтов, расположения элементов).
2. Юзабилити (навигация по сайту должна быть простой и интуитивно понятной пользователю).
3. Скорость открытия сайта и всего контента в целом, ведь пользователи мобильных устройств привыкли к быстрой загрузке сайта.

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

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

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

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

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

Выделим несколько плюсов и минусов. Среди преимуществ:

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

Недостатки следующие:

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

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

Адаптивная верстка

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

Среди преимуществ верстки:

• Грамотно оптимизированный сайт сможет самостоятельно адаптироваться под любые десктопные и мобильные гаджеты. Страница будет отправлять одинаковый код, который по-разному отобразится в зависимости от разрешения экрана устройства. Достаточно проработать десктопную версию.
• Доступная разработка. Адаптивный дизайн обойдется дешевле чем создание отдельной версии сайта.
  
• Снижение нагрузки на сервер и улучшение производительности сайта.
  

Есть у адаптивной верстки и несколько минусов:

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

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

Динамическая верстка

Динамическая верстка представляет собой отображение страницы с идентичным URL адресом, но с разным кодом HTML в зависимости от типа устройства. В отличие от адаптивной верстки, динамическая верстка позволяет создавать более сложные и интерактивные страницы. Среди плюсов динамического показа выделяют:

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

Есть у динамического показа и минусы:

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

Техническая сторона мобильной оптимизации сайтов

Для успешной оптимизации учитываются такие параметры как:

1. Минимальное количество скриптов на странице. Если это возможно отключите лишние скрипты на мобильной версии сайта, чтобы уменьшить размер страницы и сократить время загрузки.
2. Кроссбраузерная совместимость: обеспечьте корректное отображение сайта во всех популярных браузерах на мобильных устройствах.
3. Шрифт: крупные символы могут хаотично растянуться по странице, а чересчур маленькие — выглядеть нечитабельно. Лучше всего будет протестировать несколько шрифтов наглядно и посмотреть на них внутри проекта.
4. Кнопки или ссылки. Учитывается размер и удобство во взаимодействии, а также количество. Все ссылки следует красиво оформить и структурировать, чтобы пользователю было легче взаимодействовать с контентом на сайте.
5. Pop-up окна: внезапно появляющиеся окна с вынужденным переходом на товар рекламодателя могут вызывать раздражение у пользователя. С ними нужно быть предельно осторожными.
6. Простота навигации: в этот пункт входят доступность меню и отдельных составляющих, понятный интерфейс и удобно расположенный функционал.
7. Геолокация: в отличие от владельцев компьютеров, пользователи смартфонов чаще всего не выключают геолокацию. Автоматическое определение адреса доставки, списка магазинов или сервисных точек станет приятным дополнением для потенциального клиента.
8. Формы заказов: сложные и объемные формы на мобильных устройствах не являются наилучшей практикой. Пользователи предпочитают простоту и могут не желать заполнять большое количество полей. Рекомендуется упростить их, сохраняя при этом информативность.
9. Неоптимизированный мультимедийный контент: изображения и видео большого размера могут значительно замедлить загрузку веб-страницы. Поэтому рекомендуется оптимизировать мультимедийный контент или, возможно, даже частично отказаться от него.
10. Мета-теги для мобильной версии: важно, чтобы метатеги были корректно настроены и совпадали с десктопной версией сайта.
11. Правильная переадресация: для каждой десктопной страницы следует настроить переадресацию на соответствующую мобильную версию (это касается мобильной версии сайта на поддомене). Также следует убедиться, что переадресация выполняется не через 302-редирект, а с использованием другого кода.
12. Используйте технологии HTML5 для анимации и встраивания видео: чем больше на сайте невоспроизводимого контента, завязанного на Flash-технологии, тем меньше шансов на выход в ТОП.
13. Работающие по клику функциональные элементы: в отличие от десктопных компьютеров, на мобильных устройствах отсутствует курсор для наведения на элементы. Поэтому при разработке адаптивной версии следует обдумать, как элементы дизайна, которые в десктопной версии активируются при наведении, будут вести себя на мобильных устройствах. Например, выпадающие меню, всплывающие подсказки и функция увеличения фотографий, аналогичная лупе в интернет-магазине.

Как проверить мобильную оптимизацию

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

1. Google Mobile-Friendly Test

Пожалуй, первый сервис, где стоит проверить свой сайт. Тестировщик Mobile-Friendly Test от Google предлагает пользователю проверить оптимизирован ли сайт для мобильных устройств, а также посмотреть, как страница будет выглядеть на экране смартфона или планшета. Для проверки достаточно ввести URL сайта, еще один плюс — сервис полностью бесплатный.

Кроме того, инструмент позволяет обнаружить ошибки, негативно влияющие на функционал сайта:

• проблемы с плагинами;
• ошибки, связанные с элементами взаимодействия;
  
• проблемы со шрифтом;
  
• ошибки в CSS-стилях.
  

2. Яндекс.Вебмастер

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

Если страница оптимизирована для мобильных, вы увидите сообщение «Все в порядке!». Если есть проблемы с оптимизацией, Вебмастер предложит рекомендации по их устранению.

3. Window Resizer (расширение для Chrome)

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

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

Есть один несущественный минус — в библиотеке сервиса нет отдельных моделей техники. Протестировать можно только базовые шаблоны.

4. PageSpeed Insights

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

Оценка сайту выставляется по стобалльной шкале. Оптимальный балл — от 85 до 100. Если оценка не доходит даже до 60, страницу нужно оптимизировать в срочном порядке.

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

5. iloveadaptive

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

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