Digital Transformation
First Contentful Paint (FCP)
FCP adalah metrik yang mengukur waktu hingga elemen konten pertama, seperti teks atau gambar, muncul di layar pengguna setelah halaman mulai dimuat.
TL;DR: First Contentful Paint (FCP) adalah metrik performa web yang mencatat waktu hingga elemen konten pertama, seperti teks atau gambar, muncul di layar setelah halaman mulai dimuat. Target ideal FCP adalah di bawah 1,8 detik berdasarkan pedoman web.dev. FCP bukan bagian dari Core Web Vitals inti, tetapi sering dijadikan sinyal awal pengalaman pengguna.
Apa itu First Contentful Paint?
First Contentful Paint mencatat momen ketika browser pertama kali menggambar konten DOM apa pun di layar, baik berupa teks, gambar non-putih, SVG, maupun canvas. FCP berbeda dari Time to First Byte yang hanya mengukur respons server, dan berbeda dari LCP yang mengukur konten terbesar.
Analoginya sederhana. Bayangkan membuka pintu toko. FCP adalah momen Anda melihat tanda pertama di dalam toko, sedangkan LCP adalah momen Anda melihat etalase utama. Keduanya penting, tetapi FCP datang lebih dulu.
Cara Mengukur FCP
| Tools | Kelebihan | Keterbatasan |
|---|---|---|
| Lighthouse | Lab data, mudah diakses via Chrome DevTools | Kondisi lab, bukan pengalaman pengguna nyata |
| PageSpeed Insights | Kombinasi lab data dan field data CrUX | Update field data tidak real-time |
| Real User Monitoring (RUM) | Data dari pengguna asli di lapangan | Butuh instalasi script tracking |
Untuk evaluasi praktis, kombinasikan minimal dua tools: satu untuk lab data, satu untuk field data. Pendekatan ini sesuai dengan saran resmi dari dokumentasi web.dev tentang FCP.
Target dan Interpretasi
Pedoman target FCP yang umum dipakai:
- Baik: di bawah 1,8 detik
- Perlu perbaikan: 1,8 sampai 3,0 detik
- Buruk: di atas 3,0 detik
FCP yang buruk biasanya disebabkan tiga hal: respons server lambat, blocking render dari CSS atau JavaScript, atau ukuran resource yang terlalu besar. Optimasi yang umum dilakukan meliputi minifikasi CSS critical, defer script non-kritis, dan penggunaan CDN untuk asset statis.
Kenapa Penting?
Walaupun FCP tidak masuk Core Web Vitals inti, metrik ini sering jadi prediktor bounce rate. Pengguna yang menunggu lebih dari 3 detik untuk melihat konten pertama cenderung meninggalkan halaman. Untuk website bisnis Indonesia dengan kualitas jaringan yang bervariasi, FCP jadi acuan minimum yang wajib diperhatikan sebelum mengejar metrik lain seperti LCP atau INP.
Pertanyaan Umum
Apakah FCP sama dengan LCP?
Tidak. FCP mengukur konten pertama apa pun yang muncul, sementara LCP mengukur konten terbesar yang muncul di viewport.
Apakah FCP termasuk Core Web Vitals?
Tidak. FCP tergolong metrik pendukung yang dilaporkan Lighthouse, bukan bagian dari trio Core Web Vitals inti (LCP, INP, CLS).
Bagaimana cara cepat memperbaiki FCP buruk?
Tiga langkah awal yang efektif: optimasi respons server, eliminasi render-blocking resource, dan gunakan CDN untuk asset statis.
Istilah Terkait