Оптимизация сайта под мобильные устройства: успешные продажи с любого смартфона
Если вы читаете это со смартфона, нет смысла объяснять, почему оптимизация сайта под мобильные устройства нужна и важна. Ответ тут очевиден — пользователю должен быть комфортен сёрфинг как на ПК, так и на других гаджетах. Это знают маркетологи, асессоры и посетители ресурсов, вероятно, даже школьники, которые регулярно что-то читают со смартфонов или планшетов.
Мы собрали всё самое важное и интересное и решили рассказать, как провести оптимизацию мобильной версии ресурса, чтобы привлечь больше трафика и упростить взаимодействие в целях роста конверсии.
Почему мобильная версия так важна для продвижения
Ещё в 2015 году Яндекс запустил алгоритм «Владивосток», а Google начал тестировать Mobile-first, с которых и стартовала эра «пригодности» сайтов для вывода на мобильные гаджеты. Тогда началась борьба за пользователей, готовых совершать покупки и заказывать услуги со смартфонов, а также за первенство в выдаче, обусловленная заботой об удобстве и безопасности для любимых клиентов.
Соответственно, если сайт расценён роботами как не оптимизированный под смартфон, контент просматривать сложно, совершать покупки небезопасно, а вёрстка постоянно норовит испортить впечатление от дизайна — мобильный трафик будет страдать, а позиции в поисковой выдаче не приблизятся к желаемым вершинам.
Поэтому опытные маркетологи рекомендуют не просто уделить время проверке и улучшению мобильной версии, но и грамотной оптимизации процессов и функционалов — только технически исправный, удобный и безопасный сайт сумеет привлечь внушительное количество переходов.
С чего начать
Начать проверки и улучшения следует со скорости. Чем медленнее грузятся страницы на устройстве, тем выше шансы на то, что недовольный пользователь быстро уйдёт к конкуренту, чей ресурс грузится быстро.
Время от перехода до возможности взаимодействия с контентом не должно превышать 4 секунд. А 9–10 секунд — это уже критическая масса: столько современные пользователи тратить на загрузку не готовы. Новая эпоха, новые технологии, а значит, даже те, кто застал интернет с карточками оплаты, уже не желают тратить время на пустое ожидание. К тому же в каждой нише найдётся альтернатива. Теперь побеждает быстрейший!
На что обратить внимание в первую очередь?
- Хостинг.
От него требуется надёжность, условия должны быть соответствующими.
Что важно:
чтобы хостинг был в РФ, чем он дальше, тем, как правило, больше проблем с обслуживанием и скоростью;
качество техподдержки - стоит заручиться отзывами и мнениями знакомых, друзей и специалистов;
надежность - крупные хостеры с большим количеством довольных клиентов - отличный выбор.
Среди самых надежных и популярных можно выделить:
- Beget https://beget.com/ru - недорогой, успешно зарекомендовавший себя на рынге хостер с гибкими условиями и чуткой поддержкой.
- Timeweb https://timeweb.com/ru/ - один из наиболее известных хостеров с отличной репутацией.
- SmartApe https://www.smartape.ru/ - крайне доступный хостинг с гибкими условиями и пробным периодом до 14 дней. Можно оценить качество и убедиться в качестве работы круглосуточной поддержки.
- Тяжёлые файлы.
Видео, анимация, версии фотографий большого размера в высоком разрешении — всё это грузится не быстро. Если мобильное соединение проходит молниеносно, то пользователь не заметит, что изображение тяжело грузилось, потому как общая скорость будет в норме. Но стоит всё же смотреть правде в глаза и думать о том, что покрытие неоднородно и в некоторых местах отличные фотографии в портфолио будут грузиться до 1 минуты. Для современного человека это катастрофически много.
Если есть возможность, то стоит выбрать облачные решения и хранить всё там. И встраивать ссылки с популярных видеохостингов, оставляя на ресурсе лишь превью. Если эти варианты по каким-то причинам недоступны — сжимайте. Уменьшайте вес, причём без потери качества, с плагинами:
WP Compress,
Robin Image Optimizer,
EWWW Optimizer,
Smush.
- Лишнее.
Дополнительные библиотеки шрифтов, скрипты, скрытые блоки — если загрузку подобных элементов на устройстве можно отложить, нужно это сделать. Но это не слишком эффективный метод, так как минимально ускоряет загрузку.
- Современные форматы изображений.
Webp — формат намного прогрессивнее и легче, чем привычный jpg. При одинаковом качестве картинки вес может отличаться до 3 раз.
Безусловно, только на скорости останавливаться не стоит, поэтому продолжим о возможностях оптимизации сайта.
Топ самых актуальных рекомендаций
Продолжая тему скорости, стоит упомянуть и о возможностях, которые предоставляют сами поисковые системы. Речь о Турбо-страницах Яндекса и AMP от Google. Технологии ускоренных мобильных страниц позволяют без дополнительных технологических решений устранить проблемы долгой загрузки и роста процентов отказов из-за этого показателя.
Останавливаться на том, как подключить Турбо и AMP, не будем — подготовим отдельную инструкцию, а пока продолжим о том, как улучшить отображение сайта на мобильных устройствах.
Выбор размера шрифта. Удобство прочтения влияет как на восприятие информации, так и на понимание самого предложения. Чем комфортнее читать, тем больше доверия. Поэтому с размером шрифта стоит экспериментировать и проводить замеры, просить обратную связь. Только так удастся найти идеальный вариант для аудитории. Специалисты рекомендуют не менее 12 px.
Размер изображений. Для мобильных версий интернет-магазинов крайне важна возможность масштабировать фотографии товаров — без неё проблематично выбрать, рассмотреть характеристики и убедиться, что они удовлетворяют потребностям. Реализовать «лупу» или увеличение по клику — лучший вариант для оптимизации, если фотографии представлены в миниатюре.
Удобные кнопки. Промазать пальцем мимо кнопки, которая слишком мала, очень просто. Это раздражает и способно стать в конечном итоге причиной ухода потенциального покупателя. Если вовремя выявить проблему и увеличить размер элементов для взаимодействия, негативных сценариев не случится.
Это повлияет и на конверсию, возможно, кому-то просто не хватает терпения для увеличения количества товара в корзине, потому как стилусами пользуются единицы, а пальцем можно задеть сразу несколько маленьких кнопок.
И еще один неудачный пример кнопок.
Одну видно, вторую не видно совсем, при этом расположены максимально близко, чтобы воспользоваться ими наверняка не получилось.
Всплывающие окна. Если на устройстве контент сложно просматривать, потому что постоянно что-то всплывает и предлагает получить скидку, это может привести не только к уменьшению числа повторных визитов и лояльной аудитории, но и Google начнёт понижать сайт в результатах поисковой выдачи. Если перспектива неприятна, лучше отказаться от подобного функционала и разместить информацию об акциях в специализированном разделе или в окнах, которые не перекрывают контент и их несложно закрыть.
Кликабельные номера телефонов. Увидев номер телефона в шапке или футере, набирать его на память неудобно, копировать тоже бывает непросто. Поэтому на мобильной версии подобные элементы должны быть кликабельными, чтобы сразу по клику переходить к звонку. Если с этим проблемы, нужно как можно скорее исправить.
Навигация. Если на ПК развернуть страницу и проверить все ссылки в меню и футере не составляет труда, то на смартфоне с навигацией могут быть проблемы. Необходимо реализовать классическое меню «бургер», вывести важные ссылки в футер, использовать хлебные крошки и при необходимости добавить блоки со ссылками на товары или категории услуг.
Еще один неудачный пример на этот раз футера. В нем нет ни одной полезной ссылки ни на разделы, ни на служебные страницы. При этом есть анимация горящего огня, идущего снега, которые симпатично смотрятся на десктопе, но на мобильной версии подвисают и не дают никакого эффекта, кроме нечитаемости текста.
Намного логичнее не утяжелять футер и не замедлять скорость загрузки, при этом уделив внимание действительно важным данным.
Адаптивное видео. Крайне важно, чтобы плеер адаптировался к размеру экрана устройства. На старте работ с сайтом стоит обратить внимание на этот момент. Если границы видео выходят за пределы активного экрана, это может стать негативным опытом для пользователей и поводом снизить позиции проекта в выдаче за отсутствие оптимизации под смартфоны и прочие гаджеты.
Отсутствие разницы. Мобильная версия и десктопная должны иметь одинаковое количество страниц, идентичный контент и общие элементы. Необходимо настроить синхронизацию, чтобы при внесении изменений ничего не упустить.
Упрощенная регистрация. Важна опциональная доступность, чтобы пользователь мог не заполнять все поля и данные в профиле. Иногда на смартфоне делать это крайне неудобно, но и просмотреть весь контент без регистрации не всегда возможно. Такую функцию непременно стоит внедрить.
Авторизация по номеру телефона - наиболее простой и быстрый вариант, а автозаполнение кода из смс - непременно оценят все пользователи.
Кликабельные мессенджеры. Ситуация аналогична телефонным номерам. Чтобы не усложнять жизнь посетителям сайта, необходимо реализовать быстрый переход со страниц в приложение. Копировать, использовать поиск в приложениях — лишняя трата времени, на которую могут не решиться посетители.
Удобство просмотра на планшетах. Несмотря на то, что аудитория владельцев смартфонов с внушительной диагональю дисплея огромна, любителей серфить в интернете и выполнять несложные рабочие задачи на планшете не меньше. Поэтому стоит учесть возможности отображения на устройствах с разрешением 820 х 1180, 834 х 1194, 800 х 1280, 884 х 1104 и другими популярными вариантами.
Использование геоданных. Ещё один метод упростить оформление заказа, способный оптимизировать расход времени на уточнение адреса доставки и нахождение ближайшего пункта выдачи покупок.
Для приложений такси такси и доставки продуктов - это крайне удобно, особенно, когда человек сам до конца не понимает где находится, находясь впервые, и не может сориентироваться. Включенная геолокация все мгновенно исправит.
HTML5. Стоит отказаться от Flash-элементов, Java-апплетов и других технологий, которые могут значительно замедлить скорость загрузки страниц. В этом плане идеально подойдет HTML5.
Использование горизонтальных прокруток. Применение подобных элементов не только отправляет сайт в прошлое, но и делает его неудобным, а также обращает на это внимание роботов, которые в любой момент могут признать сайт не оптимизированным под мобильные устройства.
Число элементов в ряду. Безусловно, их можно вывести столько же, сколько на десктопной версии, но смогут ли пользователи что-то увидеть? Сомнительно. Поэтому необходимо ориентироваться на пропорции и значительно уменьшать количество, ориентируясь на размер.
Удобная фиксация шапки. На конверсии положительно сказывается удобство возвращения к каталогу. Логотип, функционал поиска и меню-бургер - это минимальный набор для быстрого поиска необходимого товара и услуги.
Адаптивные фильтры. В большом каталоге без фильтров найти нужный товар крайне сложно. На смартфоне сделать это еще сложнее. Поэтому они должны быть простыми и доступными для выбора.
Чекбоксы удобные для выбора, галочки проставляющиеся одним касанием - это важно для удобства пользователя.
Всё, что делает мобильную версию удобнее и привлекательнее, надо применять.
Отдельно о дизайне
Здесь стоит сказать отдельно не столько об адаптивном, сколько о дизайне в принципе. Часто на версиях, предназначенных для мобильных устройств, элементы смотрятся проще, а красочной анимации и вовсе нет. Так, на смартфонах всё выглядит скучным и скудным на яркие вкрапления. Это обязательно стоит учесть, так как у многих ресурсов существенна доля мобильного трафика. В значительной степени его увеличить способно улучшение внешнего вида страниц, добавление интерактивных объектов, анимаций и стикеров.
Безусловно, здесь стоит учесть, что визуальные эффекты — это дополнительный вес и снижение скорости. Но, как уже было сказано выше, при оптимизации нелишне задействовать облачные технологии и утилиты для сжатия. Так пользователи получат долгожданное привлекательное оформление ресурса, а владельцы бизнеса — конверсию и рост трафика. Находить компромиссы в этом случае вполне реально.
Вся соль
Оптимизация мобильной версии сайта — важное направление и при развитии проекта, и на момент стагнации, когда сложно понять, что не так и почему сохраняются проблемы с трафиком.
Что стоит сделать в первую очередь?
- Заняться оптимизацией скорости загрузки. Чем быстрее открываются страницы, тем лучше.
- Убедиться в корректности отображения контента. Шрифт в мобильном варианте должен быть читаемым, а видео — адаптивным для просмотра на компактных устройствах.
- Реализовать возможности быстрой регистрации и заполнения данных. Такие опции придутся по вкусу пользователям и будут оценены асессорами поисковых систем.
- Сделать дизайн ресурса привлекательным и удобным для посетителей (покупателей, заказчиков).
Оптимизация в первую очередь должна стать системным элементом для роста проекта, развития. Регулярные мероприятия по совершенствованию помогут наращивать трафик и не беспокоиться о конверсии. Если разобраться самостоятельно в тонкостях не удаётся, доверяйте работу профессионалам.