Pengembangan dan Optimalisasi Dashboard Kinerja Keuangan Berbasis Web

Abstract

Dashboard keuangan berbasis Power BI embed pada perusahaan penyedia layanan internet satelit memiliki skor performa Google Lighthouse sebesar 29, dengan Largest Contentful Paint (LCP) 2,96 detik dan Total Blocking Time (TBT) 443 ms, yang tergolong buruk menurut standar Core Web Vitals. Penelitian ini bertujuan untuk mengembangkan dashboard kinerja keuangan berbasis web menggunakan React JS, Go, dan Recharts, serta membandingkan performanya dengan sistem Power BI embed secara kuantitatif. Metode yang digunakan adalah Personal Extreme Programming dengan dua iterasi, masing-masing mencakup tahapan requirements, planning, iteration initialization, design, implementation, system testing, dan retrospective. Optimasi dilakukan melalui code splitting, tree shaking, minification, dan API caching. Hasil pengujian menunjukkan skor performa meningkat 232% dari 29 menjadi 96,3, LCP membaik dari 2,96 detik menjadi 0,96 detik, dan TBT dari 443 ms menjadi 113 ms. Tingkat penerimaan pengguna mencapai 97,8%. Temuan ini membuktikan bahwa arsitektur native React JS dan Go secara signifikan mengungguli solusi embed pihak ketiga untuk dashboard keuangan yang membutuhkan responsivitas tinggi.

A financial dashboard based on Power BI embed at a satellite internet service company recorded a Google Lighthouse score of 29, with LCP of 2.96 seconds and TBT of 443 ms, categorized as poor under Core Web Vitals standards. This study aims to developed a web-based financial dashboard using React JS, Go, and Recharts, comparing its performance against the existing system. Personal Extreme Programming was applied across two iterations covering requirements, planning, iteration initialization, design, implementation, system testing, and retrospective. Optimization techniques included code splitting, tree shaking, minification, and API caching. The performance score increased 232% from 29 to 96.3, LCP improved from 2.96 to 0.96 seconds, and TBT from 443 to 113 ms. User Acceptance Testing reached 97.8%. A native React JS and Go architecture significantly outperforms third-party embed solutions for high-responsiveness financial dashboards.