Berbeda dengan Largest Contentful Paint (LCP) yang mengukur seberapa cepat seluruh konten dan aset-aset yang dibutuhkan di area above the fold selesai dimuat dan ditampilkan oleh browser, First Contentful Paint (FCP) menilai seberapa cepat konten pertama dapat tampil saat pengunjung membuka website kita pertama kalinya. Konten ini dapat berupa teks, gambar, video, dan svg.
Agar lebih mudah memahaminya, mari kita lihat ilustrasi di bawah ini:
Dari contoh ilustrasi di atas, konten pertama mulai dapat ditampilkan oleh browser di frame ke-2. Frame ke-2 inilah yang dimaksud dengan First Contentful Paint (FCP). Waktu yang diperlukan oleh browser untuk merender konten di frame ke-2 ini yang menjadi angka FCP halaman website ktia.
Dari gambar ilustrasi di atas, tampilan di frame ke-2 hanya sedikit bagian dari keseluruhan elemen yang terdapat di area above the fold. Target yang harus dikejar adalah semakin cepat dan semakin banyak konten yang muncul di frame pertama.
Berapa angka maksimal FCP yang aman di PageSpeed Insights?
Sama seperti Largest Contentful Paint, FCP (First Contentful Paint) diukur dalam satuan detik. Untuk memberikan pengalaman pengguna yang baik, pemilik website harus berusaha untuk memiliki LCP maksimal 1,8 detik. Di atas itu, baik Lighthouse maupun PageSpeed Insights akan memberikan peringatan.
Sama dengan LCP, target yang harus dikejar untuk FCP adaah di bawah 1 detik untuk desktop dan di bawah 2 detik di pengukuran mobile. Dan sebisa mungkin, jedanya tidak teralalu jauh dengan CP.
Contoh FCP yang Buruk
Gambar di atas adalah contoh First Contentful Paint (FCP) yang buruk. Ketika saya me-non-aktifkan semua settings di plugin-plugin optimasi yang digunakan di website ThinkDigital, browser baru bisa merender konten utama di frame terakhir. Walaupun memang langsung tampil secara menyeluruh, jeda ini tentu akan mengganggu pengalaman pengguna, terutama bila koneksi pengunjung sedang tidak dalam performa yang baik.
Contoh FCP yang Baik
Saya mengaktifkan lagi semua settings di plugin-plugin optimasi yang digunakan di website ThinkDigital. Hasilnya, browser langsung merender konten utama secara penuh sejak frame utama. *Sekedar informasi, 99% keperluan optimasi dari website ThinkDigital menggunakan plugin yang saya buat sendiri.
Bagaimana cara mengoptimasi dan memperbaiki angka FCP di Lighthouse dan PageSpeed Insights?
Secara umum, untuk memperbaiki dan mempercepat First Contentful Paint di PageSpeed Insights yang diperlukan adalah:
- Sederhanakan keseluruhan struktur HTML, terutama struktur HTML di area above the fold
- Kurangi kebutuhan jumlah dan ukuran aset (gambar, video, font, CSS, dan JavaScript) yang perlu dimuat di initital browser rendering process
- Eliminate render-blocking resources
Ini bisa dilakukan dengan mengontrol pemuatan CSS dan JavaScript:- Preload dan Inline CSS yang digunakan di area above the fold
- Preload JavaScript yang diperlukan di area above the fold (sebisa mungkin, hindari keperluan penggunaan JavaScript untuk area ini)
- Tunda pemuatan CSS yang tidak diperlukan di area above the fold dengan metode asynchronous dan delay on user interaction
- Tunda pemuatan JavaScript yang tidak diperlukan di area above the fold dengan metode defer dan delay on user interaction
- Hapus CSS dan JS yang tidak diperlukan di halaman website yang sedang kita optimasi
- Buat Critical CSS dan taruh secara inline di
<head>section untuk mempercepat proses browser membuat tampilan FCP dan area above the fold secara keseluruhan - Kurangin jumlah font (termasuk font untuk icon), terutama yang digunakan di area above the fold
- Gunakan
font-display: swapuntuk menghindari render blocking dari font dan memastikan teks dapat cepat ditampilkan oleh browser - Pastikan ukuran dan dimensi gambar yang digunakan di area above the fold sesuai dengan yang dibutuhkan
- Tunda pemuatan gambar yang tidak digunakan di area above the fold dengan metode lazy-load
- Gunakan paket hosting yang spesifikasinya sesuai dengan kebutuhan website (kecepatan, bandwidth, traffic, dsb), dan pilih hostng yang lokasi server-nya dekat dengan lokasi target audiens website kita.
- Bila menggunakan CDN, percepat koneksi dengan CDN yang digunakan menggunakan
preconnectdan/ataudns-prefetch(khusus aset yang digunakan di above the fold area) - Atur cache-policy untuk aset-aset yang bersifat statis seperti gambar, CSS, dan JavaScript
- Aktifkan Cache, baik itu berupa server side caching atau HTML page cache
Bila website Anda menggunakan WordPress, plugin optimasi yang saya buat, Optimize More! dan Optimize More! – Images, dapat banyak membantu untuk melakukan langkah-langkah optimasi LCP di atas dengan mudah.
Penutup
Optimasi FCP (First Contentful Paint), bersama dengan LCP (Largest Contentful Paint), adalah tahap yang penting dalam mengoptimasi keseluruhan kecepatan dan Core Web Vitals website kita. Kunci utamanya terletak di struktur HTML yang ada di area above the fold dan total aset yang harus dimuat oleh browser di awal.
Bila perlu, jangan ragu untuk mengubah desain area above the fold demi memastikan kecepatan load time website dan kenyamanan pengguna saat pertama kali membuka website kita.
Good Luck! =)
Bingung dan tidak berhasil mengoptimasi First Contentful Paint website Anda? Konsultasi dan minta audit website Anda melalui form yang ada di halaman jasa optimasi speed website ini.
