Digital Transformation
First Contentful Paint (FCP)
FCP adalah metrik performa web yang mengukur waktu sejak halaman mulai dimuat sampai elemen visual pertama muncul di layar pengguna.
TL;DR: First Contentful Paint (FCP) adalah waktu sejak halaman mulai dimuat sampai elemen pertama yang berisi konten (teks, gambar, atau SVG) tampil di layar. Skor baik di bawah 1,8 detik. FCP bukan termasuk Core Web Vitals, tapi tetap menjadi sinyal pengalaman pengguna yang dipantau Google.
Apa itu First Contentful Paint?
First Contentful Paint mengukur seberapa cepat browser menampilkan elemen konten pertama setelah pengguna meminta sebuah halaman. Elemen yang dihitung adalah teks, gambar, kanvas non-kosong, atau SVG. Background warna polos belum dianggap konten. FCP berbeda dari Largest Contentful Paint yang mengukur konten utama, dan beda juga dari Time to Interactive yang mengukur kapan halaman bisa dipakai.
Analogi sederhana: FCP adalah saat layar berhenti putih dan mulai memunculkan sesuatu yang bisa dibaca atau dilihat pengguna.
Threshold dan Cara Kerja
| Skor | Rentang FCP |
|---|---|
| Baik | Di bawah 1,8 detik |
| Perlu perbaikan | 1,8 sampai 3,0 detik |
| Buruk | Di atas 3,0 detik |
Faktor yang memperlambat FCP umumnya: server response lambat (lihat Time to First Byte), render-blocking JavaScript dan CSS, font yang tidak di-preload, serta asset critical yang berat. Optimasi yang lazim: kompresi gambar, code splitting, font display swap, dan inline critical CSS.
Kenapa Penting?
FCP adalah kesan pertama. Studi industri menyebutkan bayangan kasar bahwa setiap detik tambahan di FCP berkorelasi dengan peningkatan bounce rate. Untuk pasar Indonesia dengan distribusi koneksi 4G yang fluktuatif, FCP yang baik di mobile menjadi pembeda antara pengguna yang bertahan dan yang menutup tab.
FCP juga bagian dari laporan Page Speed Insights dan PageSpeed milik Google, serta dipakai sebagai sinyal diagnostik sebelum tim engineering fokus ke metrik Core Web Vitals seperti LCP.
Pertanyaan Umum
Apa beda FCP dan LCP?
FCP mengukur konten pertama apa pun yang muncul, sementara LCP mengukur elemen konten terbesar di area viewport. Halaman dengan FCP cepat tapi LCP lambat biasanya menunjukkan elemen utama (hero image, heading) lambat dimuat.
Apakah FCP termasuk Core Web Vitals?
Tidak. Core Web Vitals saat ini terdiri dari LCP, INP, dan CLS. FCP tetap dipantau sebagai sinyal pengalaman pendukung.
Tools apa untuk mengukur FCP?
PageSpeed Insights, Lighthouse, Chrome DevTools, dan Web Vitals Chrome Extension. Untuk data lapangan, gunakan Real User Monitoring.
Istilah Terkait