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

Евгений Чуранов
06.04.2020 Евгений Чуранов Количество просмотров: 1176

Сегодня сложно представить себе жизнь без мобильных устройств, несмотря на то, что каких-то 15-20 лет назад мобильные в нашей стране были лишь у единиц. По данным Яндекс.Радара на начало 2020 года, число россиян, которые выходят в интернет с телефонов, уже превысило 57%. Это значит, что если ваш сайт не оптимизирован под смартфоны, планшеты и другие переносные устройства, продвигать его будет гораздо сложнее, и это не даст нужного эффекта.

9 мин.

Мы в WebCanape разработали более 2100 сайтов и точно знаем, какие требования предъявляют поисковые системы к оптимизации сайта под мобильные. В статье мы расскажем, как подружить ваш сайт с телефонами и как это повлияет на ваш бизнес.

Типы устройств в России

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

По данным отчета Digital 2020, сегодня больше половины времени в интернете (50,1%) мы сидим с мобильных телефонов. Рост объема мобильного трафика не мог остаться незамеченным. В результате в поисковых системах появились алгоритмы, которые оценивают в первую очередь не десктопную версию, а мобильную.

Первым обратили внимание на оптимизацию сайта для мобильных устройств в Google (алгоритм Mobile-First). Сейчас это важно и для Яндекса. Адаптивный сайт выше ранжируется в поиске.

Результаты мобильной оптимизации сайта:

  • увеличение трафика;
  • повышение CTR (кликабельности сниппета);
  • более высокие позиции в выдаче;
  • рост конверсии сайта;
  • улучшение поведенческих факторов.

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

Требования для продвижения сайта в мобильной выдаче

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

  • дизайн страниц адаптирован под экраны смартфонов и планшетов, на страницах есть полоса прокрутки для устройств с небольшой диагональю;
  • на странице нет Flash-элементов, Java-апплетов и Silverlight-плагинов, так как они сильно тормозят загрузку и могут не отображаться на некоторых моделях устройств;
  • рекламные баннеры не закрывают контент;
  • ссылки кликабельны;
  • шрифт адаптирован под диагональ разных экранов;
  • есть кнопки и элементы для выполнения действий на телефонах;
  • интерфейс устройства интегрирован с кнопками и информацией с сайта: звонок при нажатии на номер телефона или значок, предложение отправить письмо по клику по адресу электронной почты, возможность заполнить форму и прочее;
  • страницы открываются менее 5 секунд.

Примеры неадаптивных сайтов

Результаты продвижения в мобильном поиске Google и Яндекс могут отличаться, поскольку системы используют разные алгоритмы. Но после проведения оптимизации позиции точно станут выше, число отказов уменьшится, вырастет конверсия.

Техническая сторона мобильной оптимизации сайтов

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

Делаем адаптивный дизайн

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

Недостатки мобильной версии:

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

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

Плюсы адаптивной верстки:

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

В зависимости от того, с какого устройства прошел запрос на сервер, с одного и того же URL реализуются разные варианты кода HTML и CSS.

Для дизайна страницы можно использовать векторные (SVG) изображения и иконки. Они не потеряют качество при изменении масштаба картинки, поэтому подойдут для экранов любых размеров. Но в некоторых CMS могут возникнуть проблемы с загрузкой SVG, поэтому нужно учитывать движок ресурса.

Проверить качество оптимизации сайта для мобильных устройств можно в Google Search Console. Сервис может указать, например, на ошибки, связанные с показом шрифтов и изображений. Для этого откройте вкладку «Удобство для мобильных». Способ подходит и для адаптивной верстки, и для мобильной версии. Можно выбрать вкладку «Контент шире экрана» и увидеть все URL, у которых есть эта проблема.

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

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

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

Повышаем скорости загрузки

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

Скорость загрузки сайта

Вот самые популярные способы повысить скорость загрузки сайта:

  • почистить исходный код — удалить лишние символы без потери функциональности;
  • сжимать изображения с помощью специальных компрессоров (Tiny PNG, Compress Now, JPEG Mini), чтобы не потерять качество;
  • использовать современные форматы изображений — JPEG XR, SVG, WebP, JPEG 2000;
  • убрать лишние функции — куча неиспользуемых плагинов CMS будет тормозить загрузку;
  • оптимизировать работу сервера — использовать кэширование для бесперебойной работы;
  • внедрить Турбо-страницы для Яндекса и AMP для Google.

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

Внедряем Турбо-страницы и AMP

Внедрение AMP и Турбо-страниц — необходимость при оптимизации сайта под мобильные. Первая технология — от Google. Аббревиатура AMP расшифровывается как Accelerated Mobile Pages — ускоренные мобильные страницы, то есть страницы, загрузка которых выполняется в несколько раз быстрее обычных даже при низкой скорости интернета. Это дает им преимущество при ранжировании: они находятся выше остальных в поисковой выдаче.

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

Турбо-страницы — это технология Яндекса. Она позволяет создать облегченную версию страницы. Высокая скорость — результат использования оптимизированной верстки, собственной сети доставки контента (CDN) и хранения данных на серверах Яндекс.

Турбо страницы

Преимущества Турбо-страниц:

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

Создать Турбо-страницу легко — это можно сделать бесплатно в конструкторе Яндекс Директ. Откройте вкладку «Создать — Турбо-сайт», заполните адрес сайта, выберите главную страницу, задайте фавиконку, оформите наполнение и настройте счетчик Яндекс Метрики.

Конструктор в Директе

Второй вариант внедрения сервиса: через специальную разметку страниц с последующей выгрузкой данных в Яндекс через RSS или XML.

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

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

Турбо-страницы со значком ракеты

Адаптивный сайт или мобильное приложение

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

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

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

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

Пример мобильного приложения и сайта Panteric

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

Мы создадим для вас эффективную стратегию продвижения и проведем мобильную оптимизацию. Наше digital-агентство уже разработало более 2100 сайтов, вывело в топ поиска более 300 проектов. Большой опыт и постоянный мониторинг сферы интернет-маркетинга дают возможность предлагать современные решения и выдавать качественный результат. Оставьте заявку, и мы расскажем, как сделать ваш бизнес успешнее.

Хотите внедрение консультанта, сайт, услуги продвижения, рекламы или SMM? Позвоните +7 (800) 200-94-60, доб. 106 или напишите нам: rop@web-canape.com

У вас есть задача для нас?
Пришлите заявку, обсудим и решим!

Контакты

Звонок бесплатный

Смоленск +7 (4812) 20-94-60

Москва +7 (499) 506-97-20