ANALISIS KOMPARATIF EFISIENSI KODE DAN PERFORMA ANTARMUKA SHUTTERSPORT.ID MENGGUNAKAN TAILWIND CSS DAN BOOTSRAP

Rio Setiawan; An-Nisa Aina Nurwaida; Helmi Abdul Aziz

doi:10.30606/rjocs.v12i2.4826

Authors

Rio Setiawan Universitas Garut
An-Nisa Aina Nurwaida Universitas Garut
Helmi Abdul Aziz Universitas Garut

DOI:

https://doi.org/10.30606/rjocs.v12i2.4826

Keywords:

Bootstrap; Development Efficiency; Front-end; Tailwind CSS; Web Performance

Abstract

Modern web interface development requires a balance between development speed and the technical performance of digital assets. This study is motivated by the optimization challenges of Shuttersport.id, a visual asset management platform that requires a lightweight yet flexible front-end infrastructure. A technical debate exists regarding the efficiency of the component-based paradigm represented by Bootstrap and the utility-first paradigm represented by Tailwind CSS. This study aims to analyze the comparative development efficiency of the two frameworks based on file size (payload), code complexity (Lines of Code), and access performance measured using First Contentful Paint (FCP) and Largest Contentful Paint (LCP). A controlled experimental method was employed by developing two identical interface prototypes for the Shuttersport.id platform using the respective frameworks. Data were quantitatively measured using Google Lighthouse for performance evaluation and static analysis for code complexity assessment. The experimental results show that Tailwind CSS outperformed Bootstrap, reducing the payload size by up to 80.1% and decreasing code complexity by 33.1% through shifting a portion of the complexity into the markup. In terms of performance, Tailwind CSS reduced Largest Contentful Paint (LCP) by 31.7% and First Contentful Paint (FCP) by 6.7%. In conclusion, the utility-first paradigm proved to be considerably more efficient for an asset-intensive visual platform such as Shuttersport.id because it minimizes rendering overhead. The practical implication of this study recommends adopting Tailwind CSS in the production stage to maximize bandwidth allocation for primary image assets.

Downloads

Download data is not yet available.

References

R. Pratama et al., "Perbandingan Kecepatan Performa Website E-Commerce Antara Bootstrap dan Tailwind CSS Menggunakan Lighthouse Untuk Optimasi," in Seminar Nasional Teknologi Informasi, Mekatronika dan Ilmu Komputer, vol. 5, pp. 27–34, 2026. [Online]. Available: http://prosiding.sentimeter.nusaputra.ac.id/index.php/prosiding/article/view/101.

R. D. E. Putra, A. Lestari, and N. Kristianti, "Analisis Perbandingan CSS Framework Tailwind CSS dan Bootstrap dalam Pengembangan Landing Page Website POS Digitaliz," Journal of Information Technology and Computer Science, vol. 5, no. 1, pp. 63–75, 2025, doi: 10.47111/jointecoms.v5i1.

M. F. Santoso, "Perbandingan Efektivitas Bootstrap dan Tailwind CSS dalam Pengembangan UI Web Responsif," Jurnal Teknologi dan Sistem Informasi Bisnis, vol. 7, no. 4, pp. 489–497, 2025, doi: 10.47233/jteksis.v7i4.2260.

S. Azhariyah and M. Mukhlis, "Framework CSS: Tailwind CSS Untuk Front-End Website Store PT. XYZ," Jurnal Informatika, vol. 3, no. 1, pp. 30–36, 2023. [Online]. Available: https://jurnal.uniraya.ac.id/index.php/JI/article/view/1601/1130

B. Harahap, A. Rambe, M. R. Ramadhan, and N. Kurniawan, "Analisis Framework, Library Front-End Populer: Bootstrap, Tailwind CSS, React, dan Vue Pada Mata Kuliah Perancangan Web Design," Riau Jurnal Teknik Informatika, vol. 4, no. 2, pp. 329–334, 2025, doi: 10.30606/rjti.v4i2.3496.

Z. Abidin and M. Ridwan, "Systematic Literature Review: Metode Perancangan UI/UX Pada Toko Online," Jurnal Manajemen Informatika, Sistem Informasi dan Teknologi Komputer, vol. 3, no. 2, pp. 224–237, 2024, doi: 10.70247/jumistik.v3i2.101.

R. Adelard, R. Muthicahya, E. S. Wicaksono, L. Kenneth V., S. Narulita, and Sekarlangit, "Implementasi Metode Pengembangan Sistem Prototype pada Rancang Bangun Aplikasi Marketplace Lensa Buana," Jurnal Publikasi Sistem Informasi dan Telekomunikasi, vol. 3, no. 2, pp. 69–81, 2025, doi: 10.62951/bridge.v3i2.424.

Y. Anis, Purwatiningtyas, Retnowati, and E. A. N. Fajrina, "Penerapan Framework Bootstrap Dalam Sistem Informasi Rekam Medis Data Posyandu dengan Metode Waterfall," Jurnal Sistem Komputer dan Informatika, vol. 4, no. 2, pp. 310–318, 2022, doi: 10.30865/json.v4i2.4833.

D. Chandra and Hermansyah, "Transformasi Digital Kedai Kopi Sudut Kota Berbasis Website Dengan Javascript," Jurnal Rekayasa Sistem Informasi dan Teknologi, vol. 2, no. 2, pp. 729–743, 2024, doi: 10.70248/jrsit.v2i2.1438.

C. Christian and A. Voutama, "Implementasi Aplikasi Antrian Pencucian Mobil Berbasis Web Menggunakan PHP, Javascript, HTML, CSS, dan UML," Jurnal Mahasiswa Teknik Informatika, vol. 8, no. 2, pp. 2243–2248, 2024, doi: 10.36040/jati.v8i2.9460.

R. Y. Endra, Y. Aprilinda, Y. Y. Dharmawan, and W. Ramadhan, "Analisis Perbandingan Bahasa Pemrograman PHP Laravel dengan PHP Native pada Pengembangan Website," Jurnal Manajemen Sistem Informasi dan Teknologi, vol. 11, no. 1, pp. 48–55, 2022, doi: 10.36448/expert.v11i1.2012.

I. M. Faried and N. Lediwara, "Pengembangan Lanjutan Aplikasi Monitoring Logistik Simtelog Dengan Optimalisasi Visualisasi Data Gudang Dinas Informasi dan Pengolahan Data," Journal of Information System, Informatics and Computing, vol. 9, no. 2, pp. 397–417, 2025, doi: 10.52362/jisicom.v9i2.2190.

D. Fithriyaningrum, S. S. Kusumawardhani, and S. Wibirama, "Analisis Aksesibilitas Website berdasarkan Web Content Accessibility Guidelines (WCAG): Ulasan Literatur Sistematis," Jurnal Ilmu Pengetahuan dan Teknologi Komunikasi, vol. 23, no. 1, pp. 79–92, 2021, doi: 10.17933/iptekkom.23.1.2021.79-92.

T. Hidayatulloh and K. N. Isnaini, "Implementasi Metode Agile Extreme Programming Dalam Pengembangan Website Game Berbasis Javascript: Save Me," Jurnal Mahasiswa Teknik Informatika, vol. 8, no. 2, pp. 1404–1411, 2024, doi: 10.36040/jati.v8i2.8915.

S. Khasanah and T. Sutabri, "Faktor-Faktor Tampilan UI/UX yang Mempengaruhi Psikologis Manusia," Jurnal Sain dan Teknik, vol. 5, no. 2, pp. 28–33, 2023, doi: 10.37577/sainteks.v5i1.5.

M. F. Khoirurrizal, C. R. Hidayat, and R. Ruuhwan, "Analisis Perbandingan Framework Front-End Javascript SolidJS dan VueJS Pada Pengembangan Website Interaktif," Jurnal Informatika dan Teknik Elektro Terapan, vol. 12, no. 2, pp. 1026–1035, 2024, doi: 10.23960/jitet.v12i2.4106.

A. Mardiansyah et al., "Pengembangan Dasar HTML dan CSS: Langkah Pertama Dalam Pengembangan Web," Jurnal Pengabdian Kepada Masyarakat, vol. 2, no. 3, pp. 281–286, 2024. [Online]. Available: https://jurnalmahasiswa.com/index.php/appa/article/view/2024

M. B. Pramadipta, "Rancang Bangun Frontend Untuk Pemungutan Suara Dengan Menggunakan React.js," Jurnal Informatika dan Teknik Elektro Terapan, vol. 12, no. 4, pp. 1131–1140, 2024, doi: 10.23960/jitet.v12i4.4173.