Analisa Client Side Rendering dengan menggunakan Teknik Optimasi Frontend pada Website Teman Bicara

Abstract

Teman Bicara merupakan perangkat lunak berbasis website yang dikembangkan menggunakan React library Javascript. Berdasarkan hasil observasi dan wawancara kepada pengembang/developer website “Teman Bicara”, ditemukan bahwa website tersebut memiliki permasalahan terkait kecepatan situs website dengan nilai First Contentful Paint (FCP) sebesar 6,8 detik dan First Meaningful Paint (FMP) sebesar 7,3 detik. Dengan ukuran DOM sebesar 139 elemen, diperlukan optimasi untuk meningkatkan kecepatan rendering. Penelitian ini menerapkan beberapa teknik optimasi, yaitu code splitting, tree shaking, minification, dan memindahkan kode third party ke bagian akhir dalam body section, untuk memaksimalkan kinerja kecepatan rendering website. Pada penelitian ini, peneliti menganalisis performa website “Teman Bicara”, sebelum dan sesudah menerapkan teknik optimasi dengan 3 metriks pengukuran yaitu First Contentful Paint (FCP), First Meaningful Paint (FMP), dan DOM Size. Analisis pada FCP dan FMP dilakukan dengan mengamati waktu client side rendering untuk setiap halaman website “Teman Bicara”. Analisis DOM Size dilakukan dengan menghitung jumlah elemen pada DOM Size website “Teman Bicara” untuk mengukur kompleksitas struktur halaman website “Teman Bicara”. Hasil implementasi teknik optimasi menunjukkan peningkatan performa yang lebih baik pada FCP dan FMP. FCP menunjukkan pengurangan waktu muat rata-rata dari 6,8 detik menjadi 0,7 detik. FMP menunjukkan pengurangan waktu muat rata-rata dari 7,3 detik menjadi 2,1 detik. DOM Size menunjukkan kenaikan jumlah elemen DOM sebesar 9 elemen, namun hal tersebut tidak mempengaruhi performa FCP dan FMP karena penambahan elemen disebabkan oleh pemindahan kode third party dari head section ke body section yang bertindak sebagai penghalang untuk proses parsing kode lebih lanjut. Sehingga browser akan memproses kode third party setelah konten halaman ditampilkan, yang mengatasi masalah dari render blocking terhadap waktu muat FCP dan FMP.