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

Вы хотите знать, как эффективно протестировать мобильную версию вашего сайта? И какие инструменты лучшие для мобильного тестирования сайта? Итак, эта статья для вас.

Почему вы должны заботиться о оптимизации своего мобильного сайта

В конце 2016 года более 3,2 миллиарда человек имели доступ к Интернету, и около 2 миллиардов из них использовали для этого мобильные устройства. Согласно аналитическим прогнозам, в ближайшие 5 лет число людей, которые используют только мобильные устройства для интернет-активности, будет ежегодно увеличиваться на 25 процентов.

Поэтому очень важно проверить, поддерживает ли ваш сайт мобильный контент.

Прежде чем приступать к тестированию мобильной версии вашего сайта, попробуйте ответить на некоторые распространенные вопросы:

  • Как быстро загружается сайт?
  • Является ли контент привлекательным?
  • Привлекает ли сайт внимание к основным моментам вашего бизнеса?
  • Предлагает ли сайт хорошие решения?
  • Является ли сайт легким и понятным для навигации?
  • Вызывает ли целевая страница интерес к другим страницам вашего сайта?

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

Даже если вы ответили «Да» на все вопросы, вы должны обратить внимание на следующие факторы оптимизации производительности мобильных устройств:

Скорость загрузки всегда связана с задержкой в сети, объемом памяти, процессором и размером кеша. Все они намного меньше по сравнению с компьютерными, поэтому для загрузки требуется больше времени.

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

Реагирующая платформа помогает ускорить прототипирование мобильных функций и макетов.

Быстрое время загрузки дает вам серьезное конкурентное преимущество. На время загрузки влияют следующие действия:

  • Сокращение зависимостей
  • Уменьшить обработку на стороне клиента
  • Уменьшить размер изображения
  • Уменьшить содержание
  • Избегайте перенаправления m-точек
  • Подберите правильное решение для хостинга
  • Ограничить HTTP-запросы
  • Активировать сжатие

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

Тестирование соединения между компьютерной и мобильной версией сайта

Тестирование перенаправления:

  • Мобильные посетители должны быть перенаправлены на мобильную версию сайта
  • Компьютерные посетители должны быть перенаправлены на компьютерную версию сайта
  • Переадресация дает посетителям доступ к конкретной странице, в которой они нуждаются, а не к главной странице
  • Мобильные посетители должны легко найти вариант просмотра компьютерной версии сайта.

Проверка заголовка Vary-HTTP. Если ваши сайты динамически обслуживаются, вы должны настроить заголовок Vary-HTTP, чтобы сообщить Google и браузерам, что пользовательский агент отличается от HTML.

Проверка тегов rel = alternate / canonical. Если на ваших сайтах есть отдельный URL-адрес, рабочие страницы должны быть настроены с помощью тега rel = «alternate», указывающего на мобильную версию этой страницы. Мобильные страницы должны быть настроены с помощью тега rel = "canonical", указывающего на компьютерную версию этой страницы.

Тестирование технических проблем

Карта мобильного XML:

  • Все мобильные страницы должны быть отправлены в Google через XML-карту сайта в Инструментах Google для веб-мастеров
  • Мобильные страницы должны быть отделены от компьютерных страниц

Скорость сайта для мобильных устройств. У мобильных пользователей, вероятно, будет ограниченное время на ваше приложение, и поэтому нужно чтобы оно быстро загружалось. Google page speed toolWebPagetest - полезные инструменты для измерения скорости сайта.

Хранение и данные:

  • Убедитесь, что программный код недоступен
  • Пользователь не очищает кеш, поэтому убедитесь, что ничего не сломается.

User Experience (UX) тестирование

Просмотр веб-сайта:

Смартфоны: iPhone (iOS), Samsung Galaxy (Android), Nexus (другой Android) и Windows Phone (Windows).

Планшеты: iPad (iOS), Samsung Galaxy Tab в разных размерах (Android), Kindle Fire (Amazon) и Asus Transformer Book (Windows).

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

Размер ссылок. Поля между ссылками должны быть не менее 28x28 пикселей. Таким образом, чтобы на ни можно было легко щелкнуть пальцем.

Flash. Большинство мобильных браузеров не могут отображать Flash-контент. Поэтому, если вы хотите, чтобы ваш сайт был мобильным, не используйте Flash.

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

Всплывающие окна. Существует две причины не использовать всплывающие окна в мобильной версии вашего сайта:

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

Розположение елементов. Самые важные элементы должны быть наверху. Размещение других элементов должно иметь смысл.

Навигация. Обеспечьте доступ всех страниц мобильного сайта посетителями.

Контент

  • Для каждой настольной страницы должна быть эквивалентная мобильная страница
  • Количество мобильных страниц может быть больше, чем страниц компьютерной версии, потому этому часто проще перемещаться по мобильным сайтам.
  • Убедитесь, что в вашем сайте нет лексических и грамматических ошибок.
  • Если ваш сайт предназначен не только для местных посетителей, вы должны провести тестирование локализации, чтобы проверить соответствующие языковые и культурные аспекты для определенного региона.
  • Ненужные изображения следует удалить.

Видео

  • Убедитесь, что видео загружены и запущены правильно.
  • Используйте видеопроигрыватель HTML5, потому что его легко обрабатывать и облегчать.

Страница результатов поисковой системы, SERP:

Убедитесь, что ваш мобильный URL-адрес удобен для пользователя и содержит ключевое слово

Google отключает мобильные мета-описания примерно на 120 символов, поэтому он не должен превышать этот предел.

Хотя Google дает вам примерно 70 символов (512 пикселей) в заголовке вашей страницы, ширина экрана заставляет разбивать заголовок страницы на две строки. Вот почему вы должны убедиться, что каждое название страницы выглядит хорошо на двух строках.

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

10 советов по оптимизации мобильной версии вашего сайта

Подведя итог, вот 10 советов, которые помогут вам проверить, доступна ли мобильная версия вашего сайта для посетителей:

  • Обеспечьте совместимость с функциями смартфонов и планшетов
  • Проверьте нормальное время загрузки
  • Сделайте навигацию по сайту максимально простой
  • Убедитесь, что кнопки достаточно велики для людей с большими пальцами
  • Нет больших блоков текста. Используйте маркеры и короткие предложения.
  • Не используйте Flash.
  • Не используйте всплывающие окна.
  • Убедитесь, что изображения имеют оптимальный размер.
  • Проверьте, чтоб ваш номер телефона находился на расстоянии одного клика от набора номера
  • Убедитесь, что веб-сайт может получить доступ к вашему местоположению через GPS

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

Тестирование на реальных устройствах

В идеальном мире каждый сайт должен быть протестирован на каждом популярном мобильном устройстве, на котором он может быть просмотрен. Конечно, тестирование на реальных устройствах имеет множество преимуществ:

  • Тестирование обеспечивается в реальной среде с очень реальными условиями
  • Тестирование осуществляется на реальной ОС с помощью настроек производителя
  • Реальная производительность устройства проще по сравнению с другими виртуальными опциями
  • Легкость тестирования совместимости
  • Легкая репликация ошибок
  • Разрешение экрана и яркость можно легко протестировать в нескольких сценариях
  • Разрешается тестировать такие функции, как push-уведомление, геолокация и ориентация, подключение Wi-Fi
  • Функционирование в условиях входящих прерываний, таких как SMS и звонки, может быть проверено
  • Функционирование в условиях низкого заряда батареи может быть проверено

К сожалению, мир, в котором мы живем, не идеален. Вот некоторые недостатки тестирования на реальных устройствах:

  • Существует множество мобильных устройств
  • Тестирование на реальных устройствах является дорогостоящим и трудоемким
  • Даже если у вас есть широкий спектр мобильных устройств в вашей компании, сотрудники, находящиеся в других офисах или работающие удаленно, не будут иметь доступа ко всем устройствам
  • Обслуживание устройства также требует затрат

Онлайн-тестирование мобильных устройств на реальных устройствах

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

Keynote Mobile Testing (former Keynote DeviceAnywhere)

keynote logo

Keynote Mobile Testing - облачное решение, имеющее полную библиотеку реальных мобильных устройств.

Конечно, это гораздо больше, чем просто инструмент для тестирования мобильных страниц. Но если мы рассмотрим Keynote Mobile Testing как инструмент такого рода, следует упомянуть следующие достоинства:

  • Реальные сети мобильной связи и Wi-Fi
  • День поддержки для новых устройств
  • Он автоматически генерирует список устройств на основе критериев охвата: память, процессор, производители, версия ОС, оператор и т. Д.
  • Подробная база данных функций устройства и операционной системы
  • Простой в использовании мастер, который поможет вам быстро определить, какие устройства приоритетны для разработки и тестирования.

Некоторые недостатки Keynote Mobile Testing:

  • Keynote Mobile Testing не проверяет работоспособность устройства
  • Поддержка резервирования устройств отсутствует

BrowserStack

browser stack logo

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

Вот некоторые особенности BrowserStack:

  • Широкий спектр iOS и Android: версии iOS с iOS 3 до iOS 10, Android - от Donut (1,6) до Nougat (7.1)
  • Быстрые проверки с помощью скриншотов
  • Веб-аналитика для вашего сайта
  • Отлаживайте свои мобильные сайты с помощью инструментов разработчика Chrome на iOS и Android.
  • Доступ к дополнительным устройствам по географическим параметрам
  • Природные жесты и взаимодействия
  • Опция тестирования безопасности

Некоторые слабые стороны BrowserStack:

  • Кажется, что производительность сервера ухудшается с течением времени, когда многие пользователи тестируют
  • BrowserStack имеет тенденцию быть довольно дорогим, и бесплатный вариант очень ограничен.
  • Способ имитации 2-х пальцевого нажатися и выхода на телефоны и планшеты

Perfecto Mobile Continuous Quality Lab

Perfecto logo

Perfecto Mobile Continuous Quality Lab - еще одна облачная платформа, в которой есть не только опция проверки мобильных страниц. В контексте тестирования мобильной версии вашего сайта должны быть определены следующие преимущества:

  • Тестирование в режиме реального времени на более чем 500 различных устройствах
  • Для тестирования доступны не только Android и iOS, но и платформы WinPhone, Symbian и Blackberry
  • Совместное использование устройств
  • Одновременное тестирование автоматизации на нескольких устройствах
  • Поддержка скриншотов

Некоторые из недостатков Perfecto Mobile Continuous Quality:

  • Нечеткое (часто нечитаемое) изображение
  • Длительное время отклика
  • Использование бесплатной пробной версии ограничено 60 минутами.

Тестирование с помощью мобильных эмуляторов

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

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

Люди часто путают «эмулятор» и «симулятор». Хотя оба они звучат почти одинаково, между ними все еще есть разница.

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

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

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

Рассмотрим некоторые часто используемые эмуляторы

MobileMoxie

mobile moxie logo

MobileMoxie Emulator является неотъемлемой частью MobileMoxie Marketing Toolset, которая помогает вам предоставлять клиентам отличные мобильные решения. Он очень простой в использовании. Просто введите URL-адрес веб-сайта в соответствующее поле.

mobile moxie

Windows Phone Emulator

windows phone logo

Эмулятор Windows Phone - это специальная мобильная среда, где вы можете тестировать, просматривать и отлаживать приложения для Windows Phone и использовать браузер для проверки веб-сайтов.

Некоторые достоинства эмулятора Windows Phone:

  • Полномасштабный SDK с эмулятором устройства
  • Множественные разрешения экрана
  • Инструмент скриншотов
  • Моделирование акселерометра

Ограничения эмулятора Windows Phone:

  • Он работает только с Windows.
  • Уровень яркости эмулятора всегда «Высокий»,
  • Камера и видео используются с ограничениями

Android Studio emulator

android studio logo

Эмулятор Android Studio позволяет создавать виртуальное мобильное устройство для запуска приложений Android и тестировать мобильные сайты. Эмулятор находится внутри пакета Android SDK.

Преимущества эмулятора Android Studio:

  • Он работает на Windows, Mac OS X, Linux
  • Эмулятор Android Studio может передавать информацию быстрее, чем при использовании подключенного аппаратного устройства
  • Унифицированная среда, в которой могут использоваться все устройства Android

Некоторые недостатки эмулятора Android Studio:

  • Если вам просто нужен браузер для проверки мобильных веб-сайтов, вы должны загрузить много ненужных вещей
  • Некоторые технические ограничения: рекомендуется 8 ГБ оперативной памяти; Рекомендуется 4 ГБ свободного места на диске.

Opera Mobile Emulator 

opera logo

Opera Mobile Emulator - это живая демонстрация браузера мобильного телефона Opera, которая функционирует так же, как при установке на телефон. Также доступны дополнительные инструменты для отладки, такие как сочетания клавиш, селектор профилей и различные флаги командной строки.

Основные достоинства Opera Mobile Emulator:

  • Он прост в установке и прост в использовании. Вам не нужно устанавливать какие-либо сложные SDK или что-то в этом роде.
  • Доступны три режима ввода: сенсорный, клавиатурный и планшетный.
  • Он поставляется с предварительно сконфигурированным набором профилей телефона и планшета
  • Все режимы могут быть активированы и контролироваться ссылками и элементами управления
  • Удаленная отладка с помощью реальных устройств

Некоторые слабые места Opera Mobile Emulator:

  • Вы можете проверить, как страницы выглядят только в браузере Opera.
  • Меньше поддержки медиа

Инструменты для проверки работы сайта в мобильных устройствах

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

Как правило, все эти инструменты просты в использовании. Все, что вам нужно сделать, просто введите URL-адрес вашей страницы в соответствующую форму.

Google's Mobile-Friendly Test

google developers logo

Google Mobile-Friendly Test - это инструмент, который показывает, если Google считает вашу мобильную страницу мобильной или нет. Если ваш сайт проходит тест, вы увидите зеленое сообщение с надписью «Awesome! Эта страница мобильная ». Если это не пройдет, сообщение будет красным и скажет «Не для мобильных устройств».

В этом случае страница будет перенесена в результаты мобильного поиска в пользу похожих страниц с других мобильных сайтов.

mobiReady

mobiReady logo

MobiReady позволяет оценивать мобильную готовность вашего сайта с использованием передовых методов и стандартов. В бесплатном отчете представлены как оценка (от 1 до 5), так и углубленный анализ страниц, чтобы определить, насколько хорошо ваш сайт работает на мобильном устройстве.

Основными достоинствами mobiReady являются:

  • Подробные отчеты об ошибках
  • Тестирование на сайте
  • Инструмент визуализации, чтобы увидеть, как выглядит ваш сайт на экране мобильного телефона.
  • Тесты W3C mobileOK
  • Он советует улучшить мобильную готовность вашего сайта

W3C mobileOK checker service

w3c logo

W3C mobileOK checker - бесплатный сервис W3C (всемирный консорциум для веб-стандартов), который помогает проверить уровень мобильности веб-документов и, в частности, утверждать, является ли веб-документ «мобильным».

Тесты определены в спецификации mobileOK Basic Tests 1.0.Только если веб-возраст пройдет все тесты, он получит статус «mobileOK».

Другие варианты, которые могут быть проверены:

Varvy

varvy logo

Varvy - это набор бесплатных инструментов для тестирования SEO, скорости и мобильных функций веб-сайта.

Основные возможности Varvy:

  • Тест соответствия рекомендациям Google
  • Оптимизация скорости страницы
  • Широкий спектр советов и рекомендаций по оптимизации производительности веб-страницы

Тест скорости веб-сайта

Как уже упоминалось выше, скорость загрузки и работы вашего сайта напрямую влияет на количество посетителей.

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

Вот некоторые инструменты, которые помогут вам это сделать.

Google’s Page Speed Online

google page speeed test logo

Google Speed Speed Online - это комплексный инструмент, который позволяет не только проверять производительность, но и дает вам много информации. Наряду с этим он также поставляется с докладом о лучших методах, которые вы можете использовать для мобильных устройств, чтобы оптимизировать их производительность.

Pingdom

pingdom logo

Pingdom позволяет вам определить, что быстро, медленно, слишком велико, и лучшие методы, которыми вы не следуете. Все тесты выполняются с помощью реальных веб-браузеров, поэтому результаты соответствуют опыту конечного пользователя. Тесты сохраняются, поэтому вы можете отслеживать свою производительность с течением времени.

GTmetrix

GTmetrix logo

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

Load Impact

load impact logo

Load Impact позволяет запускать крупномасштабные тесты нагрузки с 1,2 миллионами одновременно работающих пользователей. Он одновременно создает нагрузку до 10 разных местоположений и даже добавляет больше мест по запросу. Load Impact имитирует трафик точно так, как это произойдет в реальной жизни.

Dotcom-Monitor

dotcom-monitor logo

Тест скорости Dotcom-Monitor позволяет пользователю выбирать, с какого браузера они хотят протестировать: Chrome, Firefox, Internet Explorer и мобильные браузеры, включая iPhone, iPad и т. Д. У вас есть возможность протестировать ваш сайт из 20 мест по всему миру. По завершении теста пользователи могут перейти к отчетам об эффективности и анализу диаграмм водопада.

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