Главная » Продвижение сайта, раскрутка, SEO » Внутренняя оптимизация » Оптимизация сайта под мобильные устройства

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

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

Предисловие

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

Важность оптимизации под гаджеты

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

Что же говорит нам статистика?

Статистика промежутка октябрь 2016 — март 2017, говорит нам о том, что общая доля посетителей с различных девайсов достигла 87 млн. человек, люди которые пользуются только мобильными устройствами — 16% от общего числа (20 млн. человек).

Статистика mediascope.net

Рост аудитории за промежуток октябрь 2016 — март 2017. Данные с mediascope.net

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

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

Сервисы для проверки сайта.

При проверки адаптации сайта — во внимание принимаются следующие факторы:

  1. Наличие тега Viewport
  2. Отсутствие горизонтальной прокрутки
  3. Отсутствие тяжелых Flash элементов
  4. Минимальная скорость загрузки сайта
  5. Удобство прочтение текста

Сервис Google Mobile Friendly

Официальный сервис Google для проверки оптимизации сайта под мобильные — Google Mobile Friendly

Google оптимизация сайта под мобильные

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

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

Google очень требователен и в большинстве случаев все оказывается не так как мы хотим и ожидаем, можно увидеть и следующую картину

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

Соответственно в выдаче с мобильных устройств, наш сайт будет не в приоритете, так как имеет низкую оптимизацию. Сервис Google Mobile Friendly — показывает ошибки которые необходимо исправить для того, чтобы проект был оптимизирован.

проблемы оптимизации сайта

Сервис Яндекс.Вебмастер, проверка мобильных страниц

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

оптимизация сайта под мобильные Yandex

Если все хорошо, видим следующую картину

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

Сервис ScreenFly от quirktools

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

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

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

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

Прежде чем продолжать, давайте внесем ясность — дизайн считается адаптивным, когда может автоматически подстраиваться под заданную ширину экрана и менять свои размеры. Достигается данный эффект путем использования CSS3 Media Queries.

Коротко о преймуществах

  • Единый домен и адрес — положительно сказывается на индексации сайта
  • Удобство разработки — в современных движках необходимо просто поправить CSS  и HTML.

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

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

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

Псс, парень — практически любой премиум шаблон шаблон — можно скачать и загрузить самостоятельно.

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

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

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

Минусы

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

Преимущества

  • Мы показываем пользователю только, то, что хотим
  • Настройка проста и понятна
  • Огромная скорость загрузки

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

Использование специальных плагинов

Для пользователей WordPress — оптимизация сайта под мобильные устройства упрощается еще одним способом — использованием специального плагинов таких как — WPTouch. Все просто, находим — устанавливаем — активируем

У плагина огромное количество настроек, таких как редактор меню, настройка тем и расширений — любую тему можно индивидуально отредактировать.

При первом превью, стандартная тема плагина будет выглядеть примерно так

оптимизация блога под мобильный с помощью плагина

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

Послесловие, резюме

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

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

Видишь кнопочки сверху?

Если тебе понравился материал - поделись им с друзьями и коллегами, на форумах и в соц. сетях. Чтобы ничего не пропустить - подпишись на обновления. Спасибо ;)

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*