Здравствуйте. Нужно ли выносить мобильную версию сайта на поддомен типа m.site.ru? Что посоветуете?
Олег
Здравствуйте, Олег. Все зависит от конкретного сайта, от перспектив его дальнейшего развития и объемов финансовых вложений. Мобильная версия — это только один из вариантов. Вы можете адаптировать сайт для корректного отображения на планшетах и смартфонах разными способами:
1. Отдельной версией на поддомене.
2. С помощью адаптивной верстки.
3. И динамического показа — RESS.
У каждого из способов есть свои плюсы и минусы в реализации, поддержке, особенностях продвижения и разработке.
| Способы | Плюсы | Минусы |
|---|---|---|
| Мобильная версия | Cкорость загрузки, экономия батареи и ресурсов устройства | Двойные затраты на разработку, поддержку, оптимизацию и продвижение |
| Адаптив | Не требует больших затрат при разработке, поддержке и в поисковой оптимизации | Грузится дольше |
| Динамический показ | Скорость загрузки выше выше мобильной версии | Дорого разрабатывать и поддерживать |
| Мобильная версия | |
|---|---|
| Плюсы | Минусы |
| Cкорость загрузки, экономия батареи и ресурсов устройства | Двойные затраты на разработку, поддержку, оптимизацию и продвижение |
| Адаптив | |
| Плюсы | Минусы |
| Не требует больших затрат при разработке, поддержке и в поисковой оптимизации | Грузится дольше |
| Динамический показ | |
| Плюсы | Минусы |
| Скорость загрузки выше выше мобильной версии | Дорого разрабатывать и поддерживать |
Когда мобильный интернет был медленный и дорогой, сайты использовали отдельный поддомен для мобильных устройств. Сейчас чаще используется адаптивная верстка — интернет в последние годы стал быстрым, а устройства пользователей мощнее. Адаптив проще реализовать, особенно на этапе разработки сайта с нуля.
Что выбрать
Адаптивная верстка. Для интернет-магазинов, сайтов услуг, сайтов-визиток, информационных порталов адаптивная верстка будет оптимальным решением — проще применять методы оптимизации загрузки контента и скриптов.
Решение о внедрении адаптива должно исходить из задач пользователей — нужны ли им полные функции сайта или только ограниченные:
ориентируйтесь на ситуацию: ваш пользователь будет сидеть в кафе с бесплатным wi-fi или посреди леса вызывать эвакуатор с GPRS на мобильном;
подумайте над целью посещения сайта пользователем: почитать статьи, заказать такси, узнать расписание занятий или проверить посылку по треку.
Также обратите внимание на реализацию конкурентов: возможно, стоит дополнительно внедрить amp, турбо-страницы или сделать отдельное мобильное приложение. Но эти способы полностью не заменят сайт, пригодный для мобильных устройств.
Реализация отдельной мобильной версии на поддомене оправдано, если:
основная версия сайта содержит много лишних библиотек JS и CSS-стилей, которые сильно замедляют скорость и плавность работы;
пользователи приходят на сайт, используя мобильный интернет — есть ограничения по скорости загрузки и объему трафика;
для посетителя актуальны только некоторые функции полной версии сайта: например, фильтры товаров без галереи и интерактива, завязанного на скроллинге;
либо функции, которые реализуются только на мобильных версиях: например, поддержка жестов.
Для мобильной версии необходимы собственный robots.txt и
Обратите внимание, чтобы контент мобильной и десктопной версий был максимально схож между собой по содержанию и по объему. Сервер должен обязательно возвращать облегченную версию HTML с минимальным количеством узлов и вложенности блоков, чтобы не нагружать рендер браузера.
Но отслеживание технического состояния, индексации страниц, поведения пользователей, проверку позиций и эффективности продвижения необходимо производить для обеих версий.
Несколько слов о RESS. Аббревиатура расшифровывается как Responsive Design & Server Side. Подход комбинирует методы разработки серверной части и адаптивного дизайна, что улучшает взаимодействие с каждым типом пользовательского устройства. Для ПК, планшетов, смартфонов сервер будет возвращать разный HTML и CSS.
Сравнивая RESS и мобильную версию сайта на отдельном поддомене, выделим следующие пункты:
Сайты, использующие RESS, дороже в разработке и поддержке, при этом требуют высокой квалификации разработчиков. Точность определения типа устройства, где базируется принцип подхода RESS, высока, но не 100%.
По сравнению с RESS сайты с мобильной версией на отдельном поддомене проще в разработке и поддержке. Посетитель всегда может переключиться на десктопную версию.
Техническая реализация мобильной версии
Если вы все-таки решили сделать мобильную версию основного сайта, учтите ряд технических требований:
Реализуйте редирект в зависимости от User Agent пользовательского устройства на мобильную версию.
Свяжите между собой страницы мобильной и десктопной версий с помощью атрибутов rel="alternate" и rel="canonical".
Настройте сохранение передачи UTM-меток при автоматическом редиректе с одной версии на другую: они должны корректно и в полной мере передавать информацию с одного поддомена на другой.
В контенте используйте относительные ссылки.
Правильно настройте редиректы между страницами: пользователи с мобильных устройств должны попадать на мобильную версию целевой страницы, а не на главную мобильной версии.
Реализуйте на стороне сервера передачу разных версий HTML-разметки для мобильной и десктопной версий.
Настройте разные варианты сборки и объединения статических ресурсов (JS и CSS) для каждой версии сайта. В большинстве современных сайтов для экономии количества одновременных запросов все ресурсы объединяются и минифицируются с помощью специальных сборщиков: webpack, gulp и др.
Реализуйте подгрузку изображений нужного размера для каждой версии сайта либо использовать HTML-элемент <picture> с набором вариантов изображений под разную ширину экрана устройства пользователя.
