Чаще всего, когда речь идет о тестировании производительности, имеется в виду оптимизация на стороне сервера. Давайте представим, что сервер протестирован, все проблемы устранены и система может справиться с необходимой нагрузкой.
Когда пользователь перемещается по сайту, его не волнует возможная нагрузка на сервер и время ответа. Единственное, что для него важно с точки зрения производительности, – это то, как быстро забронировать билеты, прочитать статью или положить в корзину долгожданные товары.
Даже с безупречно настроенным и оптимизированным сервером клиентская часть приложения – ключ к улучшению CX (customer experience). Лучший способ найти этот ключ – выполнить тестирование client-side и устранить найденные проблемы.
На основе полученных результатов вы можете оптимизировать разметку страниц и ускорить время полной загрузки приложения. Предлагаем узнать подробности в нашей статье.
Что важно знать о тестировании client-side
Рассмотрим на примере. Почти все сталкивались с необходимостью поиска авиабилетов. На популярных направлениях часто случается так, что несколько авиакомпаний летят в одно и то же место. При большом выборе перевозчиков окончательное решение зависит также от скорости работы веб-сайта. Время загрузки страницы и время до полного взаимодействия с сайтом имеют решающее значение для CX.
Согласно исследованию Google (
www.thinkwithgoogle.com), если время загрузки страницы составляет 1-3 секунды, вероятность отказов (пользователь покидает первую страницу без дальнейшего взаимодействия) увеличивается на 32%, тогда как время загрузки страницы в 10 секунд увеличивает вероятность отказов на 123%.
Чтобы тестировать с точки зрения пользователя, нужно думать и вести себя как пользователь. Клиентов не волнует время ответа от сервера, они просто хотят, чтобы страница загружалась быстрее.
Даже если приложение поддерживает тысячи одновременно работающих пользователей и получает ответы от сервера менее чем за секунду, это не означает, что страница также быстро выдаст результаты.
Предлагаем разобрать процесс тестирования client-side пяти сайтов крупнейших европейских авиакомпаний: сравнить производительность со стороны конечного пользователя, измерить основные показатели и выявить узкие места приложений.
Объектом тестирования выступает основная функциональность сайтов – главная страница, профиль пользователя и поиск рейсов.
Тестовое окружение
Основные показатели, которые необходимо учитывать:
- Первое значимое отображение – это время, через которое загружается основное содержимое страницы.
- Индекс скорости – это среднее время, за которое страница отображает видимые части приложения.
- Время до полной интерактивности – это метрика, определяющая интерактивность страницы на основе текущего использования JS-скриптов и сетевых ресурсов.
Результаты теста
Метрики были собраны с помощью инструмента Lighthouse. Графики для большей визуальной информации со значениями представлены ниже:
- Главная страница
- Профиль пользователя
- Поиск рейсов
Если посмотреть на результаты испытаний и оценки, то рейтинг приложений будет следующим:
- Turkish Airlines.
- British Airways.
- KLM.
- Ryanair.
- Air France.
Однако даже лидер в этом рейтинге – веб-сайт турецких авиалиний – становится полностью интерактивным более чем через 5 секунд. Загрузка страниц других авиакомпаний занимает до 20 секунд. Подобное приложение не справится с высокой конкуренцией на рынке.
Как улучшить производительность client-side
Одного лишь запуска Lighthouse на веб-сайте и определения показателей скорости загрузки страниц, конечно, недостаточно. Необходимо также понять, как уменьшить время загрузки.
Давайте рассмотрим самые распространенные проблемы в производительности клиентской части приложения:
- Неиспользуемый CSS.
- Блокировка рендеринга ресурсов.
- Отсутствие сжатия и форматирования изображений.
Время выполнения кода JavaScript (JS) также влияет на корректную работу сайта. Чтобы уменьшить этот параметр, можно рассмотреть следующие шаги:
- Минимизация использования JS.
- Сжатие JS-кода.
- Удаление неиспользуемой части кода.
- Кеширование.
Если на проекте нет неиспользуемых ресурсов, изображения и код JS сжаты, а порядок рендеринга элементов определен правильно, время загрузки страницы может значительно уменьшиться. Это улучшит CX и повысит вероятность того, что пользователь останется с вами.
Тестирование клиентской стороны приложения имеет и другие плюсы:
- Может быть автоматизировано и использовано для тестирования только наиболее значимых страниц.
- Не требует отдельного тестового окружения.
- Может проводиться под нагрузкой или без нее.
- Не занимает много времени.
- Не требует специальных навыков и не потребляет много ресурсов.
Однако тестирование client-side не является универсальным средством улучшения производительности. Время ответа сервера также имеет значение: если веб-страница готова к быстрому рендерингу, но не получает никаких данных, для пользователя сайт будет загружаться медленно.
Если вы сталкиваетесь с низкой скоростью ответов от сервера, взгляните на возможные решения:
- Оптимизация логики серверного приложения. Если вы используете серверный фреймворк, он может содержать необходимые инструкции.
- Оптимизация запросов к базе данных. Рассмотрите также возможность перехода на более быструю базу данных.
- Обновление аппаратного обеспечения сервера. Увеличьте объем памяти или улучшите производительность процессора сервера, чтобы он обрабатывал запросы быстрее.
Послесловие
Тестирование client-side – один из ключей к успешному CX. С увеличением количества элементов на страницах и большим количеством конкурентов на рынке важно, чтобы веб-сайт быстро загружался и был интерактивным.
Однако такое тестирование не решит все ваши проблемы. Оно определяет узкие места в производительности клиентской стороны ПО, но работает лучше всего в сочетании с
тестированием производительности на стороне сервера.
Закажите
бесплатную консультацию у профессионалов «Точка качества», чтобы узнать, как мы можем увеличить производительность вашего программного продукта.
