Оптимизация сайта для мобильных устройств
По этой теме написан миллион справочных материалов. Казалось бы, можно остановиться и не писать об этом снова. Но сложно удержаться. Давайте еще раз поговорим о том, как оптимизировать сайт для смартфонов и планшетов. Что проверять, если все уже оптимизировано?
Есть три основные и две дополнительные возможности оптимизации для мобильной выдачи.
1. Мобильные сайты
Содержание для десктопов и мобильных устройств находится на разных страницах с разными URL. Обычно мобильный сайт размещают на поддомене m.site.ru.
Если разработали мобильный сайт, не забудьте связать его страницы с десктопными специальными атрибутами. Для этого нужно на мобильных страницах настроить тег <link> с элементом rel="canonical", указывающим на страницу для компьютеров. А на десктопных страницах — с элементом rel="alternate", который укажет на соответствующую мобильную страницу. Каждой десктопной должна соответствовать только одна мобильная страница, а каждой мобильной — одна десктопная. Задать rel="alternate" можно также с помощью специальных атрибутов в Sitemap. Поисковики поддерживают такие теги в sitemap.xml:
Настройте переадресацию. Необходимо настроить автоматическую переадресацию с помощью HTTP-запроса или JS. HTTP-запрос учитывает агент пользователя и перенаправляет посетителя на соответствующую версию сайта. В документации Google рекомендуется настроить 302-й ответ сервера для такого перенаправления. Перенаправление с помощью JS будет отнимать драгоценные секунды при загрузке страницы. Принцип работы скрипта: если минимальная ширина экрана устройства равна определенному значению в пикселях, то необходимо перенаправить пользователя на соответствующую страницу rel=”alternate”. Сначала браузер загрузит страницу, затем выполнит JS, а потом при необходимости перенаправит пользователя на подходящую версию.
2. Адаптивная версия
URL и HTML-код страниц на разных устройствах одинаковые, меняется только CSS — размеры и расположение элементов на странице в зависимости от величины экрана устройства.
Нужно разрешить Googlebot сканировать CSS, JS, изображения на страницах.
- При реализации адаптивной версии важно настроить тег meta name="viewport".
Метатег передает браузеру информацию о ширине экрана устройства. В соответствии с этими данными браузер строит модель CSSOM. Справка Google
3. Динамический показ
По одному URL отдается разный HTML и CSS. Чтобы отправить корректный вариант кода страницы, сервер обращается к агенту пользователя через HTTP-запрос Vary. Если у пользователя мобильный агент, то сервер отдаст соответствующий код.
Важно настроить Vary.
Vary сообщает серверу и браузеру о необходимости учесть агент пользователя, и поскольку Googlebot понимает HTTP-запросы при сканировании страниц, Vary указывает роботу на нахождение контента.
Сравнение трех основных вариантов адаптации сайта
Для наглядности занесем все, что можно сравнить, в таблицу:
Адаптивный дизайн
Десктопная и мобильная версия остаются доступными по одному URL с одним HTML-кодом, сайт подстраивается под размер экрана любых устройств. Не возникает ошибок при определении агента пользователя и перенаправлении, потому что таких запросов просто нет. К тому же Google рекомендует использовать именно адаптивный дизайн для оптимизации ресурса. Однако в преимуществах адаптива кроются и его недостатки. Поскольку HTML одинаковый, нельзя точечно изменить контент для смартфонов и планшетов. Трудно добиться высокой скорости загрузки: «лишние» элементы скрыты от пользователя, но все равно время загрузки из-за них увеличивается.
Динамический показ
При динамическом обновлении URL остается одинаковым для разных устройств. Чтобы реализовать динамическое изменение сайта, не нужно настраивать переадресацию, а HTML и CSS можно изменить или упростить для мобильных, что повышает скорость загрузки. Однако при динамическом показе необходимо настраивать HTTP-запрос Vary для определения агента пользователя, а это создает дополнительную нагрузку на сервер. К тому же нужно создать варианты кода для разных устройств, сложно учесть непопулярные диагонали экранов, поэтому определение агента может работать с ошибками.
Разные URL
Хорошо поддаются оптимизации по скорости загрузки, снижают нагрузку на сервер, а страницы можно сделать удобными для пользователей с мобильными устройствами. К тому же есть возможность выбрать версию отображения. Поскольку это отдельный мобильный сайт, как правило, поддомен, то HTML, стили, URL одних структурных страниц будут разными. Необходимо настраивать HTTP- или JS-перенаправление пользователей с десктопов на мобильный сайт и наоборот. Помимо настройки перенаправлений, нужно связать десктопную и мобильную версию специальными атрибутами. Могут быть проблемы с дублированием контента.
Каким бы беспристрастным ни пытался казаться Google, официальная позиция по мобильным сайтам, как о способе оптимизации, четкая:
4. AMP
Accelerated Mobile Pages — технология Google для создания ускоренных мобильных страниц сайта. Рекомендуется внедрение AMP в первую очередь для информационных и новостных ресурсов, блогов. Обычная AMP открывается меньше чем за секунду, поэтому UX ускоренных страниц успешнее, чем на обычных. Это достигается за счет полного отказа от пользовательского JS. Не поддерживаются некоторые HTML-теги, страницы реализуются по одному шаблону, отсутствуют формы, виджеты. Чтобы автоматизировать настройку AMP, можно использовать специальные плагины для популярных CMS.
На AMP-страницах нет возможности реализовать важные функциональные элементы: навигационное меню, внутренний поиск, блоки перелинковки, виджеты социальных сетей, дополнительная перелинковка в футере.
«Яндекс» не поддерживает AMP и не уважает атрибут rel="canonical", поэтому иногда ускоренные страницы оказываются в выдаче «Яндекса». Их можно закрыть от индексации для робота ПС в robots.txt — с помощью метатега robots или с помощью HTTP-заголовка X-Robots Tag.
5. Яндекс.Турбо
Турбо-страницы — технология «Яндекса» для создания быстрых страниц даже при плохом интернет-соединении. Высокая скорость загрузки достигается за счет шаблонизированного создания страниц, отсутствия пользовательского JS. Сделать страницы похожими на основной сайт можно с помощью юзерского CSS. Создать Турбо можно в панели «Вебмастера» двумя способами: с RSS-каналом или YML-фидом. Турбо можно делать для информационных ресурсов и для интернет-магазинов. Турборезультаты в выдаче «Яндекса» помечаются специальным значком в виде ракеты.
В «Яндекс.Турбо» можно реализовать внутренний поиск (с переходом на десктопную версию), минимальную перелинковку для интернет-магазина, покупку в один клик и с корзиной.
Главное отличие «Яндекс.Турбо» от AMP заключается в том, что турбостраницы располагаются на домене «Яндекса», соответственно, ПС получает трафик, а бизнес — только возможность получить трафик на обычной версии.
Стоит внедрить ускоренные страницы «Яндекса» и Google, особенно для ситуативного и информационного контента. Однако не думайте, что Турбо и AMP заменят адаптивные и динамические сайты. По крайней мере, пока ограничено внедрение пользовательского функционала.
PWA
Если у вас уже есть оптимизированная версия сайта, то можно воспользоваться дополнительной возможностью. В мобильную выдачу с прогрессивным веб-приложением не попасть, но зато можно угодить пользователю.
PWA — технология Google, которая сообщает сайту функциональность мобильного приложения. Прогрессивные веб-приложения — дополнительный способ оптимизации ресурса. Рекомендуется использовать их для оптимизации скорости и для доступа с мобильных устройств при плохом интернет-соединении.
При корректной настройке, когда пользователь заходит на сайт, ему предлагается добавить этот ресурс на главный экран. Если пользователь согласится, то на главном экране смартфона или планшета появится иконка сайта. Это кешированная версия ресурса с высокой скоростью загрузки даже при условии отсутствия интернет-соединения, завернутая в оболочку приложения.
PWA реализуется в рамках TLS — безопасного протокола соединения, поэтому по умолчанию любое прогрессивное веб-приложение является безопасным.
Из дополнительных плюсов: у вас появляется возможность отправлять push-уведомления пользователю, установившему сайт-приложение.
Клевые уроки по PWA и Service Worker: https://classroom.udacity.com/courses/ud811
Как проверить оптимизацию сайта под мобильные устройства
Проверить, оптимизирован ли сайт для смартфонов и планшетов, можно с помощью популярных официальных инструментов Google и Яндекс.
1. PageSpeed Insights
PageSpeed Insights — инструмент Google для проверки скорости загрузки страницы. Если мы говорим про оптимизацию, ускорение загрузки сайта и его версий — первая стратегическая задача. Из PageSpeed можно вытащить информацию об изображениях, которые нужно оптимизировать, о минификации CSS и JS, загрузке текста без веб-шрифтов. Рекомендации PageSpeed Insights хороши, однако не всегда объективны.
Например, современные форматы изображений до сих пор не поддерживаются некоторыми популярными браузерами. Поэтому не стоит тратить время, карьеру, жизнь ради выполнения каждой рекомендации. Наверняка у вас есть более важные сеошные дела, чем набрать 100 баллов.
2. Google Mobile Friendly Test
Это инструмент, который заточен на проверку юзабилити мобильных страниц. Требуется только выбрать URL, вставить его в строку, далее следовать рекомендациям. Если вы увидели зеленое объявление: «Страница оптимизирована для мобильных устройств», не торопитесь радостно закрывать вкладку. Обратите внимание на подсказку: «Проблемы при загрузке страницы».
Там будет информация о ресурсах, которые Googlebot не смог загрузить. Обратите внимание на стили и скрипты, которые заблокированы для робота Google, по возможности откройте их для сканирования.
3. Яндекс.Вебмастер. Проверка мобильных страниц
Простой инструмент в «Яндекс.Вебмастере» с понятным отчетом. Дополнительно напоминает про отсутствие или наличие турбостраницы для проверяемого URL.
Отображаемые проблемы: наличие viewport, Flash-элементов, Java-апплетов, Silverlight-плагинов, Турбо-версии; горизонтальная прокрутка контента, величина шрифта.
1. Google Search Console. Удобство для мобильных
Отчет в Google Search Console по удобству использования мобильных сайтов показывает ошибки и количество страниц в поиске без ошибок.
Отображаемые проблемы: величина шрифта, расстояние между интерактивными элементами, наличие viewport, горизонтальная прокрутка контента.
Небольшой чек-лист по проверке мобильной версии
Соблюдая простые правила из чек-листа, можно добиться не только высоких позиций в мобильной выдаче, но и пользовательской любви.
- Высокая скорость загрузки на 2G, 3G.
- Настроен протокол HTTP/2. Проверка: http2.pro.
- Открыты для сканирования CSS и JS. Проверить можно в Google Mobile Friendly Test.
- Интуитивно понятная навигация.
- Шрифт не менее 12 px.
- Кликабельные элементы не перекрывают друг друга. Проверить можно в Google Lighthouse.
- Расстояние между интерактивными элементами не менее 48px. Проверить можно в Google Lighthouse.
- Все ссылки кликабельны.
- Для интернет-магазинов есть возможность покупки в один клик.
- Номера телефонов кликабельные.
- Есть иконки мессенджеров с переходом в этот мессенджер.
- Pop-up и всплывающие окна не занимают весь экран смартфона или планшета, их удобно закрывать.
- Текст занимает меньше одного экрана прокрутки.
- В полях форм используется автозаполнение input type. Кстати, иногда достаточно только номера телефона, остальное узнает у клиента и заполнит ваш менеджер. Если недостаточно, то ввод телефона — первое поле в форме.
- Уменьшен вес видео, аудио, изображений. Не тратим байты пользователя.
- Внедрены фавиконки для разных браузеров и устройств.
Автор: Граевская Лилия, SEO Group Head,
Агентство RACURS
Благодарю за труд. Взял на заметку👌
>На AMP-страницах нет возможности реализовать важные функциональные элементы: навигационное меню, внутренний поиск, блоки перелинковки, виджеты социальных сетей, дополнительная перелинковка в футере.
Вы не упомянули, что предоставляется набор готовых библиотек, позволяющий закрыть большинство базовых потребностей. Так же есть возможность использовать iframe для тех моментов где это критично, но на мой взгляд страницу нужно оставлять максимально легкой, а по необходимости - переводить пользователя на обычную страницу.
Конечно, в рамках amp предоставляется набор готовых контейнеров, и даже amp-iframe https://amp.dev/ru/documentation/components/amp-iframe/. Но есть ограничения и отличия от iframe на обычной странице сайта.
Я говорю про пользовательские js, неподдерживаемые html-теги и тд. С навигацией погорячилась, прошу прощения, ее можно реализовать с помощью amp-sidebar.
Один из самых простых способов ускорить адаптивный дизайн - отключить часть свистелок для загрузки на мобильных версиях (например, слайдера) - технически очень просто, в том числе на большинстве бесплатных cms.
Девушка, извините, не было целью вас обидеть. Вы просто проверьте ваше понимание заголовка Vary, в одном единственном месте - документе-стандарте, в котором описывается работа протокола HTTP, а потом заново посмотрите на ту статью в Google-справке - тему Vary. В Google for Developers - да, действительно отличная статья, но которая дополняет (а не заменяет) то, что описывается в документе-стандарте, по части - Vary.
У вас очень запутанные формулировки, например:
"сервер обращается к агенту пользователя через HTTP-запрос Vary"
1. Сервер здесь никуда не обращается. Сервер отдаёт (в HTTP-ответе).
2. HTTP-запрос Vary? Может имелось ввиду - HTTP-заголовок Vary? Если это так, то Vary относится к группе заголовков HTTP-ответа, а не HTTP-запроса.
***
"Vary сообщает серверу и браузеру о необходимости учесть агент пользователя"
1. Что вы имели ввиду под "сообщает серверу" ("браузеру" ладно, пока опустим)? Vary итак создаётся на сервере и покидает его. Vary с сервера - сообщает серверу?
***
Вот, что я имел ввиду, в своём первом комментарии - очень всё неочевидно и запутанно, по теме Vary.
Смотрите только первоисточник, сравнивая с ним - все остальные.
Помните, для кого-то вы будете гуру - после прочтения данной статьи. На вас будут ссылаться и цитировать. Держите марку!
>В мобильную выдачу с прогрессивным веб-приложением не попасть
Пожалуйста, поясните, что Вы имели ввиду
PWA - это история про быстрый доступ к сайту с рабочего стола смартфона или планшета, когда пользователь осознанно добвил это приложение к себе на экран. То есть из SERP не перейти на страницу PWA.
Это не про ранжирование в мобильной выдаче, поэтому не пронумерован пункт как оптимизация сайта для мобильных устройств. К тому же, чтобы использовать PWA, оптимизированная мобильная версия уже должна быть. Настройка прогрессивного веб-приложения не улучшает мобильные страницы сайта, а позволяет получить быстрый доступ к ним за счет кеширования.