IT Projects
8 916785 37 02
10:00 - 20:00, пн - пт
Сделать заявку

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

admin Feb 02, 2022


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


  1. Почему мобильная оптимизация сейчас важна?
    1. Доля мобильного поиска больше десктопного
    2. Поисковые системы рассматривают мобильный поиск в качестве первоочередного
  2. Какую мобильную версию для сайта выбрать
    1. Что такое адаптивный дизайн (вёрстка)?
    2. Домен третьего или второго уровня
    3. Динамический контент
  3. Как протестировать сайт на оптимизацию для мобильных?
    1. Измерьте производительность сайта
  4. Как улучшить свойства сайта для пользователей мобильных устройств?
    1. Оптимизация скорости загрузки
  5. Итоги

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

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


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

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

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

Оптимизация сайтов для смартфонов


Плюсы мобильной оптимизации сайта:

  1. высокая скорость загрузки страниц;
  2. улучшение удобства пользования сайтом;
  3. увеличение CTR;
  4. повышение конверсии;
  5. лучшие поведенческие факторы;
  6. увеличение трафика;
  7. высокие позиции в результатах поиска.
Мобильное приложение или адаптивный дизайн


Доля мобильного поиска больше десктопного

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

Различные источники приводят разные цифры, но в основном это 80 процентов. Вот данные Яндекс.Радара:

Рост мобильного трафика по данным Яндекс.Радара


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

Поисковые системы рассматривают мобильный поиск в качестве первоочередного

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

Этот принцип в 2015-м году подхватил Google, выпустив обновление Mobile Friendly. Оптимизация для мобильных устройств стала фактором ранжирования и предпочтение в выдаче отдавалось сайтам с адаптивным дизайном.

Адаптивная вёрстка на разных устройствах


В 2017-м Google сделал следующий шаг, перейдя на Mobile-First Index. Сначала индексируется мобильная версия. А если ее нет, то тогда уже десктопная. Продвижение нужно строить с учетом этого факта.

Аналогично поступает и Яндекс. Как и в Google, наличие мобильного варианта является фактором ранжирования.

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

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

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

Мы рассмотрим 3 наиболее популярных варианта и подробно опишем их преимущества и недостатки.

Способы адаптации для разных устройств


Что такое адаптивный дизайн (вёрстка)?

Сейчас это самое распространенное среди вебмастеров решение и оно рекомендуется поисковыми системами.

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

Таким образом, и HTML и CSS-код у обеих версий сайта один и тот же. Не нужно контролировать, с помощью какого устройства пользователь просматривает страницу.

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

  • один и тот же код для всех устройств;
  • единая адресация страниц;
  • легкость обслуживания;

Минусы:

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


Домен третьего или второго уровня

Этот способ поисковиками не рекомендуется. Чаще всего реализуется доменом третьего уровня в виде буквы m, например, m.domen.ru. Фактически при этом создается отдельный сайт на своем html-шаблоне и со своими css-файлами.

Сайты могут находиться и на разных доменах второго уровня.

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

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

Возможны два варианта:

  1. У сайтов отдельные шаблоны, но одинаковый контент, который существует в единственном экземпляре. И если его отредактировать, то это проявится сразу в обоих ресурсах.
  2. У сайтов отдельные шаблоны и разный контент. По сути, это два разных ресурса, хотя могут обслуживаться одной CMS и управляться из одной админки.

Очень важно прямо указать поисковикам, какая версия сайта является основной для индексации. Делается это с помощью директив rel="alternate" и rel=”canonical”. В результате не будут созданы дополнительные дубли и позиции в выдаче не ухудшатся.

Плюсы:

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

Минусы:

  • различные URL;
  • необходимость редактировать две версии сайта;
  • могут появиться дубли;
  • сложность редактирования (для разного контента).
Использование домена третьего уровня


Динамический контент

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

Сервер определяет по User-Agent устройство пользователя и в зависимости от этого отдает соответствующие HTML и CSS.

Из плюсов здесь одинаковый адрес URL. Из минусов - это решение дорогостоящее.

Выдача динамического контента в зависимости от устройства


Как протестировать сайт на оптимизацию для мобильных?

Для адаптивного сайта главное - скорость загрузки и удобство использования. Удобство сейчас, например для Google, выражается в большом шрифте и в достаточном расстоянии между кликабельными элементами.

Если быть точным, то для алгоритмов поиска и ранжирования в Google важными являются обновление Page Experience и входящие в него Core Web Vitals.

В эти понятия входят скорость загрузки самого крупного объекта (LCP), задержка после первого ввода (FID) и совокупное смещение макета (CLS). Сайт должен работать на протоколе HTTPS, быть мобильно адаптированным, обеспечивать безопасность просмотра и не иметь навязчивых блоков.

Так что прежде чем приступать к оптимизации, посмотрите как обстоят дела сейчас. Может быть предпринимать ничего не нужно.

Специальная страница для тестирования на мобильность в Google Search Console:

Как проверить адаптацию сайта в Google


Скорость загрузки сайта на мобильных устройствах:

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


Измерьте производительность сайта

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

У Google это можно сделать с помощью:

  1. web-сервиса PageSpeed Insights;
  2. Lighthouse, внедренный, в частности, в Chrome DevTools;
  3. консоли, запросив Search Console Speed Report;
  4. сервиса Google Mobile Friendly - Проверка оптимизации для мобильных

и некоторых других интерфейсов.

Измеряем скорость через веб:

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


У Яндекса адаптированность сайта проверяется Вебмастером.

  1. одна страница - в разделе “Проверка мобильных страниц”;
  2. весь сайт - в разделе диагностики.
Как проверить оптимизацию сайта для мобильных устройств в Яндексе


Lighthouse в браузере Chrome. Проверяем производительность:

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


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

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

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

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

Во-вторых, нужно провести стандартные мероприятия, которые описаны в руководствах по оптимизации на адаптивность.

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

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

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

Скорость повышают следующими мерами:

  • Минимизируют все коды - HTML, CSS, JS. Используют различные сервисы для их сжатия.
  • Убрать все ненужные и тяжелые плагины. Оптимизировать javascript код.
  • Использовать изображения соответствующие их актуальному размеру. Прогнать все картинки и фотографии через программы сжатия. При возможности для каждого разрешения экрана загружать свою картинку.
  • На мобильных устройствах используйте ленивую загрузку изображений. Отложенная загрузка позволяет закачивать файлы картинок тогда, когда они становятся видимыми на экране.
  • Проверьте ваш хостинг и в случае необходимости смените его. Сейчас достаточное количество провайдеров, которые предлагают мощные серверы и высокоскоростные каналы интернета по доступной цене.
  • Включите в CMS кеширование, разрешите его для всех страниц и файлов. При повторном просмотре контент не будет заново генерироваться и это ускорит скорость загрузки.
  • Проверьте сайт на избыточные и множественные редиректы.
  • Подумайте об использовании CDN.
  • Настройте в поисковиках AMP и турбо-страницы.

Итоги

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

Мобильную версию сайта делают тремя способами: адаптивная вёрстка, динамический шаблон или поддомен третьего уровня.

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

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

Комментарии (0)

Добавить комментарий

Имя: 


Электронная почта: 


Разрешённые теги: <b><i><br>Добавить новый комментарий: