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

Спойлер: задачу помогли решить неочевидная метрика пользовательского ожидания и интерактивный график



Комфортное взаимодействие с облаком напрямую зависит от скорости работы облачных сервисов. Один из ключевых сервисов Yandex.Cloud — консоль, через которую пользователи решают задачи.

Скорость работы консоли влияет не только на наши бизнес-процессы, но и на бизнес-процессы заказчиков. Количество сервисов также важно для бизнеса. Поэтому Yandex.Cloud растет супербыстро: в 2020 году появились восемь новых сервисов. В какой-то момент платформа развивалась так интенсивно, что каждый месяц мы выпускали по сервису.

Скорость развития отразилась на скорости работы консоли. Она замедлилась, и мы стали получать негативный фидбек от пользователей. Надо было принимать меры. Начали с аналитики: собрали данные, запланировали задачи на улучшение. Это принесло результаты: за несколько месяцев консоль стала работать в два раза быстрее. Рассказываем в деталях, как мы этого достигли.

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


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

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

В основу графика легли две метрики:

• Время первого открытия консоли — Time To Interactive (TTI). В этом режиме, который условно назвали холодным, мы учитываем полную загрузку консоли со стилями и скриптами.
• Время перехода между страницами. В этом режиме учета — горячем — статика уже загружена. Учитывается только время ответа API и рендеринг.

Еще на старте мы собирали статистику обо всех API-запросах в Managed Service for ClickHouse. Сервис помогает разворачивать и поддерживать кластеры серверов столбцовой системы управлениями базами данных ClickHouse в инфраструктуре Yandex.Cloud. Для детализации мы добавили к данным запросов API информацию о странице, с которой происходят вызовы. Так мы стали вычислять, какие запросы пользователь ждет дольше всего на самых частотных страницах.

Разработчик Евгений Сорокин: «Сперва ввод метрики пользовательского ожидания был неочевидным. Казалось, что нужно концентрироваться на самых частотных запросах. Но практика показывала, что дело не в них: вызовов в Object Storage могло быть до 1к в секунду, но при этом сервис работал супербыстро».

Благодаря данным и метрикам мы локализовали проблемы в бэкенде и на фронтенде, сформировали список доработок на каждой стороне и отдали его ответственным командам.

Параллельный фикс
Что влияет на скорость работы консоли? Она складывается из множества параметров: размера статики, рендеринга компонентов. Наиболее чувствительна для пользователя скорость работы API.

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

Что сделали на фронтенде

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

Что сделали на бэкенде

• Оптимизировали логику запросов для открытия консоли.
• Ускорили критичные для открытия консоли методы API.
• Вынесли часть запросов с сервера на клиент, чтобы не блокировать первое открытие консоли.

Как устроен график: расследует и показывает
Данные графика коррелируют с синтетическими тестами, сделанными до и после оптимизации.



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

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

Если мы заметили замедление работы страницы или сервиса, то можем проанализировать, какие методы API на это повлияли.

Распределение скорости запросов в API по времени:

стало


Роль пользователей
График строится на основе пользовательских метрик, которые мы собираем. Он отражает реальную скорость работы сервиса у конечных потребителей.

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

Сообщить об ошибке в работе консоли → console.cloud.yandex.ru/support/create-ticket
Предложить идею → cloud.yandex.ru/features