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

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

Первичная проверка: как понять, нужна ли сайту адаптация под мобильные устройства

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

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

На основе полученных данных можно понять, достаточно ли пользователи вашего сайта пользуются именно мобильной версии. К примеру, если процент мобильного трафика у ваших конкурентов 60-70%, а у вас 45% — очевидно, что без мобильной оптимизации не обойтись.

Проверка адаптивной верстки

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

Иногда в адаптации мобильной версии возможны ошибки: например, полоса прокрутки мешает увеличить шрифт или искажается масштаб. Все эти детали можно отследить с помощью сервиса Google Mobile Friendly Test.

Николай Русаков, начальник отдела SEO-продвижения веб-студии Moeseo.ru:

«Для отображения сайта на мобильных устройствах сегодня используются:

1. Создание мобильной версии сайта на отдельном поддомене. Поисковики воспринимают их и индексируют отдельно, поэтому и оптимизируются версии отдельно. Также необходимо настраивать редиректы в этом случае.
2. Адаптивная верстка. В этом случае сайт один, его интерфейс подстраивается под разрешение мобильных устройств автоматом.
3. RESS. Сайт адаптируется под мобильные устройства с помощью специальной технологии на стороне сервера.

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

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

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

Используйте шрифт удобный для чтения. Мелкий шрифт заставляет напрягать зрение.

Часто всплывающие окна на мобильных устройствах могут закрыть контент. Это также нужно учитывать и не допускать».

Сергей Никоноров, Chief Strategy Officer в компании Ingate:

«Мобильная оптимизация – не разовая задача, а постоянный процесс улучшения сайта. Он может включать в себя целый комплекс задач. На чем нужно сделать акцент при аналитике и оптимизации мобильного сайта?

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

Посмотрите, все ли элементы сайта открыты для роботов. Базовая проверка User-Agent Switcher и другими подобными плагинами даст примерное понимание проблематики сайта.

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

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

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

Посмотрите, оптимизированы ли основные типы страниц: главная страница, листинги, карточки товара, корзина, статьи, услуги, отзывы, формы отправки заявок/заказа/сообщений, онлайн-консультант. 

Проверьте функциональные элементы, которые работают только при наведении курсора.

Оцените читабельность текста и других элементов. Желательно сделать это с разных устройств (можно с ПК эмулировать разные устройства).

Оцените общее качество сайта с точки зрения пользователя: будет ли ему удобно пользоваться сайтом, насколько легко ему будет сделать заказ.

Для мобильной аналитики вам помогут основные инструменты от Google и Яндекс (именно в такой последовательности):
-Google PageSpeed Insights;
-Google Search Console, отчет «Удобство для мобильных»;
-Google Mobile-Friendly Test;
-Яндекс.Вебмастер, проверка мобильных страниц.

Но сервисы показывают степень адаптации сайта под мобильные устройства только на базовом уровне. Нужно обязательно провести ручную проверку по всем параметрам».

Google Search Console, отчет «Удобство для мобильных»

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

Открытие элементов сайта для поисковых роботов

Для адекватного ранжирования сайта все его элементы должны быть проиндексированы, в том числе шрифты, картинки, файлы CSS и JavaScript. Что видит пользователь, заходя на сайт, то же самое должен «видеть» и поисковый робот.

Сбор UX-аналитики с точки зрения удобства для пользователей

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

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

Олег Репин, частный SEO-эксперт «RepinTop»:

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

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

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

Правила скрытия контента в мобильной версии

Как правило, в десктопной версии сайта информации больше: в мобильной версии часть контента скрывают для компактности и быстроты загрузки. Для этого используется специальная технология Ajax, которая при загрузке новых данных запрашивает у сервера нужную часть информации и добавляет ее на просматриваемую страницу без перезагрузки. С точки зрения SEO это не слишком хорошо - поисковые роботы в таких случаях не видят скрытую информацию, что может привести к потере в выдаче. Избежать этой потери помогает замена Ajax на другую технологию — CSS медиа-запросы: она помогает скрыть текст от читателя, но не от поисковых ботов, и делать это с учетом размера экрана мобильного устройства.

Инструкция по настройке мобильной версии сайта на ADVANTSHOP 

Оптимизация скорости загрузки страниц

Скорость загрузки страниц напрямую влияет на ранжирование, особенно в Google. Адекватное время загрузки составляет 2-3 секунды, не больше.

Для сравнения скорости загрузки с разных устройств используется инструмент Google PageSpeed Insights. Проверяя время загрузки, владелец сайта может понять, какие элементы могут быть препятствием. Для повышения скорости загрузки сайта можно отказаться от объемных графических элементов, поменять хостинг или конструктор верстки. Часто не лишним будет конвертировать и сжать изображения, использовать ускоренные страницы, скорость загрузки которых в 3-4 раза выше (турбо-страницы Яндекс и AMP-технология в Google).

Алёна Рыбина, частный SEO-специалист, автор блога Seofy.ru:

«Мобильная версия сайта должна быть удобной, легкой и быстрой. Здесь нельзя использовать некоторые элементы дизайна десктопной версии в полном объеме. Например, придется отказаться от автозапуска тяжелого, но красивого видеоролика о компании на главном экране. Поберегите трафик пользователей! Придется больше внимания уделить и изображениям: в мобильной версии используйте сжатые версии, которые будут меньше весить, поможет программа Riot. Можно даже заменить привычные форматы изображений на более современные, как советует Google, например webp. Перевести изображение в webp поможет программа WebPconv.

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

Инструмент Google PageSpeed Insights

Кроме технической оптимизации подумайте о юзабилити. Главным критерием Mobile-Friendly является отсутствие горизонтальной прокрутки. Обеспечьте комфортное взаимодействие с элементами сайта, чтобы пользователю не пришлось долго прицеливаться для попадания по иконкам и кнопкам, они должны быть не менее 50 px по короткой стороне. Чтобы исключить напряжение глаз при чтении, используйте шрифты не менее 12 px (лучше 14px).

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

Настройка перелинковки

В последние годы мобильную версию сайта, как правило, делают на одном поддомене с десктопной, но иногда их все еще разделяют по двум разным адресам (по образцу site.ru и m.site.ru). Без дополнительных действий поисковые системы считывают это как два разных сайта с дублирующим друг друга контентом, что не лучшим образом влияет на ранжирование.

Удалить дубли страниц одного и того же сайта на разных поддоменов можно, настроив перелинковку между разными версиями сайта. На каждой странице десктопной версии нужно разместить link с атрибутом rel=«alternate», отсылающим на аналогичную страницу в мобильной, а в мобильной тег link с атрибутом rel=«canonical» со ссылкой на десктопную. Проверить страницы на наличие дублей можно в Яндекс.Вебмастере и Google Search Console.

Частые ошибки в мобильной верстке

Анастасия Шестова, руководитель направления поискового продвижения, ИнтерЛабс:

«Разберем 8 часто встречающихся ошибок в мобильной версии и как их исправить:

1. Мелкий шрифт

По отношению к ширине страницы шрифт текста слишком маленький, что затрудняет читабельность.

Как исправить? 

Задать область просмотра и настроить масштабирование шрифтов.

2. Горизонтальная прокрутка

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

Как исправить? 

Задать масштабирование контента в зависимости от размеров области просмотра.

3. Близко расположены элементы 

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

Как исправить? 

Проверить срабатывание соседних элементов при взаимодействии, при необходимости скорректировать расположение блоков.

4. Всплывающие элементы

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

Как исправить? 

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

5. Мобильное меню

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

Как исправить? 

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

6. Формы

Большое количество обязательных полей создает сложности заполнения на мобильных.

Как исправить? 

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

7. Телефон

Номер телефона не всегда кликабелен для быстрого звонка.

Как исправить? 

Оформить телефоны тегом «tel:» для быстрого набора номера с мобильных.

8. Турбо-страницы Яндекс

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

Как исправить? 

При возможности реализовать максимально большое число турбо-страниц, отслеживать корректность источника данных».

Основные аспекты мобильной оптимизации

Виктор Прядильщиков, head of SEO, Rookee.ru:

«В качестве базовых рекомендаций по оптимизации сайта под мобильные устройства можно дать следующие:

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

2. Использовать короткие и понятные URL, которые легко запомнить и передавать другим людям, без использования компьютера и мышки.

3. Использовать мета-теги, такие как «viewport» для корректного отображения сайта на мобильных устройствах.

4. Уменьшить размер файлов (например, картинок), чтобы сайт быстрее загружался на мобильных устройствах.

5. Использовать мобильно-ориентированные ключевые слова и фразы для создания мобильно-ориентированного контента (поскольку поиск на ПК и на мобильных устройствах отличается, в том числе и по пользовательскому интенту).

6. Использовать Google Search Console для того чтобы осуществлять мониторинг и анализ состояния сайта для определения ошибок и проблем, связанных с мобильной оптимизацией (удобство для пользователей, Core Web Vitals).

7. Использовать Google PageSpeed Insights для оценки скорости загрузки сайта на мобильных устройствах и идентификации проблем, которые можно устранить (особенно стоит следить за такими показателями, как Cumulative Layout Shift (CLS) и First Contentful Paint (FCP)).

8. Использовать Google Mobile-Friendly Test для определения, соответствует ли сайт стандартам мобильной оптимизации.

9. Использовать микроразметку, такую как Schema.org (стандарт семантической разметки данных, который помогает поисковикам лучше понимать данные, представленные на сайте), для улучшения видимости сайта в поисковых системах.

10. Использовать компактное навигационное меню (и другие аналогичные элементы сайта), которое легко можно найти на мобильном устройстве (порой, на небольших экранах не всегда можно получить доступ ко всему меню целиком, особенно когда речь идет о навигации внутри крупного интернет-магазина)».

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

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

Запустить собственное приложение для iOS и Android теперь можно прямо на ADVANTSHOP. Мы подключим все необходимое, соберем приложение и опубликуем в App Store, Google Play и RuStore.