Optimisasi Performance Website berbasis React

## Gambaran Proyek Kami mencari spesialis kinerja web freelance yang berpengalaman untuk mengoptimalkan Core Web website berbasis React kami, dengan fokus khusus pada LCP (Largest Contentful Paint), FCP (First Contentful Paint), dan TBT (Total Blocking Time). Proyek ini melibatkan pengerjaan dengan kode React yang sudah ada dan proses pembuatan konten statis ReactSnap untuk meningkatkan metrik-metrik ini secara signifikan. saat ini kami memiliki website yang perlu dioptimize untuk ditingkatkan parameter bagian "mobile performance" yang telah kami chek melalui [login to view URL] dimana dari hasil pemantauan terakhir terhadap kinerja website kami "PENILAIAN DEKSTOP" sudah sangat baik Namun untuk penilaian bagian Mobile dibagian " Perfoma " indikator diperlukan optimalisasi liat lampiran attachment kami * ## Ruang Lingkup Proyek 1. Melakukan analisis menyeluruh terhadap kinerja website saat ini, dengan fokus pada metrik Core Web Vitals. 2. Mengembangkan dan menerapkan strategi optimisasi untuk meningkatkan LCP, FCP, dan TBT. 3. Mengoptimalkan kode React dan proses pembuatan konten statis ReactSnap untuk kinerja yang lebih baik. 4. Memberikan dokumentasi dan informasi tentang perubahan yang diterapkan . ## Task Project Utama Halaman yang perlu dioptimalisasi : - meningkatkan performa Code bagian mobile hingga indikator minimal 80% - Halaman utama 1x halaman - Halaman Product memiliki 4x halaman - Halaman About us 2x (overview + about company) - Memberikan laporan rinci tentang peningkatan yang dilakukan dan dampaknya terhadap metrik Core Web Vitals. - Kode React dan konfigurasi ReactSnap yang dioptimalkan. - Menyerahkan dokumentasi tentang optimisasi yang diterapkan dan pedoman untuk mempertahankan kinerja dalam pengembangan masa depan. ## Keterampilan dan Pengalaman yang mungkin Dibutuhkan - Pengalaman terbukti dalam mengoptimalkan Core Web (LCP, FCP, TBT) untuk aplikasi React[1]. - Kemahiran yang kuat dalam React.js, JavaScript, HTML5, dan CSS3. - Pengalaman dengan teknik pembuatan situs statis, khususnya ReactSnap. - Keahlian dalam teknik optimisasi kinerja web seperti code splitting, lazy loading, dan prioritas sumber daya[2]. - Familiar dengan alat pemantauan kinerja seperti Lighthouse, WebPageTest, atau SpeedCurve[3]. - Pengetahuan tentang teknik optimisasi sisi server dan dampaknya terhadap Core Web CATATAN : Ini merupakan analisa kebutuhan yang dihasilkan dari output parameter [login to view URL] 1. Menganalisis kinerja website saat ini dan mengidentifikasi area untuk peningkatan dalam LCP, FCP, dan TBT. 2. Menerapkan optimisasi untuk Largest Contentful Paint (LCP) dengan meningkatkan waktu respons server, waktu pemuatan sumber daya, dan kinerja rendering sisi klien. 3. Meningkatkan First Contentful Paint (FCP) melalui prioritas sumber daya yang efisien dan meminimalkan sumber daya yang memblokir rendering. 4. Mengurangi Total Blocking Time (TBT) dengan mengoptimalkan eksekusi JavaScript, meminimalkan tugas panjang, dan meningkatkan interaktivitas secara keseluruhan. 5. Mengoptimalkan kode React, termasuk menerapkan teknik code splitting dan lazy loading yang efisien. 6. Menyempurnakan proses pembuatan konten statis ReactSnap untuk kinerja yang lebih baik. 7. Menerapkan strategi caching dan mengoptimalkan pengiriman aset (gambar, font, script). ## Alat yang Diperlukan - Akses ke kode React dan konfigurasi ReactSnap kami (staging gitlab) - Alat pemantauan kinerja (WebPageTest)