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

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

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

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

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

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

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, либо задать свой размер.

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