Sejak diperkenalkannya Lighthouse, parameter baru terkait kecepatan halaman telah muncul. Salah satu parameter terpenting adalah First Contentful Paint (FCP). Dalam Lighthouse versi 10, efektif mulai Juni 2024, dampak FCP terhadap skor keseluruhan adalah 10%.
Untuk mengadopsi dan memahami FCP sebagai sebuah metrik, pertama-tama penting untuk mengkaji psikologi di baliknya. Konsepnya mirip dengan cermin dipasang di elevator:
Ringkasnya: Pada paruh pertama tahun 1900-an, penggunaan elevator di gedung-gedung tinggi meningkat secara signifikan, namun sistem elevator masih primitif dibandingkan saat ini. Oleh karena itu, muncul ide untuk memasang cermin pada elevator agar waktu yang dihabiskan di dalam elevator terasa lebih singkat.
Kembali ke topik kita: Hal yang membuat Anda menunggu selama waktu pemuatan ketika mencoba mengakses suatu halaman adalah FCP. Definisi First Contentful Paint adalah waktu yang diperlukan untuk pertama kali teks, gambar, kanvas non-putih, dll., ditampilkan kepada pengguna. Satuan FCP adalah detik.
Di Lighthouse, skala warna untuk FCP ditentukan sebagai berikut:
- 0-2 detik: Hijau => Cepat
- 2-4 detik: Oranye => Perlu Perbaikan
- 4+ detik: Merah => Lambat
Menurut data HTTP Archive, jumlah situs yang dapat dipertimbangkan cepat adalah 25%, dan 50% situs yang ada tergolong lambat.
Apa yang Dapat Dilakukan untuk Meningkatkan FCP?
Kurangi Waktu Respons Server
Secara umum, hal ini dapat diartikan sebagai perbaikan yang diperlukan pada sisi server dan perangkat lunak. Untuk mencantumkan masalah yang berdampak negatif pada waktu respons server:
- Pembagian server, konfigurasi (yaitu pengaturan server), dan sumber daya server dapat menjadi masalah. Kapasitas server Anda harus ditingkatkan sesuai dengan lalu lintas Anda. Dalam beberapa kasus, query database yang ditulis dengan buruk dan komponen perangkat lunak yang sangat kompleks dapat mempengaruhi waktu respon server secara serius.
- Tidak menggunakan CDN (Content Delivery Network) dapat menyebabkan keterlambatan dalam mengakses konten, sehingga memengaruhi FCP. Seiring bertambahnya ukuran konten, misalnya, jika GIF atau video animasi berukuran besar dicoba untuk dipanggil tanpa CDN dan server utama berada di benua lain, Anda mungkin perlu mempertimbangkan solusi CDN untuk mengatasi FCP.
- Tidak menyajikan konten statis dengan kebijakan cache yang tepat dan konsisten dapat menyebabkan beban berlebih server Anda tidak perlu karena jumlah pengunjung meningkat. Misalnya, jika Anda tidak menyimpan logo Anda dalam cache jangka panjang saat memuatnya di setiap halaman, Anda tidak perlu membahayakan waktu respons server Anda.
- Pengalihan halaman yang tidak diperlukan saat mengakses halaman dapat mempengaruhi FCP Anda secara tidak perlu.
Misalnya saja dulu, ada pengaturan seperti ini: ketika pengguna ingin masuk ke suatu situs, ada pengalihan HTTP ke HTTPS, lalu jika seluler, ada pengalihan HTTPS ke seluler (misal, https:// www ke https://m), dan jika halaman tersebut dihapus dan dialihkan ke tempat lain dengan 301, pengguna akan merasa seperti berpindah dari satu meja ke meja lainnya di kantor pajak. Ini adalah contoh ekstrem untuk pemahaman yang lebih baik, namun jika Anda mengalihkan halaman ke URL lain dengan pengalihan 301 lalu mengalihkan halaman tersebut ke halaman lain dengan pengalihan 301, Anda mungkin melakukan pengaturan tidak logis yang sama.
- Jika kamu jangan gunakan prakoneksi atau prefetch DNS awalan saat menyambung ke layanan pihak ketiga dan menyambung ke banyak layanan pihak ketiga, Anda tidak melakukan apa pun yang bermanfaat bagi FCP.
Kurangi Sumber Daya yang Memblokir Render
Saya harus mengakui bahwa satu poin yang ditulis sebagai item baris ini bisa memakan waktu berbulan-bulan untuk diselesaikan.
Untuk mencapai hal ini, ada metode solusi dimana semuanya JS, CSS, dan sumber daya serupa yang memblokir rendering halaman dimuat setelah waktu pembuatan halaman, namun bagian situs yang awalnya terlihat dimuat terlebih dahulu saat situs sedang dimuat. Namun, untuk melakukan hal ini, semua JS, CSS, dan sumber daya serupa perlu diperiksa, dan proses yang paling memakan waktu perlu dipisahkan. Selain itu, penggunaan layanan pihak ketiga sesedikit mungkin membantu mengoptimalkan FCP.
