First Contentful Paint (FCP)

Philip Walton

Dukungan Browser

• 60
• 79
• 84
• 14.1

Sumber

Catatan: First Contentful Paint (FCP) adalah metrik penting yang berfokus pada pengguna untuk mengukur kecepatan pemuatan yang dirasakan karena menandai titik pertama dalam linimasa pemuatan halaman tempat pengguna dapat melihat apa pun di layar—FCP yang cepat membantu meyakinkan pengguna bahwa sesuatu sedang terjadi.

Apa yang dimaksud dengan FCP?

First Contentful Paint (FCP) mengukur waktu dari saat pengguna pertama kali membuka halaman hingga bagian mana pun dari konten halaman dirender di layar. Untuk metrik ini, "konten" mengacu pada teks, gambar (termasuk gambar latar), elemen <svg>, atau elemen <canvas> non-putih.

Poin Penting: Penting untuk diperhatikan bahwa FCP mencakup waktu penghapusan muatan dari halaman sebelumnya, waktu penyiapan koneksi, waktu pengalihan, dan Time To First Byte (TTFB) yang dapat signifikan saat diukur di lapangan dan dapat menyebabkan perbedaan antara pengukuran di lapangan dan di lab.

Dalam linimasa pemuatan ini, FCP terjadi pada frame kedua, karena saat itulah elemen teks dan gambar pertama dirender ke layar.

Dalam linimasa pemuatan yang digambarkan pada gambar sebelumnya, FCP terjadi pada frame kedua, karena saat itulah elemen teks dan gambar pertama dirender ke layar.

Anda akan melihat bahwa meskipun sebagian konten telah dirender, tidak semuanya telah dirender. Perbedaan ini penting untuk dibuat antara First Contentful Paint dan Largest Contentful Paint (LCP)—yang bertujuan untuk mengukur kapan konten utama halaman selesai dimuat.

Berapa skor FCP yang baik?

Untuk memberikan pengalaman pengguna yang baik, situs harus mengusahakan agar First Contentful Paint-nya 1,8 detik atau kurang. Untuk memastikan Anda mencapai target ini bagi sebagian besar pengguna, nilai minimum yang baik untuk diukur adalah persentil ke-75 pemuatan halaman, yang disegmentasikan di seluruh perangkat seluler dan desktop.

Nilai FCP yang baik adalah 1,8 detik atau kurang. Nilai buruk lebih besar dari 3,0 detik

Cara mengukur FCP

FCP dapat diukur di lab atau di lapangan, dan tersedia di alat berikut:

Alat kolom

• PageSpeed Insights
• Laporan Pengalaman Pengguna Chrome
• Search Console (Laporan Kecepatan)
• Library JavaScript web-vitals

Alat lab

• Mercusuar
• Chrome DevTools
• PageSpeed Insights

Mengukur FCP di JavaScript

Untuk mengukur FCP di JavaScript, Anda dapat menggunakan 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});

Peringatan: Kode ini menunjukkan cara mencatat entri first-contentful-paint ke konsol, tetapi pengukuran FCP di JavaScript lebih rumit. Baca terus untuk mengetahui detail selengkapnya.

Dalam cuplikan kode sebelumnya, entri first-contentful-paint yang dicatat akan memberi tahu Anda kapan elemen konten pertama digambar. Namun, dalam beberapa kasus, entri ini tidak valid untuk mengukur FCP.

Bagian berikut mencantumkan perbedaan antara laporan API dan cara penghitungan metrik.

Perbedaan antara metrik dan API

• API akan mengirimkan entri first-contentful-paint untuk halaman yang dimuat di tab latar belakang, tetapi halaman tersebut harus diabaikan saat menghitung FCP (waktu cat pertama hanya boleh dipertimbangkan jika halaman berada di latar depan sepanjang waktu).
• API tidak melaporkan entri first-contentful-paint saat halaman dipulihkan dari cache kembali/maju, tetapi FCP harus diukur dalam kasus ini karena pengguna mengalaminya sebagai kunjungan halaman yang berbeda.
• API mungkin tidak melaporkan waktu render dari iframe lintas origin, tetapi untuk mengukur FCP dengan benar, Anda harus mempertimbangkan semua frame. Sub-frame dapat menggunakan API untuk melaporkan pengaturan waktu gambarnya ke frame induk untuk agregasi.
• API mengukur FCP dari awal navigasi, tetapi untuk halaman yang dipra-render, FCP harus diukur dari activationStart karena sesuai dengan waktu FCP yang dialami pengguna.

Daripada menghafal semua perbedaan kecil ini, developer dapat menggunakan library JavaScript web-vitals untuk mengukur FCP, yang menangani perbedaan ini untuk Anda (jika memungkinkan—perhatikan bahwa masalah iframe tidak tercakup):

import {onFCP} from 'web-vitals';

// Measure and log FCP as soon as it's available.
onFCP(console.log);

Anda dapat melihat kode sumber untuk onFCP() untuk mengetahui contoh lengkap cara mengukur FCP di JavaScript.

Catatan: Dalam beberapa kasus (seperti iframe lintas origin), FCP tidak dapat diukur di JavaScript. Lihat bagian batasan library web-vitals untuk mengetahui detailnya.

Cara meningkatkan FCP

Untuk mempelajari cara meningkatkan FCP untuk situs tertentu, Anda dapat menjalankan audit performa Lighthouse dan memperhatikan peluang atau diagnostik spesifik yang disarankan audit.

Untuk mempelajari cara meningkatkan FCP secara umum (untuk situs mana pun), lihat panduan performa berikut:

• Menghilangkan resource yang memblokir rendering
• Meminifikasi CSS
• Menghapus CSS yang tidak digunakan
• Menghapus JavaScript yang tidak digunakan
• Melakukan prakoneksi ke origin yang diperlukan
• Mengurangi waktu respons server (TTFB)
• Menghindari pengalihan halaman lebih dari satu kali
• Melakukan pramuat permintaan kunci
• Menghindari payload jaringan yang sangat besar
• Menayangkan aset statis dengan kebijakan cache yang efisien
• Menghindari ukuran DOM yang berlebihan
• Meminimalkan kedalaman permintaan penting
• Memastikan teks tetap terlihat selama pemuatan font web
• Mempertahankan jumlah permintaan tetap rendah dan ukuran transfer tetap kecil

Log perubahan

Terkadang, bug ditemukan di API yang digunakan untuk mengukur metrik, dan terkadang di 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 mengelolanya, semua perubahan pada penerapan atau definisi metrik ini akan ditampilkan di Log Perubahan ini.

Jika memiliki masukan untuk metrik ini, Anda dapat memberikannya di grup Google web-vitals-feedback.