Назад в блог

Мобильная оптимизация: почему это важно и как адаптировать сайт под устройства

По отчетным данным Statista, в 2023-м году количество пользователей в мобильном интернете составило 5,3 миллиарда человек. В таких условиях неразумно было бы думать, что оптимизация сайта под смартфоны и планшеты — это краткосрочный тренд и лишняя трата времени. Пользователи ежедневно ищут информацию с гаджетов: Google сообщает, что более половины всех поисковых запросов в системе приходится сегодня именно на мобильные устройства. В этой статье команда LZ.Media расскажет, как связаны мобильная оптимизация и SEO и что нужно делать, чтобы ваш сайт был в топе выдачи на любом смартфоне (планшете).

Зачем нужна мобильная оптимизация сайтов

  • Рост трафика. Мы уже сказали, что счет мобильных пользователей идет на миллиарды. Детская аудитория, например, и вовсе получает свои первые смартфоны раньше ноутбуков и доступа к родительским ПК. Отказываться от таких посетителей из-за отсутствия мобильной версии — глупо, ведь рост трафика как минимум помогает наращиванию позиций в поисковой выдаче. А как максимум — приводит новых клиентов. Кстати, выдача в поисковиках в телефоне и на компьютере может быть разной по одному и тому же запросу, поэтому надо стремиться к попаданию в топ в обоих случаях.

Посмотрите для примера, как выглядит неперсональная мобильная выдача Google по запросу “SEO агентство в Самаре”. Сначала карта, затем рейтинги, потом вопросы по теме и, наконец, сайты самих компаний. 

А вот неперсональная выдача по тому же запросу в десктопной версии. Сначала идет рейтинг, потом карта и вопросы, а затем сайты. При этом топ-3 агентств выглядит в этот раз иначе.

  • Улучшение пользовательского опыта. Мобильный дизайн влияет не просто на взаимодействие с сайтом, а на впечатление вашей ЦА о продукте и бренде в целом. Помните правила юзабилити? Они в полной мере справедливы и для мобильной версии: пользователь должен понимать, что происходит на странице, куда можно перейти и какое целевое действие от него требуется.
  • Ранжирование в поисковых системах. Вы уже поняли, что для SEO очень важен трафик, а его можно увеличить с помощью адаптации под смартфоны и планшеты. Но надо отметить, что и сами поисковики более лояльны к “мобилопригодным” сайтам. Например, в Google мобильная оптимизация официально учитывается c 2016 года, когда начал действовать принцип Mobile First. Он подразумевает, что страницы индексируют и ранжируют с учетом их адаптации под гаджеты. Также стоит отметить, что наличие мобильной версии — это шанс увеличить поведенческие факторы у пользователей. При наличии приятного дизайна и грамотной навигации люди остаются на сайте дольше и открывают больше страниц, а процент отказов снижается.

SEO-продвижение от LZ.Media

Обратиться к нам

ОБРАТИТЕ ВНИМАНИЕ: “Яндекс” начал делать акцент на “мобилопригодность” сайтов тоже с 2016-ого года. В мобильном поиске отечественной системы работает алгоритм “Владивосток”, который ранжирует сайты с учетом их оптимизации под разные устройства. В блоге сервиса для вебмастеров можно прочитать, что “Яндекс” особенно негативно относится к необходимости горизонтальной прокрутки контента на гаджетах. Кроме того, для поисковика важно, чтобы на сайте не было элементов, которые не поддерживаются браузерами на смартфонах и планшетах: видео, интерактивы и анимация с flash-технологией, апплеты на java, плагины Silverlight для просмотра мультимедиа. Больше о продвижении в “Яндексе” — в нашей статье.

  • Повышение конверсий и продаж. Этот пункт перекликается с предыдущим: чем быстрее и качественнее сайт, который ты кликаешь по ссылке из телефона, тем больше у тебя желания знакомиться с компанией и ее товарами или услугами. Тот же Google утверждает, что пользователи в 5 раз чаще покидают сайты без мобильной оптимизации, а у адаптированных площадок коэффициент конверсии на 27% больше. Всё это, в конечном счете, сильно отражается на продажах. Особенно в тех сферах, где решение принимается в формате “здесь и сейчас”, то есть действует ситуативный спрос. Добавьте к этому и ассоциативный эффект: пользователи запоминают негативный опыт и не возвращаются на сайт, даже если их запрос изменился или они ищут информацию уже с компьютера.

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

Итак, что же такое мобилопригодный сайт? Как вы могли понять из всего сказанного выше, это площадка, которая быстро открывается и позволяет легко найти нужную информацию или совершить конкретное действие. Важно понимать, что пользователи не ждут загрузки дольше 3-5 секунд и не станут постоянно скролить или масштабировать страницу, чтобы найти заветную кнопку для связи либо оформления заказа. Чем проще и понятнее — тем лучше. Теперь разберемся чуть конкретнее, как этого достичь.

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

Существуют разные варианты создания мобильной версии для сайта. Например, если средства на разработчика позволяют, можно организовать отдельный поддомен, то есть создать дополнительную версию своего ресурса. Это создает дополнительную ответственность сеошнику: надо сделать отдельные robots.txt и sitemap.xml, добавить и подтвердить мобильный сайт в Google Search Console и “Яндекс Вебмастер” и так далее. В общем, разрабатывать, а потом оптимизировать и администрировать два сайта сразу — тяжело.

В качестве альтернативы такой сложной задаче иногда рассматривают респонсивный дизайн (он же динамический). Здесь надо использовать RESS-технологию: сервер анализирует тип устройства и передает страницу нужного формата. То есть макет просто растягивается или сжимается: изображения масштабируются, а текстовый контент может быть перенесен в другую часть сайта. URL-адрес, в отличие от предыдущего варианта, здесь остается одинаковым, а HTML-код и CSS-стили будут разными. Сайты с динамическими показами относительно быстро загружаются и индексируются роботами, но у вас всё равно остаются разные коды, так что есть вероятность запутаться и допустить ошибки. Поэтому сегодня всё чаще отдают предпочтение адаптивному дизайну.

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

Некоторые из WP-плагинов помогают подбирать шаблоны сайта для мобильных экранов и конструировать собственные темы для отдельных устройств. То есть пользователи с компьютеров, смартфонов и планшетов смогут увидеть разные версии сайта. Это плагины Any Switcher, Mobile Smart и другие.

ОБРАТИТЕ ВНИМАНИЕ: Тем, у кого нет мобильной версии, поисковики предлагают свои технологии по упрощению страниц. Так, у Google есть AMP (Accelerated Mobile Pages), а у “Яндекса” — турбо-страницы. Минусы таких версий — отсутствие анимации, красивых шрифтов и т. д. Но зато площадка откроется у пользователя даже с очень медленным мобильным интернетом. Стоит иметь в виду, что “Яндекс”, например, отдает предпочтение в мобильной выдаче именно турбо-сайтам, но только люди не будут переходить по вашему URL, а значит, поведенческие факторы не засчитываются в копилку продвижения.

WEB, UX/UI-дизайн от LZ.Media

Обратиться к нам

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

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

  • Типография. В мобильной версии нужно выбирать шрифт покрупнее (от 14px), учитывая интервалы между буквами. Оптимальная высота строки — от 50 до 75 знаков с пробелами, при этом промежутки между строк должны составлять 130-150% от размера шрифта. Важно, чтобы контент сохранял читабельность и при этом гармонично заполнял экран. Так что откажитесь от витиеватых шрифтов, вариантов с насечками и курсивом, чтобы уберечь зрение пользователей. А еще помните, что в заголовках и подзаголовках должна прослеживаться иерархия: H1 обычно равен 300% от размера основного шрифта, а H2 — 200%.
  • Цветовая схема. Текст должен быть контрастен по отношению к фону сайта. То же можно сказать про кнопки и другие элементы. Чем больше контраст, тем заметнее и читабельнее контент. А главное — глаза пользователей устают гораздо реже.
  • Расположение и размеры кнопок/ссылок. Кликабельные элементы должны быть удалены друг от друга, при этом быть заметными и достаточно большими, чтобы пользователь попадал по ним с первого раза. Не допускайте ситуаций, когда блоки с маленькими кнопками соседствуют рядом или ссылки располагаются друг под другом. Помните: в отличие от компьютера, где есть курсор, на мобильных устройствах клик происходит сразу же, без предварительного наведения на элемент.
  • Общая верстка. Текст на странице в мобильной версии должен выглядеть сжато. Чем короче предложения, тем лучше, ведь тогда они не будут растягиваться на 10 строк в экране. Не забывайте также делить текст на абзацы, чтобы оставалось ощущение воздуха и свободного пространства. Помните: дискомфорт от длинной портянки нужно умножать на два, когда речь идет о просмотре с гаджетов. Если не получается сократить объем текста, оформите интерактивное оглавление: читатель сможет переходить по ссылкам на нужные разделы и быстро возвращаться обратно, к содержанию материала.
  • Длина форм. Большие формы заполнять с телефона неудобно, потому что надо много скролить и менять масштаб страницы. Когда у вас есть разделы с обратной связью, вопросами, запросом звонка или оставлением контактов, оставляйте в них только самые нужные поля. Есть возможность организовать регистрацию на сайте через сторонние сервисы и соцсети? Используйте!
  • Поп-апы. С всплывающими окнами, будь то реклама, акционный баннер, подсказки или запросы на подписку, надо быть очень осторожными. Во-первых, мобильные браузеры их часто блокируют. Во-вторых, поп-ап может закрыть основную часть окна, что вызовет у пользователя раздражение. По возможности не используйте эти элементы или сделайте их закрытие быстрым и понятным.
  • Навигация. Меню сайта для мобильных лучше не оставлять развернутым для экономии места. Используйте “бургер”-меню, но заранее проверьте там работу ссылок.
  • Горизонтальный скролл. Никаких прокручиваний слева направо на сайте в мобильной версии не должно быть. Контент должен помещаться внутри экрана, причем даже при поворотах устройства. Поэтому используйте лишь вертикальный скролл.

“Бургерное” меню, короткие формы и большие кнопки, контакты для связи, свернутые всплывающие плашки — мобильная версия LZ.Media сделана практически по всем канонам.

ОБРАТИТЕ ВНИМАНИЕ: Не забывайте про интеграцию с разными мобильными сервисами, встроенными инструментами и приложениями. Здесь можно добавить множество мелких технических фишек, которые сделают мобильный сайт удобнее. Например, настройте быстрый набор номера при клике на телефон. Если для проведения платежных операций или авторизации на сайте нужно вводить код из SMS — сделайте так, чтобы форма заполнялась сама после прихода сообщения, т.е. комбинация читалась бы автоматически.

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

Скорость загрузки страниц сказывается не только на отношении пользователей, но и на оценке сайта поисковиками. Например, у Google есть алгоритм ранжирования Speed Update: для мобильного поиска он официален с 2018 года. А еще Google оценивает удобство сайта по показателям Core Web Vitals. Подробнее про них и про основные сервисы для проверки скорости сайта мы рассказывали в отдельном материале.

Важно отметить, что в 2024 году произошли некоторые обновления. Например, показатель First Input Delay (время от захода на сайт до его полной загрузки) заменили на Interaction to Next Paint (INP) — скорость реагирования страницы на взаимодействия с пользователем. Грубо говоря, речь идет про визуальную обратную связь страницы.

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

Что влияет на скорость загрузки страниц? Разные технические мелочи. Поэтому, если вы хотите ускорить работу сайта, проверьте площадку по чек-листу следующих выполненных шагов:

  • Оптимизация изображений. Можно использовать картинки меньшего размера или применять формат WebP для сжатия без потери качества. Для загрузки изображений можно применять режим Lazy Load: контент будет прогружаться не сразу, а в момент скролла до него. Также выбирайте технологию HTML-5 для встраивания видео. Помните, что загрузка визуала не должна съедать у пользователя много трафика.
  • Оптимизация кода. Здесь поможет сжатие CSS-стилей, HTML-кода и JavaScript. Скрипты, кстати, можно объединять, чтобы сократить число HTTP-запросов.
  • Проверка хостинга. Про особенности выбора провайдера мы объяснили здесь.
  • Сокращение редиректов и плагинов. Чтобы не нагружать сайт лишний раз.
  • Настройка режима кэширования. Временное хранение копий содержимого с сайта улучшает его производительность. Для этого вам помогут, в том числе, CDN-серверы.

ОБРАТИТЕ ВНИМАНИЕ: Да, обилие плагинов перегружает CMS, но некоторые из них чрезвычайно полезны. В своем материале про модули на WP мы познакомили вас с самыми любимыми плагинами, которые помогают с кэшированием, конвертацией, сжатием и отложенной загрузкой контента на сайте. Дополнительно вы можете пользоваться сторонними сервисами: HTML Minifier, UglifyJS, Cloudflare, Online CSS Minifier/Compressor, Gzip Compression Tool.

Разработка сайтов от LZ.Media

Обратиться к нам

Тестирование на различных устройствах

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

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

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

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

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

  • “Яндекс Вебмастер” предлагает проверку мобильных страниц. Вы сможете обнаружить, где используются неподдерживаемые на смартфонах плагины и flash-элементы, каким страницам не хватает турбо-версий, правильно ли подобран шрифт, есть ли тег viewport и так далее.

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

  • Сервис I Love Adaptive покажет вам, как выглядит сайт на разных устройствах. Более 30 моделей смартфонов и планшетов на основных ОС, настройка размеров, масштабирование страницы, повороты экрана, отключение прокрутки — здесь даже можно сравнить верстку с дизайн-макетом, чтобы наглядно увидеть ошибки.
  • SEO-сервис Топвизор также поможет вам проанализировать сайт по части адаптации для разных устройств. В отчете обычно содержатся данные по CSS, а также показатели Core Web Vitals. Этот же сервис можно использовать для оценки позиций в поисковой выдачи (также подойдет “Серпхант”).
  • Для тех, кто предпочитает креативные решения, можно посоветовать браузер Blisk, который обеспечивает разработчикам предпросмотр сайта на разных устройствах. Масштабирование, скроллинг, скриншоты, ошибки в JavaScript — здесь поддерживается свыше 50 устройств, включая разные ноутбуки и планшеты.

ОБРАТИТЕ ВНИМАНИЕ: Бесплатный сервис Google Mobile Friendly перестал существовать в конце 2023 года. Отчеты “Удобство для мобильных” в Google Search Console также закрыты.

Советы по мобильному SEO от команды LZ.Media

  • Собираете семантику? Изучите поисковые подсказки: они очень актуальны при оптимизации сайта под мобильный поиск, так как пользуются популярностью именно на гаджетах. Как с этим работать — рассказали в отдельной статье.
  • Добавляйте субтитры, титры, подписи и описания к визуальному контенту. Если инфографика или таблицы в мобильной версии сильно увеличивают длительность скролла, лучше убрать их ради минимизации уходов с сайта и не раздражать пользователей. Экстремально широкие изображения (от 600 px) тоже лучше уменьшать заранее. А еще у ваших пользователей должна быть возможность масштабировать картинку, чтобы рассмотреть ее при увеличении.
  • Убедитесь, что в мобильной и десктопной версиях совпадают мета-теги, число и работоспособность ссылок, содержание и объем текста. Вам поможет сервис Screaming Frog SEO Spider. При этом учитывайте, что TItle, например, при просмотре с мобильных отображается шире, чем в случае с 60-70 символами на компьютере. Значит, можно формулировать заголовки длиннее и предоставлять мобильным пользователям больше информации о странице.
  • Будьте осторожнее со скрытием контента от индексации. Убирайте только то, что действительно малополезно для посетителей со смартфонов. Если вы думаете, что можно “безнаказанно” скрыть неудобные на мобильных устройствах блоки (калькулятор цены, FAQ или рекомендации в блоге), то ошибаетесь. И Google, и “Яндекс” учитывают контент как фактор ранжирования в поисковой выдаче, поэтому есть риск потерять позиции сайта.
  • Проверяйте переадресацию. При заходе с мобильного устройства пользователи не должны оказываться на десктопных страницах. Настройте редиректы на всех ссылках и не путайте коды ответа 301 и 302.
  • Используйте геоданные. Чем больше своих филиалов и точек продаж вы учитываете, тем лучше пользовательский опыт на мобильной версии сайта. Самое очевидное — запрос на местоположение пользователя, чтобы подставить нужный город при оформлении заказа или показать ближайшие магазины/офисы.
  • Если претендуете на топ мобильной выдачи, подумайте о возможностях расширенного сниппета. Там могут отображаться быстрые ссылки, контакты, товары. А еще можно использовать смайлики: сегодня эмоджи корректно отображаются в большинстве мобильных браузеров. Также обязательно продумайте фавиконы, ведь они увеличивают кликабельность.
  • Исследование Demandsage показало, что почти 30% запросов с мобильных устройств — голосовые. Такой поиск считается удобным и простым, а главное, позволяет отправлять длинные запросы (в среднем, 29 слов). Это значит, в работе над продвижением сайта сеошники должны учитывать запросы с низкой частотностью и длинными хвостами (включая геолокацию). В то же время важно адаптировать ключи: выстраивать порядок слов и их согласование. Иными словами, ключ должен отражать живую речь, а не письменную формулировку.

Напоследок скажем, что иногда на внешний вид сайта на гаджетах влияют не только ваши усилия, но и сторонние факторы. Например, обновления браузеров или ОС. Однако это не означает, что вам не нужно прикладывать усилия, чтобы преумножить мобильный трафик. Более того, можно не только оптимизировать сайт, но и параллельно разрабатывать приложение для Google Play и App Store. Команда LZ.Media вторым пока что не занимается, но точно поможет вам с разработкой, дизайном и SEO-продвижением основного интернет-ресурса. Ждем вас!

Остались вопросы?

Оставьте заявку, чтобы получить консультацию

Больше экспертного контента, анонсы кейсов и статей в нашем Телеграме
Перейти
Еще Статьи