First Contentful Paint (FCP) adalah metrik penting yang berfokus pada pengguna untuk mengukur kecepatan pemuatan yang dirasakan. Fitur ini menandai titik pertama dalam linimasa pemuatan halaman tempat pengguna dapat melihat apa saja di layar. FCP yang cepat membantu meyakinkan pengguna bahwa sesuatu sedang terjadi.
FCP mengukur waktu dari saat pengguna pertama kali membuka halaman hingga saat bagian konten halaman mana pun dirender di layar. Untuk metrik ini, "konten"
mengacu pada teks, gambar (termasuk gambar latar), elemen <svg>
, atau
elemen <canvas>
bukan putih.
Tidak semua konten dirender saat elemen konten pertama dirender. Hal ini penting untuk dibuat antara FCP dan Largest Contentful Paint (LCP), yang mengukur saat konten utama halaman selesai dimuat.
Berapa skor FCP yang baik?
Untuk memberikan pengalaman pengguna yang baik, situs harus memiliki FCP maksimal 1,8 detik. Guna memastikan Anda mencapai target ini untuk sebagian besar pengguna, batas yang baik untuk diukur adalah persentil ke-75 pemuatan halaman, yang tersegmentasi di seluruh perangkat seluler dan desktop.
Cara mengukur FCP
FCP dapat diukur di lab atau di lapangan, dan tersedia di alat berikut:
Alat lapangan
- PageSpeed Insights
- Laporan Pengalaman Pengguna Chrome
- Search Console (Laporan Kecepatan)
- Library JavaScript
web-vitals
Alat lab
Mengukur FCP di JavaScript
Untuk mengukur FCP di JavaScript, gunakan Paint Timing API.
Contoh berikut menunjukkan cara membuat
PerformanceObserver
yang memproses entri paint
dengan nama first-contentful-paint
dan mencatatnya
ke konsol.
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
console.log('FCP candidate:', entry.startTime, entry);
}
}).observe({type: 'paint', buffered: true});
Dalam contoh ini, entri first-contentful-paint
yang dicatat ke dalam log memberi tahu Anda kapan elemen contentful pertama di-paint. Namun, dalam beberapa kasus, entri ini tidak
valid untuk mengukur FCP.
Bagian berikut mencantumkan perbedaan antara apa yang dilaporkan oleh API dan cara penghitungan metrik.
Perbedaan antara metrik dan API
- API mengirimkan entri
first-contentful-paint
untuk halaman yang dimuat di tab latar belakang, tetapi halaman tersebut harus diabaikan saat menghitung FCP. Waktu penggambaran pertama hanya dipertimbangkan jika halaman berada di latar depan sepanjang waktu. - API tidak melaporkan entri
first-contentful-paint
saat halaman dipulihkan dari back/forward cache, tetapi dalam kasus ini FCP harus diukur karena pengguna mendapatinya sebagai kunjungan halaman yang berbeda. - API mungkin tidak melaporkan waktu paint dari iframe lintas origin, tetapi untuk mengukur FCP dengan benar, Anda harus mempertimbangkan semua frame. Sub-frame dapat menggunakan API untuk melaporkan pengaturan waktu paint-nya ke frame induk untuk agregasi.
- API mengukur FCP dari awal navigasi, tetapi untuk
halaman yang dipra-render,
FCP harus diukur dari
activationStart
karena hal tersebut sesuai dengan waktu FCP seperti yang dialami oleh pengguna.
Alih-alih mengingat semua perbedaan kecil ini, developer dapat menggunakan
library JavaScript web-vitals
untuk
mengukur FCP, yang menangani perbedaan ini untuk Anda jika memungkinkan (kecuali di
iframe):
import {onFCP} from 'web-vitals';
// Measure and log FCP as soon as it's available.
onFCP(console.log);
Lihat kode sumber untuk onFCP()
guna mengetahui contoh lengkap cara mengukur FCP di JavaScript.
Cara meningkatkan FCP
Untuk mempelajari cara meningkatkan FCP di situs tertentu, Anda dapat menjalankan audit performa Lighthouse dan memperhatikan peluang atau diagnostik tertentu yang disarankan audit.
Untuk mempelajari cara meningkatkan FCP secara umum (untuk situs mana pun), lihat panduan performa berikut:
- Menghilangkan resource yang memblokir render
- Meminimalkan CSS
- Menghapus CSS yang tidak digunakan
- Menghapus JavaScript yang tidak digunakan
- Melakukan prakoneksi ke origin yang diperlukan
- Mengurangi waktu respons server (TTFB)
- Menghindari pengalihan beberapa halaman
- Pramuat permintaan utama
- Hindari payload jaringan yang sangat besar
- Menayangkan aset statis dengan kebijakan cache yang efisien
- Menghindari ukuran DOM yang berlebihan
- Meminimalkan kedalaman permintaan kritis
- Memastikan teks tetap terlihat selama pemuatan font web
- Menjaga agar jumlah permintaan tetap rendah dan ukuran transfer tetap kecil
Log perubahan
Terkadang, bug ditemukan di API yang digunakan untuk mengukur metrik, dan terkadang dalam definisi metrik itu sendiri. Oleh karena itu, terkadang perubahan harus dilakukan, dan perubahan ini dapat muncul sebagai peningkatan atau regresi dalam laporan dan dasbor internal Anda.
Untuk membantu Anda mengelola hal ini, semua perubahan pada penerapan atau definisi metrik ini ditampilkan di Log perubahan ini.
Jika Anda memiliki masukan untuk metrik ini, berikan di grup Google web-vitals-feedback.