Gambar Pertama yang Penuh Makna

First Meaningful Paint (FMP) adalah salah satu dari enam metrik yang dilacak di bagian Performa pada laporan Lighthouse. Setiap metrik menangkap beberapa aspek kecepatan pemuatan halaman.

Lighthouse menampilkan FMP dalam detik:

Screenshot audit First Meaningful Paint Lighthouse

Yang diukur FMP

FMP mengukur waktu saat konten utama halaman terlihat oleh pengguna. Skor mentah untuk FMP adalah waktu dalam detik antara pengguna memulai pemuatan halaman dan halaman merender konten paruh atas utama. FMP pada dasarnya menunjukkan waktu proses gambar setelah perubahan tata letak paruh atas terbesar terjadi. Pelajari lebih lanjut detail teknis FMP di Waktu untuk First Meaningful Paint: pendekatan berbasis tata letak Google.

First Contentful Paint (FCP) dan FMP sering kali sama jika bit konten pertama yang dirender di halaman menyertakan konten di paruh atas. Namun, metrik ini dapat berbeda jika, misalnya, ada konten di atas fold dalam iframe. FMP mendaftar saat konten dalam iframe terlihat oleh pengguna, sedangkan FCP tidak menyertakan konten iframe.

Cara Lighthouse menentukan skor FMP Anda

Sama seperti FCP, FMP didasarkan pada data performa situs sebenarnya dari HTTP Archive.

Jika FMP dan FCP sama, skornya akan identik. Jika FMP terjadi setelah FCP—misalnya, saat halaman berisi konten iframe— skor FMP akan lebih rendah daripada skor FCP.

Misalnya, FCP Anda adalah 1,5 detik, dan FMP Anda adalah 3 detik. Skor FCP akan menjadi 99, tetapi skor FMP akan menjadi 75.

Tabel ini menunjukkan cara menafsirkan skor FMP Anda:

Metrik FMP
(dalam detik)
Pengodean warna Skor FMP
(persentil FCP HTTP Archive)
0–2 Hijau (cepat) 75–100
2–4 Oranye (sedang) 50–74
Lebih dari 4 Merah (lambat) 0–49

Cara meningkatkan skor FMP

Lihat Cara meningkatkan Largest Contentful Paint di situs Anda. Strategi untuk meningkatkan FMP sebagian besar sama dengan strategi untuk meningkatkan Largest Contentful Paint.

Melacak FMP di perangkat pengguna sungguhan

Untuk mempelajari cara mengukur kapan FMP benar-benar terjadi di perangkat pengguna, lihat halaman Metrik Performa yang Berfokus pada Pengguna Google. Bagian Melacak FMP menggunakan elemen hero 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. Audit Lighthouse yang menandai dan mengukur Waktu Pengguna memungkinkan Anda melihat data Waktu Pengguna dalam laporan.

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:

Lighthouse: Bagian Diagnostik yang menampilkan sejumlah audit dan dampaknya
Lighthouse: Bagian Diagnostik

Lihat Audit performa untuk mempelajari cara mengatasi peluang yang diidentifikasi dalam laporan Lighthouse Anda.

Resource