Оптимизация сайта под мобильные устройства – обязательный этап SEO-продвижения. Согласно статистике, собранной «Яндекс.Радаром», с каждым годом объем мобильного трафика увеличивается на 50–60%. Из-за этого степень mobile friendly оптимизации стала важным фактором ранжирования в Яндекс и Google. Приоритет при индексации отдается именно версиям сайта, отображаемым на мобильных устройствах.
Методы оптимизации сайта для мобильных устройств
Среди методов мобильной оптимизации сайтов ярко выделяется создание адаптивного дизайна, а также разработка копии веб-ресурса на отдельном шаблоне или поддомене. Разберем особенности каждого случая более подробно.
Создание адаптивной верстки
Оптимизация с помощью создания адаптивных версий страниц сайта
Главное преимущество адаптивной верстки – не надо оптимизировать 2 версии сайта: десктопную и мобильную. При заходе через смартфон или ПК запросы идут на один и тот же сервер, который отправляет пользователю одинаковый HTML-код — содержимое на сайте подстраивается под разрешение экрана при помощи свойств CSS.
Подобное решение достигается за счет использования технологии CSS3 Media Queries или CSS-фреймворков — готового набора правил CSS, позволяющих управлять стилями элементов на сайте в зависимости от устройства входа. Это позволяет сделать дизайн и функциональность сайта идентичными при заходе с любого устройства — меняться будет только расположение, размер, внешний вид элементов на странице по вертикали.
Среди плюсов адаптивной верстки также выделяются:
Единый URL для всех версий сайта.
Отсутствие лишних элементов на странице.
Корректное отображение страниц на всех устройствах.
Из минусов подобного решения отмечаются:
Длительная загрузка страниц при наличии тяжелых элементов: видео, широкоформатных изображений, анимации и т. д.
Необходимость в сокращении информации при отображении страниц на смартфонах.
Разработка сайта с mobile-friendly дизайном наиболее правильное решение.
Способы оптимизации адаптивной верстки
Разработка интернет магазинов или многостраничных веб-сайтов с адаптивной версткой — отраслевой стандарт. Адаптивный сайт предполагает не только наличие дизайна, подстраивающегося под любой браузер или диагональ экрана смартфона, но и работу с интерфейсом.
Важно чтобы все элементы на странице были взаимосвязаны с интерфейсом сайта и выполняли полезное действие, в противном случае нефункциональный элемент требуется удалить для упрощения дизайна. Так, например, при нажатии на номер телефона должен производиться звонок с мобильного, а клик по карте — учитывать местоположение пользователя к ближайшей точке магазина или склада.
Для улучшения адаптивного дизайна можно сделать следующее:
Масштабировать видео и изображения через свойства CSS под размер экрана. В качестве изображения на сайте рекомендуем использовать картинки в формате SVG — векторная графика не теряет качество при изменении масштаба.
Упростить функциональность сайта — снизить количество используемых скриптов и объемных изображений, убрать калькуляторы и расчет доставки со страниц в корзину, и т. д. Дополнительную информацию можно перенести в отдельные элементы страницы: например, скрыть комментарии под отдельной кнопкой или добавить к товарам на сайте скрываемое описание.
Переработать меню — для многостраничных веб-сайтов есть смысл частично скрыть пункты меню или реализовать Hamburger-меню. Важно чтобы на гаджетах с небольшой диагональю экрана не появлялась горизонтальная полоса прокрутки — это затрудняет использование сайта.
Кроме того, важно оптимизировать шрифты и рекламные блоки для правильного отображения элементов на всех устройствах. Для этого может потребоваться добавление скрипта на изменение числа отображаемых блоков на странице в зависимости от диагонали экрана используемого пользователем устройства.
Мобильная версия
Альтернативным вариантом оптимизации считается создание мобильной версии — например, запуск копии сайта на поддомене или разработка отдельного шаблона. Одна из сложностей реализации такого варианта – настройка правильной связи между аналогичными страницами обеих версий, чтобы десктопная и мобильная версии не конкурировали между собой. Для этого версии связываются в вебмастерах Google и Yandex, либо пропишите атрибуты rel="alternate" и rel=”canonical”. Это не позволит роботам индексировать страницы обеих версий как дубли и как следствие - предотвратит снижение позиций в выдаче.
Вариант с отдельным поддоменом
Мобильная версия на отдельном поддомене и сложности ее реализации
Данный вариант наиболее трудозатратный в реализации. При входе с мобильного устройства, сервер переадресует пользователя на другой поддомен с мобильной версией сайта. Таким образом на десктоп и мобильные устройства будет передаваться разный HTML-код и формироваться отдельные URL-адреса под каждую страницу сайта.
Преимущество мобильной оптимизации сайта через создание версии на поддомене – это высокая скорость загрузки. Основной минус — изменение URL-адресов и необходимость в дальнейшей настройки взаимосвязи версий.
Версия на отдельном шаблоне
Создание отдельного шаблона страниц для отображения на мобильных гаджетах
Еще один способ оптимизации дизайна страниц под мобильные устройства — создание копии сайта на отдельном шаблоне. В данном случае URL-адрес остается идентичным при заходе с любого устройства, меняется только HTML-код. При заходе пользователя на сайт сервер определяет тип используемого устройства и отправляет соответствующую версию страницы.
Основным преимуществом данного метода оптимизации является статичность URL, что избавляет от необходимости работ по оптимизации версий для SEO. Из минусов стоит выделить необходимость в разработке скрипта по определению типа устройства, с которого пользователь заходит на сайт. А также незначительные отличия дизайна мобильной версии от десктопной для упрощения интерфейса и ускорения загрузки страниц при заходе со смартфонов.
Способы оптимизации мобильных версий
Мобильные версии сайтов необходимо оптимизировать отдельно от десктопных. Основные требования поисковых систем к мобильным страницам следующие:
Отсутствие тяжеловесных элементов — Silverlight-плагины, Flash-элементы или Java-апплеты серьезно замедляют загрузку страницы и могут некорректно отображаться на некоторых смартфонах. Кроме того, следует отключить неиспользуемые плагины CMS и скрипты. Критически важно, чтобы веб-страницы открывались на мобильных гаджетах менее 5 секунд.
Адаптация под небольшие экраны — шрифты и изображения должны подстраиваться под диагональ смартфонов, также обязательно наличие полосы прокрутки. В мобильной версии сайта ссылки должны оставаться кликабельными, а формы связи и заказа — функциональны.
Редактирование рекламных блоков — реклама не должна закрывать контент на странице. Для этого изменяется количество рекламных блоков, а также убираются все всплывающие окна, баннеры и Pop-Up.
При создании сайтов с оптимизацией под мобильные устройства часто приходится урезать функциональность для повышения юзабилити — например, упрощать интерфейс или дизайн страниц. В таком случае необходимо предоставить пользователям возможность использования полноразмерного сайта, независимо от используемого устройства.
А так же для простоты можете заказать оптимизацию сайтов профессионалов
Как проверить сайт на оптимизацию для мобильных?
Проверять качество оптимизации мобильной версии можно через инструментарий Google и Yandex, либо сторонние сервисы. Определить скорость загрузки можно через GooglePageSpeed Insights, получить детализированную статистику — через вебмастеры.
Также оптимизаторы используют сервисы:
Ilove Adaptive.
Данный софт помогает оценить качество адаптивной версии
Внутренний инструмент Google Search Console - Mobile Friendly
