Как улучшить мобильную версию сайта
Хотите улучшить мобильный сайт, но не знаете, с чего начать? На этот случай мы подготовили несколько советов. Многие из них подкреплены примерами из практики и исследованиями. Некоторые рекомендации сопровождаются видео. В них рассказывается, как интерпретировать данные из Google Analytics и Инструментов для веб-мастеров, чтобы определить, какие аспекты надо улучшить.
Предварительные условия
- Необходимо установить сервис для оценки статистики веб-сайтов (например, Google Analytics).
- В Инструментах для веб-мастеров нужно подтвердить право на сайт(ы) для обычных компьютеров и мобильных устройств (т. е. если у обычной и мобильной версии сайта разные URL, необходимо подтвердить право собственности на обе версии).
Шаг 1. Сделайте мобильный сайт по-настоящему удобным
Уберите дополнительные окна в версиях для всех мобильных устройств. | Рекомендации Google, полезная статья
- Не используйте всплывающие окна JavaScript, которые трудно закрывать.
- Удалите все плавающие объявления, особенно рекламу приложений. Вместо этого используйте смарт-баннеры приложений в стиле iOS 6, боковую навигацию, рассылки по электронной почте и другие маркетинговые инструменты.
- Не приглашайте пользователей поучаствовать в опросе до того, как они решат свои задачи.
Оптимизируйте сайт для разных устройств.
- Откажитесь от функций, требующих использования плагинов или инструментов воспроизведения видео, которые могут отсутствовать на устройстве пользователя. Например, проигрыватель Adobe Flash Player отсутствует в iPhone, а также в Android 4.1 и более поздних версиях. | Пример из практики
- Показывайте пользователям планшетов версию сайта для настольных компьютеров или – ещё лучше – оптимизированную специально для этих устройств. | Исследование
- Предоставьте пользователям мобильных телефонов возможность переключиться на версию для ПК. Выбор пользователя должен применяться на протяжении всей сессии: не заставляйте посетителей переключаться на версию для ПК после загрузки каждой страницы. | Исследование
Облегчайте часто посещаемые мобильные страницы и делайте их удобнее.
Как быстро выявить неудобные мобильные страницы с высоким трафиком при помощи данных Google Analytics о показателе отказов и событиях, а также найти решение наиболее распространенных проблем (презентация)
- Определите страницы, на которых пользователи выполняют нежелательные для вас или необъяснимые действия:
- Проверьте популярные мобильные страницы на наличие аномально высокого показателя отказов.
- Найдите мобильные страницы с большим количеством переходов на версию для ПК. Это означает, что пользователю не хватает функциональности мобильной версии сайта. Можно использовать данные Google Analytics: разделы Поведение или События.
- Что следует изменить:
- Увеличить скорость загрузки страниц. Узнайте, как измерить и улучшить этот показатель.
- Повысить удобство использования:
- Проверьте взаимодействие с выбранной страницей на различных типах мобильных устройств (с которыми работают ваши пользователи), чтобы выявить возможные неполадки.
- Посещения с мобильных устройств можно имитировать посредством инструментов разработчика Chrome.
- Изменить контент, чтобы он лучше отвечал потребностям пользователей.
Ускорьте загрузку страниц и продолжайте работать в этом направлении, если ваши показатели неудовлетворительны. |Пример из практики
Как быстро принять меры по ускорению загрузки мобильного сайта и сравнить его с сайтами конкурентов (презентация)- Выявите популярные страницы с низкой эффективностью при помощи инструмента Google Analytics Скорость загрузки страниц сайта.
- Устраните проблемы, которые легко решить. Рекомендации по ним помечены красным восклицательным знаком:
- Оптимизируйте изображения (уменьшите или сожмите), так как на них приходится почти 65% данных в мобильном Интернете. | Информация
- Сравните скорость отображения и загрузки популярных страниц своего сайта с показателями аналогичных страниц вашего конкурента. Подумайте о том, что можно сделать для повышения скорости.
Если у вас есть версия сайта, оптимизированная для мобильных устройств, не забудьте ее протестировать.
- Проверьте правильность переадресации, изучив раздел Ошибки сканирования в Инструментах для веб-мастеров. Обратите внимание на ошибки типа Неправильная переадресация.
- Для переадресации на мобильных устройствах используйте ответ 302, а не 301.
- Убедитесь, что страница для обычных компьютеров перенаправляет посетителей на свой аналог в мобильной версии, а не на главную или несуществующую страницу. | Пример из практики
- Избавьтесь от цепочек переадресации:
- Сразу направляйте пользователя на нужную ему страницу.
- Убедитесь, что пользователь смартфона сразу попадет с адреса для ПК на версию для мобильных устройств:
- Плохо:
http://example.com/page.html
, переадресация 302 наhttp://www.example.com/page.html
, затем переадресация 302 наhttp://m.example.com/page.html
. - Гораздо лучше:
http://example.com/page.html
, переадресация 302 сразу наhttp://m.example.com/page.html
с кешированием контента.
- Плохо:
- Рассмотрите возможность перехода на адаптивный веб-дизайн. Изучите наше руководство по созданию сайтов для пользователей различных устройств. Оно поможет вам принять правильное решение.
Шаг 2. Помогите посетителям получить то, за чем они пришли
Оптимизируйте свой сайт для сканирования и индексации, а также сделайте его удобнее для пользователей, которые приходят из поисковых систем. Пример из практики
- Разрешите индексацию ресурсов (CSS, JavaScript и т. д.) в robots.txt.
- В зависимости от вашей ситуации применяйте эти способы оптимизации мобильного сайта для поисковых систем:
- Адаптивный дизайн: включите запросы CSS
@media
. - Отдельная мобильная версия сайта: добавьте атрибуты
rel=alternate media
иrel=canonical
, а также HTTP-заголовокVary: User-Agent
, чтобы в результатах поиска Google сразу отображался URL для смартфонов. - Динамический показ: добавьте HTTP-заголовок
Vary: User-Agent
.
- Адаптивный дизайн: включите запросы CSS
Узнайте, как ведут себя мобильные пользователи на вашем сайте, и помогите им быстрее добиваться желаемого результата.
Как адаптировать свой сайт к распространенным сценариям поведения мобильных пользователей, основываясь на данных из Инструментов Google для веб-мастеров и Google Analytics (презентация)- Получите представление о намерениях мобильных пользователей, посещающих ваш сайт:
- Определите пути переходов при помощи отчета Google Analytics Поток посетителей.
- Просмотрите популярные поисковые запросы на сайте.
- Изучите в Инструментах для веб-мастеров поисковые запросы, по которым к вам приходят мобильные пользователи.
- Проведите исследование о пользователях, устройте опрос.
- Уточните мобильные показатели:
- Измеряйте мобильные показатели и используйте микроконверсии на основе типичных ситуаций.
- Облегчите посетителям работу с сайтом:
- Смоделируйте часто выполняемые действия на наиболее распространенных устройствах и составьте схему каждого шага до завершения цели. Это необходимо для выявления потенциальных проблем.
- Следуйте рекомендациям по удобству использования, например применяйте шрифт легкочитаемого размера.
- Упростите взаимодействие в типичных ситуациях, снизив количество кликов или прокручиваний страницы, необходимых для выполнения задачи.
Шаг 3. Превращайте клиентов в сторонников
Разрешите поисковому роботу Google индексировать контент в вашем приложении. Подробнее об этой возможности и ее реализации...
Исследуйте и попытайтесь отследить поведение пользователей на различных устройствах. | Пример из практики
- Изучите действия одного и того же пользователя на разных платформах, особенно на пути к конверсии.
- Проанализируйте операции "Добавить в корзину" или "Добавить в список покупок" новых и повторных посетителей с различных устройств.
Подумайте, что может быть интересно и полезно пользователям
- Создайте приложение для пользователей мобильных устройств, например для посетителей вашего магазина или торгового центра. | Пример из практики
- Задействуйте датчик GPS, камеру и акселерометр смартфона.
- Увеличивайте степень социальной вовлеченности пользователей. | Пример из практики
- Задействуйте жесты: листание, нажатия, встряхивание. Они уже стали привычными и упрощают работу.
Если не указано иное, содержание этой страницы доступно по лицензии Creative Commons Attribution 3.0, а примеры кода – по лицензии Apache 2.0. Подробную информацию можно найти в правилах сайта.
Last updated Апрель 16, 2014.