Digital Transformation
First Contentful Paint (FCP)
TL;DR: First Contentful Paint (FCP) adalah waktu yang dibutuhkan browser untuk menampilkan piksel konten pertama, baik teks, gambar, atau SVG, sejak pengguna membuka halaman. Skor baik menurut Google adalah di bawah 1,8 detik, sedang 1,8 sampai 3 detik, buruk di atas 3 detik.
Apa itu First Contentful Paint?
First Contentful Paint mengukur seberapa cepat halaman web mulai terasa hidup di mata pengguna. Berbeda dengan Largest Contentful Paint yang mengukur elemen terbesar, FCP fokus pada kemunculan konten pertama apa pun. Bayangkan saat membuka aplikasi, layar putih kosong selama 3 detik membuat pengguna ragu, sementara teks judul yang muncul dalam 1 detik memberi sinyal bahwa halaman bekerja.
FCP bukan termasuk Core Web Vitals, tetapi tetap dilaporkan di Lighthouse, PageSpeed Insights, dan Chrome User Experience Report sebagai metrik pendukung. Dalam praktik audit performa di proyek client, FCP sering jadi indikator awal masalah server response atau render-blocking resource.
Cara FCP Diukur
FCP dihitung dari navigationStart sampai browser merender frame pertama yang berisi konten DOM yang terlihat. Yang dihitung sebagai konten:
| Termasuk FCP | Tidak Termasuk FCP |
|---|---|
| Teks dengan font yang sudah ter-load | Background color saja |
| Gambar (img, picture, background-image) | Iframe (dihitung sendiri) |
| Canvas dengan konten | Elemen kosong tanpa visual |
| SVG dengan konten | Loading spinner default browser |
Tools yang umum dipakai: PageSpeed Insights, Lighthouse di Chrome DevTools, web-vitals JS library, dan field data dari Google Search Console bila tersedia.
Cara Memperbaiki FCP
Strategi yang sering dipakai dalam proyek client UMKM Indonesia:
- Pangkas response time server (Time to First Byte di bawah 600 ms).
- Pasang CDN untuk distribusi aset lebih dekat ke pengguna.
- Kurangi render-blocking CSS dan JS dengan
deferatauasync. - Inline critical CSS untuk above-the-fold.
- Preload font utama dan gunakan
font-display: swap.
Kenapa Penting?
Riset Google Search Central menunjukkan halaman dengan FCP di bawah 1 detik memiliki bounce rate jauh lebih rendah dibanding halaman dengan FCP di atas 3 detik. Untuk pasar Indonesia dengan kondisi jaringan 4G yang bervariasi, menargetkan FCP di bawah 1,8 detik di koneksi 4G simulasi adalah baseline yang masuk akal. FCP juga jadi proxy cepat untuk menilai kesehatan teknis sebuah halaman sebelum masuk ke audit yang lebih dalam.
Pertanyaan Umum
Apakah FCP sama dengan LCP?
Tidak. FCP mengukur konten pertama apa pun yang muncul, sementara LCP mengukur elemen konten terbesar yang terlihat di viewport. FCP biasanya lebih cepat dari LCP.
Berapa target FCP yang ideal?
Google menetapkan di bawah 1,8 detik sebagai skor baik di 75 persen kunjungan. Untuk audience Indonesia di jaringan 4G, target ini realistis dengan hosting yang dekat (Singapura atau lokal).
Apakah FCP termasuk faktor ranking SEO?
FCP bukan ranking factor langsung. Yang jadi ranking factor adalah Core Web Vitals (LCP, INP, CLS). Namun FCP yang buruk hampir selalu berkorelasi dengan LCP yang buruk juga.
Istilah Terkait