Analisis Performa Frontend Dan Evaluasi Dampak Penerapan Teknik Optimasi Pada Hino Integrated Logistic System Berbasis Devextreme jQuery Di PT HMMI

Aisa Selvira, Dinar Nugroho Pratomo, S.Kom., M.IM., M.Cs.

2026 | Tugas Akhir | D4 Teknologi Perangkat Lunak

Hino Integrated Logistic System merupakan sistem berbasis web yang dikembangkan PT HMMI untuk mendukung pencatatan dan pelacakan pergerakan returnable package mulai dari pengiriman laut, pelabuhan, external warehouse, hingga internal warehouse. Pada penelitian ini, frontend sistem dibangun menggunakan template dan standar pengembangan yang digunakan di PT HMMI, kemudian digunakan sebagai kondisi awal (baseline) sebelum dilakukan analisis performa. Analisis dilakukan menggunakan metrik First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT), Cumulative Layout Shift (CLS), Speed Index (SI), dan Performance Score sebagai indikator karakteristik Performance Efficiency berdasarkan ISO/IEC 25010, yang diukur menggunakan Google Lighthouse sebagai instrumen pengujian. Hasil analisis pada kondisi baseline menunjukkan performa frontend masih rendah akibat besarnya ukuran resource JavaScript DevExtreme, konfigurasi yang belum optimal, serta belum diterapkannya strategi kompresi dan caching aset statis. Berdasarkan temuan tersebut, dilakukan penerapan teknik optimasi yang meliputi custom bundle configuration DevExtreme, minifikasi JavaScript dan CSS, response compression menggunakan Brotli dan Gzip, cache-control header, konfigurasi internal komponen, reserve space, strategi font loading, optimasi gambar WebP, dan optimasi animasi antarmuka. Evaluasi setelah optimasi menunjukkan Performance Score meningkat pada seluruh halaman, dengan peningkatan terbesar mencapai 173,4% pada halaman Realtime Stock History, sehingga seluruh halaman mencapai kategori Good. Rata-rata FCP turun dari 7,54 menjadi 0,54 detik, LCP dari 7,99 menjadi 0,61 detik, dan SI dari 7,54 menjadi 1,22 detik, sementara TBT dan CLS mengalami penurunan. Penelitian ini menghasilkan rekomendasi optimasi frontend yang dapat diterapkan pada aplikasi web berbasis DevExtreme jQuery untuk meningkatkan efisiensi pemuatan halaman, responsivitas interaksi pengguna, kestabilan tampilan, serta stabilitas visual sistem keseluruhan.

Hino Integrated Logistics System is a web-based system developed by PT HMMI to support the recording and tracking of returnable package movements from sea shipment, port, external warehouse, to internal warehouse. In this study, the system's frontend was built using PT HMMI's development templates and standards, then used as an initial baseline prior to performance analysis. The analysis used the metrics First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT), Cumulative Layout Shift (CLS), Speed Index (SI), and Performance Score as indicators of Performance Efficiency based on ISO/IEC 25010, measured using Google Lighthouse as the testing instrument. The baseline analysis showed that frontend performance was still low due to large DevExtreme JavaScript resource sizes, suboptimal configuration, and the absence of compression and caching strategies. Based on these findings, optimization techniques were applied, including DevExtreme custom bundle configuration, JavaScript and CSS minification, response compression using Brotli and Gzip, Cache-Control headers, internal component configuration, reserved space, font loading strategy, WebP image optimization, and interface animation optimization. The evaluation after optimization showed that the Performance Score improved on all pages, with the largest increase reaching 173.4% on the Realtime Stock History page, bringing all pages into the Good category. The average FCP decreased from 7.54 to 0.54 seconds, LCP from 7.99 to 0.61 seconds, and SI from 7.54 to 1.22 seconds, while TBT and CLS also decreased. This study produces frontend optimization recommendations applicable to DevExtreme jQuery-based web applications to improve page loading efficiency and overall system visual stability.

Kata Kunci : DevExtreme, Google Lighthouse, jQuery, Optimasi Web, Performa Frontend