Digital Transformation
FCP (First Contentful Paint)
FCP adalah metrik web performance yang mengukur waktu browser menampilkan elemen konten pertama seperti teks, gambar, atau SVG ke layar pengguna.
TL;DR: First Contentful Paint (FCP) mengukur waktu browser mulai merender elemen konten pertama (teks, gambar, SVG) ke layar. Skor baik menurut Google adalah di bawah 1,8 detik. FCP bukan Core Web Vitals, namun jadi sinyal awal pengalaman loading sebelum LCP tercapai.
Apa itu FCP?
First Contentful Paint adalah titik waktu di mana pengguna pertama kali melihat sesuatu selain halaman putih. Berbeda dengan LCP (Largest Contentful Paint) yang mengukur elemen terbesar, FCP mencatat konten apapun yang muncul pertama, meski hanya logo kecil atau satu baris teks.
Formula sederhana FCP:
$$FCP = T_{firstPaint} - T_{navigationStart}$$
Artinya: waktu yang dibutuhkan dari pengguna menekan enter di URL sampai pixel konten pertama tampil.
Threshold Skor FCP
| Kategori | Waktu | Interpretasi |
|---|---|---|
| Good | $\leq$ 1,8 detik | Pengalaman loading cepat |
| Needs Improvement | 1,8 - 3,0 detik | Perlu optimasi |
| Poor | $>$ 3,0 detik | Pengguna cenderung bounce |
Data ini berasal dari dokumentasi resmi web.dev per April 2026.
Kenapa FCP Penting?
FCP adalah indikator psikologis pertama. Dalam beberapa proyek yang saya tangani, halaman dengan FCP di atas 2,5 detik cenderung punya bounce rate 20-30% lebih tinggi dibanding kompetitornya. Marketer dan developer yang paham FCP bisa mendiagnosis masalah render blocking JavaScript atau CSS sejak dini, sebelum isu membesar ke LCP.
Penyebab umum FCP lambat: render-blocking resources, server response lambat (TTFB tinggi), dan font yang tidak dioptimasi.
Pertanyaan Umum
Apakah FCP bagian dari Core Web Vitals?
Tidak. FCP adalah metrik pelengkap. Core Web Vitals saat ini terdiri dari LCP, INP, dan CLS. Namun FCP tetap dipakai Google Lighthouse sebagai sinyal performa.
Apa beda FCP dan LCP?
FCP mencatat konten pertama apa saja (termasuk elemen kecil). LCP mencatat elemen terbesar di viewport. LCP selalu terjadi setelah atau bersamaan dengan FCP.
Bagaimana cara memperbaiki FCP?
Kurangi render-blocking JavaScript, optimasi CSS critical path, gunakan CDN, dan preload font utama.
Istilah Terkait