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

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

Что такое мобильная версия сайта и зачем она нужна#

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

Компания Akamai провела исследование и выяснила, что 64% покупателей, недовольных опытом использования сайта, в следующий раз пойдут за покупками в другое место

А ещё посетители могут даже не найти нужный продукт и кнопку «купить», если ресурс не оптимизирован. Избежать этого поможет чат для мобильного сайта, но всё равно, лучше заранее позаботиться об удобстве клиентов.

Давайте рассмотрим, как мобильная версия сайта выглядит с точки зрения её создания. Есть домен, он обычно выглядит так — site.ru. А мобильный сайт размещают на поддомене m.site.ru. Десктопная (компьютерная) и мобильная версии остаются доступными по одному URL с одним HTML-кодом, где URL — это адрес сайта — https://www.site.ru.\
Преимущества мобильного сайта:
— Его можно максимально облегчить и ускорить на уровне кода.

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

Недостатки:
— Отдельный поддомен m.site.ru, а значит не единый URL. Это две разные страницы, значит и поисковая система будет воспринимать их отдельно. А значит, нужно вкладывать больший бюджет в поисковую оптимизацию.

— Его довольно долго делать, так как это по сути ещё один сайт.

— Не адаптируется автоматически: либо основная версия для компьютера, либо мобильная — под гаджет.

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

Адаптивная версия сайта#

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

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

— Медленная загрузка. Сложные проекты с видеороликами, калькуляторами, анимированными меню и другими элементами будут долго загружаться.

— Нельзя переключаться между основной и мобильной версиями.

Выбор адаптива обычно обусловлен двумя основными плюсами: разработка только одной версии сайта и отсутствие проблем с несколькими URL-адресами. Контент сайта не дублируется, страницы не конкурируют и продвигаются сразу обе версии.

Динамическая версия сайта#

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

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

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

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

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

PageSpeed Insights#

PageSpeed Insights — это сервис Google, который помогает проверить скорость загрузки страницы. В PageSpeed можно увидеть информацию об изображениях, сжатии CSS и JS. 

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

Google Mobile Friendly Test#

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

Если появилось зелёное объявление: «Страница оптимизирована для мобильных устройств», это не значит, что всё действительно так. Внизу появится подсказка: «Проблемы при загрузке страницы». Там будет информация о том, что Googlebot не смог загрузить. Передайте эти подсказки вашему программисту.

Яндекс.Вебмастер. Проверка мобильных страниц#

Инструмент с понятным отчётом. Он дополнительно напоминает про отсутствие или наличие турбо-страницы для проверяемого URL.

Турбо-страница – это облегчённая версия обычной веб-страницы, созданная для мобильных устройств. Она намного меньше «весит», поэтому загружается быстро и экономит трафик. Ниже чуть подробнее поговорим про этот формат.

Google Search Console#

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

Какие ещё версии сайтов существуют #

Турбо-страницы в Яндекс#

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

Турбо-страницы создаются в панели Яндекс.Вебмастера. Их можно делать для информационных ресурсов и для интернет-магазинов. Турбо-результаты в результатах поиска Яндекса помечаются специальным значком в виде ракеты.

AMP-страницы в Google#

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

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

PWA#

Если у вас уже есть оптимизированная версия сайта, то можно использовать PWA. Это веб-приложение — новый способ оптимизации вашего ресурса. Оно помогает оптимизировать скорость загрузки для доступа с мобильных устройств при плохом интернете.

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

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

Вывод#

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

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