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

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

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

Содержание для десктопов и мобильных устройств находится на разных страницах с разными URL. Обычно мобильный сайт размещают на поддомене m.site.ru.

• Если разработали мобильный сайт, не забудьте связать его страницы с десктопными специальными атрибутами. Для этого нужно на мобильных страницах настроить тег <link> с элементом rel="canonical", указывающим на страницу для компьютеров. А на десктопных страницах — с элементом rel="alternate", который укажет на соответствующую мобильную страницу. Каждой десктопной должна соответствовать только одна мобильная страница, а каждой мобильной — одна десктопная. Задать rel="alternate" можно также с помощью специальных атрибутов в Sitemap. Поисковики поддерживают такие теги в sitemap.xml:

• Настройте переадресацию. Необходимо настроить автоматическую переадресацию с помощью HTTP-запроса или JS. HTTP-запрос учитывает агент пользователя и перенаправляет посетителя на соответствующую версию сайта. В документации Google рекомендуется настроить 302-й ответ сервера для такого перенаправления. Перенаправление с помощью JS будет отнимать драгоценные секунды при загрузке страницы. Принцип работы скрипта: если минимальная ширина экрана устройства равна определенному значению в пикселях, то необходимо перенаправить пользователя на соответствующую страницу rel=”alternate”. Сначала браузер загрузит страницу, затем выполнит JS, а потом при необходимости перенаправит пользователя на подходящую версию.

URL и HTML-код страниц на разных устройствах одинаковые, меняется только CSS — размеры и расположение элементов на странице в зависимости от величины экрана устройства.

• Нужно разрешить Googlebot сканировать CSS, JS, изображения на страницах.

• При реализации адаптивной версии важно настроить тег meta name="viewport".

Метатег передает браузеру информацию о ширине экрана устройства. В соответствии с этими данными браузер строит модель CSSOM. Справка Google

По одному 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, официальная позиция по мобильным сайтам, как о способе оптимизации, четкая:

Accelerated Mobile Pages — технология Google для создания ускоренных мобильных страниц сайта. Рекомендуется внедрение AMP в первую очередь для информационных и новостных ресурсов, блогов. Обычная AMP открывается меньше чем за секунду, поэтому UX ускоренных страниц успешнее, чем на обычных. Это достигается за счет полного отказа от пользовательского JS. Не поддерживаются некоторые HTML-теги, страницы реализуются по одному шаблону, отсутствуют формы, виджеты. Чтобы автоматизировать настройку AMP, можно использовать специальные плагины для популярных CMS.

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

«Яндекс» не поддерживает AMP и не уважает атрибут rel="canonical", поэтому иногда ускоренные страницы оказываются в выдаче «Яндекса». Их можно закрыть от индексации для робота ПС в robots.txt — с помощью метатега robots или с помощью HTTP-заголовка X-Robots Tag.

Турбо-страницы — технология «Яндекса» для создания быстрых страниц даже при плохом интернет-соединении. Высокая скорость загрузки достигается за счет шаблонизированного создания страниц, отсутствия пользовательского JS. Сделать страницы похожими на основной сайт можно с помощью юзерского CSS. Создать Турбо можно в панели «Вебмастера» двумя способами: с RSS-каналом или YML-фидом. Турбо можно делать для информационных ресурсов и для интернет-магазинов. Турборезультаты в выдаче «Яндекса» помечаются специальным значком в виде ракеты.

В «Яндекс.Турбо» можно реализовать внутренний поиск (с переходом на десктопную версию), минимальную перелинковку для интернет-магазина, покупку в один клик и с корзиной.

Главное отличие «Яндекс.Турбо» от AMP заключается в том, что турбостраницы располагаются на домене «Яндекса», соответственно, ПС получает трафик, а бизнес — только возможность получить трафик на обычной версии.

Стоит внедрить ускоренные страницы «Яндекса» и Google, особенно для ситуативного и информационного контента. Однако не думайте, что Турбо и AMP заменят адаптивные и динамические сайты. По крайней мере, пока ограничено внедрение пользовательского функционала.

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

PWA — технология Google, которая сообщает сайту функциональность мобильного приложения. Прогрессивные веб-приложения — дополнительный способ оптимизации ресурса. Рекомендуется использовать их для оптимизации скорости и для доступа с мобильных устройств при плохом интернет-соединении.

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

PWA реализуется в рамках TLS — безопасного протокола соединения, поэтому по умолчанию любое прогрессивное веб-приложение является безопасным.

Из дополнительных плюсов: у вас появляется возможность отправлять push-уведомления пользователю, установившему сайт-приложение.

Клевые уроки по PWA и Service Worker: https://classroom.udacity.com/courses/ud811

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

PageSpeed Insights — инструмент Google для проверки скорости загрузки страницы. Если мы говорим про оптимизацию, ускорение загрузки сайта и его версий — первая стратегическая задача. Из PageSpeed можно вытащить информацию об изображениях, которые нужно оптимизировать, о минификации CSS и JS, загрузке текста без веб-шрифтов. Рекомендации PageSpeed Insights хороши, однако не всегда объективны.

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

Это инструмент, который заточен на проверку юзабилити мобильных страниц. Требуется только выбрать URL, вставить его в строку, далее следовать рекомендациям. Если вы увидели зеленое объявление: «Страница оптимизирована для мобильных устройств», не торопитесь радостно закрывать вкладку. Обратите внимание на подсказку: «Проблемы при загрузке страницы».

Там будет информация о ресурсах, которые Googlebot не смог загрузить. Обратите внимание на стили и скрипты, которые заблокированы для робота Google, по возможности откройте их для сканирования.

Простой инструмент в «Яндекс.Вебмастере» с понятным отчетом. Дополнительно напоминает про отсутствие или наличие турбостраницы для проверяемого URL.

Отображаемые проблемы: наличие viewport, Flash-элементов, Java-апплетов, Silverlight-плагинов, Турбо-версии; горизонтальная прокрутка контента, величина шрифта.

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

Отображаемые проблемы: величина шрифта, расстояние между интерактивными элементами, наличие viewport, горизонтальная прокрутка контента.

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

1. Высокая скорость загрузки на 2G, 3G.
2. Настроен протокол HTTP/2. Проверка: http2.pro.
3. Открыты для сканирования CSS и JS. Проверить можно в Google Mobile Friendly Test.
4. Интуитивно понятная навигация.
5. Шрифт не менее 12 px.
6. Кликабельные элементы не перекрывают друг друга. Проверить можно в Google Lighthouse.
7. Расстояние между интерактивными элементами не менее 48px. Проверить можно в Google Lighthouse.
8. Все ссылки кликабельны.
9. Для интернет-магазинов есть возможность покупки в один клик.
10. Номера телефонов кликабельные.
11. Есть иконки мессенджеров с переходом в этот мессенджер.
12. Pop-up и всплывающие окна не занимают весь экран смартфона или планшета, их удобно закрывать.
13. Текст занимает меньше одного экрана прокрутки.
14. В полях форм используется автозаполнение input type. Кстати, иногда достаточно только номера телефона, остальное узнает у клиента и заполнит ваш менеджер. Если недостаточно, то ввод телефона — первое поле в форме.
15. Уменьшен вес видео, аудио, изображений. Не тратим байты пользователя.
16. Внедрены фавиконки для разных браузеров и устройств.

Автор: Граевская Лилия, SEO Group Head,

Агентство RACURS