Блог a1qa

О тестировании и качестве ПО

Производительность client-side: почему пользователи уходят с сайта

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

Когда пользователь перемещается по сайту, его не волнует возможная нагрузка на сервер и время ответа. Единственное, что для него важно с точки зрения производительности, ­– это то, как быстро забронировать билеты, прочитать статью или положить в корзину долгожданные товары.

Даже с безупречно настроенным и оптимизированным сервером клиентская часть приложения – ключ к улучшению CX (customer experience). Лучший способ найти этот ключ ­– выполнить тестирование client-side и устранить найденные проблемы.

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

Что важно знать о тестировании client-side

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

Согласно исследованию Google (www.thinkwithgoogle.com), если время загрузки страницы составляет 1-3 секунды, вероятность отказов (пользователь покидает первую страницу без дальнейшего взаимодействия) увеличивается на 32%, тогда как время загрузки страницы в 10 секунд увеличивает вероятность отказов на 123%.

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

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

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

Объектом тестирования выступает основная функциональность сайтов – главная страница, профиль пользователя и поиск рейсов.

Тестовое окружение

Основные показатели, которые необходимо учитывать:

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

Результаты теста

Метрики были собраны с помощью инструмента Lighthouse. Графики для большей визуальной информации со значениями представлены ниже:

Главная страница

Профиль пользователя

Поиск рейсов

Если посмотреть на результаты испытаний и оценки, то рейтинг приложений будет следующим:

  1. Turkish Airlines.
  2. British Airways.
  3. KLM.
  4. Ryanair.
  5. Air France.

Однако даже лидер в этом рейтинге – веб-сайт турецких авиалиний – становится полностью интерактивным более чем через 5 секунд. Загрузка страниц других авиакомпаний занимает до 20 секунд. Подобное приложение не справится с высокой конкуренцией на рынке.

Как улучшить производительность client-side

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

Давайте рассмотрим самые распространенные проблемы в производительности клиентской части приложения:

  • Неиспользуемый CSS.
  • Блокировка рендеринга ресурсов.
  • Отсутствие сжатия и форматирования изображений.

Время выполнения кода JavaScript (JS) также влияет на корректную работу сайта. Чтобы уменьшить этот параметр, можно рассмотреть следующие шаги:

  • Минимизация использования JS.
  • Сжатие JS-кода.
  • Удаление неиспользуемой части кода.
  • Кеширование.

Если на проекте нет неиспользуемых ресурсов, изображения и код JS сжаты, а порядок рендеринга элементов определен правильно, время загрузки страницы может значительно уменьшиться. Это улучшит CX и повысит вероятность того, что пользователь останется с вами.

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

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

Однако тестирование client-side не является универсальным средством улучшения производительности. Время ответа сервера также имеет значение: если веб-страница готова к быстрому рендерингу, но не получает никаких данных, для пользователя сайт будет загружаться медленно.

Если вы сталкиваетесь с низкой скоростью ответов от сервера, взгляните на возможные решения:

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

Послесловие

Тестирование client-side – один из ключей к успешному CX. С увеличением количества элементов на страницах и большим количеством конкурентов на рынке важно, чтобы веб-сайт быстро загружался и был интерактивным.

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

Закажите бесплатную консультацию у профессионалов a1qa, чтобы узнать, как мы можем увеличить производительность вашего программного продукта.

Поделиться статьей: