Yasno

Yasno є першопрохідцем в українському енергетичному секторі, виступаючи в якості постачальника електроенергії, газу та рішень з енергоефективності для більш ніж 3,5 мільйонів клієнтів. Як важливий гравець у цій галузі, Yasno пропонує ефективний вибір тарифів на електроенергію та газ, адаптованих до унікальних потреб домогосподарств та бізнесу. Прагнучи покращити клієнтський досвід та продуктивність веб-сайту під час пікових навантажень, Yasno довірила нам розробку та вдосконалення свого корпоративного веб-сайту. Співпраця розпочалася у 2019 році і продовжилася у 2020 році з подальшим оновленням сайту влітку 2023 року, зосередившись на створенні бездоганно функціональної, але водночас візуально привабливої онлайн-платформи.

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

Вирішення цих завдань вимагало розумного планування та далекоглядного підходу, щоб сайт Yasno не лише відповідав галузевим стандартам, а й перевершував їх.

У цьому розділі розглянемо інноваційні рішення, застосовані нашою командою для вирішення кожної окремої проблеми, що сприяли цифровій трансформації Yasno.

Технологічне оновлення та рефакторинг
Перейшовши на останні версії Vue.js, TypeScript, PHP, Laravel та Kubernetes, ми забезпечили використання найсучасніших технологій на сайті Yasno, що підвищило його функціональність та масштабованість у майбутньому.

Розщеплення моноліту та впровадження SSR
Для покращення користувацького досвіду та SEO-оптимізації ми впровадили серверний рендеринг (SSR), одночасно розділивши монолітну структуру. Цей стратегічний крок дозволив створити більш гнучкий та адаптивний користувацький інтерфейс, значно покращивши загальну продуктивність веб-сайту та його видимість у пошукових системах.

Доопрацювання бекенду та оптимізація ресурсів
Ми також вирішили проблему вдосконалення бекенду та оптимізації черги, розбивши архітектуру бекенду з моноліту на окремі сервіси. Така модуляризація підвищила ефективність процесів, забезпечивши безперебійний зв'язок між різними компонентами і, зрештою, оптимізувавши продуктивність і використання ресурсів.

Оптимізація інфраструктури за допомогою Terraform
Використовуючи парадигму "Інфраструктура як код" (Infrastructure as a Code) з Terraform, наша команда провела оптимізацію інфраструктури. Це включало реструктуризацію та автоматизацію процесів розгортання, що призвело до підвищення відмовостійкості та загальної ефективності інфраструктури.

Відновлення кластеру Kubernetes
Ми провели комплексний аналіз і перебудували кластер, зосередившись на оптимізації балансування, масштабування та споживання ресурсів, забезпечивши відмовостійке та ефективне середовище Kubernetes для веб-сайту.

Підвищення продуктивності API
Щоб підвищити продуктивність API, наша команда розробників впровадила оптимізацію, яка призвела до десятикратного покращення. Це включало в себе вдосконалення механізмів обміну даними між бекенд- і фронтенд-компонентами, що забезпечило швидку та ефективну передачу та обробку даних.

Обробка пікових обсягів трафіку
Щоб вирішити проблему обробки пікових обсягів трафіку під час критичних подій, ми впровадили систему автоматичного масштабування. Це передбачало конфігурацію декількох серверів і потужної бази даних з функцією автоматичного масштабування на основі безсерверної архітектури. Це забезпечило безперебійний доступ до ресурсів навіть під час найбільших навантажень.

Покращення дизайну
Відповідаючи на запит клієнта щодо створення високофункціонального та водночас візуально привабливого головного блоку сайту, наша команда розпочала ретельну роботу над дизайном. Мета полягала в тому, щоб безперешкодно інтегрувати банерну концепцію, що демонструє нові продукти та рекламу, зберігаючи при цьому загальну функціональність веб-сайту.

Після вивчення різних варіантів було знайдено гармонійне рішення - об'єднати всі елементи в єдиний макет. Цей підхід передбачав стратегічно розміщені кнопки, що відповідають за ключові дії, та невеликі банери, що забезпечують безперешкодну навігацію. Єдність внутрішніх сторінок була досягнута завдяки послідовній структурі кнопок та інформаційних панелей, що дозволило користувачам легко знаходити необхідну інформацію по всьому сайту.

Впровадження передових рішень дозволило впоратися зі значним сплеском відвідуваності веб-сайту під час критичних подій і витримати до 2 мільйонів користувачів на годину. Завдяки налаштуванню системи автоматичного масштабування з декількома серверами та впровадженню потужної безсерверної бази даних, проєкт успішно забезпечив безперебійний доступ до ресурсів навіть під час найбільших навантажень. Загальна продуктивність API зросла вдесятеро, перевершивши всі очікування. Ми продовжуємо нашу співпрацю дотепер і надаємо підтримку та обслуговування веб-сайту.