First Contentful Paint (FCP) adalah salah satu dari enam metrik yang dilacak di bagian Performa pada laporan Lighthouse. Setiap metrik menangkap beberapa aspek kecepatan pemuatan halaman.
Lighthouse menampilkan FCP dalam detik:
Yang diukur FCP
FCP mengukur waktu yang diperlukan browser untuk merender bagian pertama konten DOM setelah pengguna membuka halaman Anda.
Gambar, elemen <canvas> non-putih, dan SVG di halaman Anda dianggap sebagai
konten DOM; apa pun di dalam iframe tidak disertakan.
Cara Lighthouse menentukan skor FCP Anda
Skor FCP adalah perbandingan waktu FCP halaman Anda dan waktu FCP untuk situs sebenarnya, berdasarkan data dari HTTP Archive. Misalnya, situs yang berperforma pada persentil ke-99 merender FCP dalam waktu sekitar 1,2 detik. Jika FCP situs Anda adalah 1,2 detik, skor FCP Anda adalah 99. Lihat Cara menentukan skor metrik untuk mempelajari cara menetapkan nilai minimum skor Lighthouse.
Tabel ini menunjukkan cara menafsirkan skor FCP:
| Waktu FCP (dalam detik) |
Pengodean warna |
|---|---|
| 0–1,8 | Hijau (cepat) |
| 1,8–3 | Oranye (sedang) |
| Lebih dari 3 | Merah (lambat) |
Cara meningkatkan skor FCP
Satu masalah yang sangat penting untuk FCP adalah waktu pemuatan font. Lihat postingan Memastikan teks tetap terlihat selama pemuatan webfont untuk mengetahui cara mempercepat pemuatan font.
Melacak FCP di perangkat pengguna sungguhan
Untuk mempelajari cara mengukur kapan FCP benar-benar terjadi di perangkat pengguna, lihat halaman Metrik Performa yang Berfokus pada Pengguna Google. Bagian Melacak FP/FCP menjelaskan cara mengakses data FCP secara terprogram dan mengirimkannya ke Google Analytics.
Lihat Menilai Performa Pemuatan di Dunia Nyata dengan Waktu Resource dan Navigasi Google untuk mengetahui informasi selengkapnya tentang cara mengumpulkan metrik pengguna sebenarnya.
Cara meningkatkan skor Performa secara keseluruhan
Kecuali jika Anda memiliki alasan khusus untuk berfokus pada metrik tertentu, sebaiknya fokuslah untuk meningkatkan skor Performa secara keseluruhan.
Gunakan bagian Diagnostik di laporan Lighthouse untuk menentukan peningkatan mana yang akan memberikan nilai paling besar untuk halaman Anda. Makin signifikan peluangnya, makin besar dampaknya terhadap Skor performa Anda. Misalnya, screenshot Lighthouse berikut menunjukkan bahwa menghapus resource yang memblokir rendering akan menghasilkan peningkatan terbesar:
Lihat Audit performa untuk mempelajari cara mengatasi peluang yang diidentifikasi dalam laporan Lighthouse Anda.