Cara Memperbaiki First Contentful Paint (FCP) di WordPress

First Contentful Paint (FCP) mengukur berapa lama waktu sebelum browser menampilkan teks atau gambar pertama. Pengunjung menatap layar kosong sampai itu terjadi. Panduan Google menganggap 1,8 detik atau kurang sebagai baik.

Yang biasanya menunda FCP

• Respons server yang lambat (browser tidak bisa mulai sebelum menerima HTML)
• File CSS dan JavaScript yang memblokir rendering
• Web font yang menyembunyikan teks sampai selesai dimuat
• Page builder dan plugin yang memuat file besar di setiap halaman

1. Perbaiki respons server dulu

Jika server Anda lambat, hal lain tidak akan banyak membantu. Mulailah dengan panduan mengurangi TTFB.

2. Kurangi CSS yang memblokir rendering

PageSpeed Insights mencantumkan request yang memblokir rendering. Pilihan Anda:

• Sisipkan (inline) sedikit CSS yang dibutuhkan untuk layar pertama dan muat sisanya belakangan. Banyak plugin cache menawarkan ini sebagai opsi bernama critical CSS atau optimized CSS delivery.
• Hapus CSS yang tidak Anda pakai. Uji dengan hati-hati, karena menghapus terlalu banyak bisa merusak tata letak.
• Hindari @import di dalam file CSS, karena membuat browser memuat file satu per satu.

3. Tunda (defer) JavaScript

Tambahkan atribut defer pada skrip yang tidak dibutuhkan layar pertama. Widget chat, analytics, dan tag marketing adalah kandidat yang baik, dan banyak yang bisa menunggu sampai pengunjung berinteraksi. Setelah setiap perubahan, uji formulir, menu, dan slider, karena menunda skrip yang dibutuhkan kode lain bisa merusaknya.

4. Muat font tanpa memblokir teks

Tampilkan font cadangan segera dan ganti dengan font Anda saat sudah tiba, memakai font-display: swap. Meng-host font sendiri menghindari koneksi tambahan ke server lain.

@font-face {
  font-family: "Inter";
  src: url("/wp-content/uploads/fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

Preload hanya satu font yang dipakai di bagian atas halaman, dan gunakan family dan weight sesedikit mungkin:

<link rel="preload" href="/wp-content/uploads/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin>

5. Kirim lebih sedikit dari builder dan plugin

Banyak page builder dan plugin memuat CSS dan JavaScript-nya di setiap halaman. Nonaktifkan modul dan widget yang tidak dipakai, dan gunakan tool yang membongkar (unload) aset di halaman yang tidak membutuhkannya.

Periksa hasilnya

Jalankan PageSpeed Insights tiga kali dan bandingkan nilai FCP. Lihat filmstrip screenshot: konten pertama yang terlihat seharusnya muncul lebih awal dari sebelumnya. Jika gambar atau judul terbesar Anda masih muncul terlambat, lanjutkan dengan panduan LCP.