Perbandingan Kecepatan Performa Website E-Commerce antara Bootstrap dan Tailwind CSS Menggunakan Lighthouse untuk Optimasi

Abstrak

Performa website merupakan hal penting dalam pengembangan e-commerce karena langsung memengaruhi pengalaman pengguna, kecepatan akses dan efektivitas opstimasi mesin pencari. Bootstrap dan Tailwind CSS adalah dua framework CSS yang sering digunakan, tetapi keduanya ciri-ciri berbeda dalam hal fleksibilitas desain dan stabilitas performa. Penelitian ini bertujuan membandingkan performa website e-commerce yang menggunakan dua framework CSS dan Bootstrap dengan alat audit yaitu Google Lighthouse. Metode yang digunakan dalam penelitian ini adalah metode kuantitatif berupa perbandingan eksperimental dengan menguji dua website, yaitu Zalora.co.id yang telah terbukti menggunakan Bootstrap dan Blibli.com sebagai contoh penggunaan dari framework Tailwind CSS. Uji coba dilakukan dalam tiga waktu yang berbeda yaitu pagi, siang, dan sore dengan mengukur empat metrik utama, yaitu Performance, Accessibility, Best Practice, dan SEO. Hasil penelitian menunjukkan bahwa Bootstrap memiliki performance yang lebih stabil dengan peningkatan skor performance dari 37 menjadi 57 serta nilai SEO yang konsisten pada angka 92. Sementara itu, Tailwind CSS menunjukkan keunggulan pada metrik aksesibilitas dengan skor mencapai 96, tetapi mengalami penurunan yang signifikan pada matriks performa dan SEO di siang hari. Berdasarkan hasil tersebut, Bootstrap lebih cocok untuk e-commerce yang memprioritaskan stabilitas performa, sedangkan Tailwind CSS lebih di rekomendasikan untuk pengembangan antarmukan yang membutuhkan aksesibilitas yang tinggi. Penelitian ini diharapkan dapat menjadi referensi untuk pengembang web dalam memilih framework CSS yang sesuai dengan kebutuhan proyek.