Jawaban Singkat
Google Fonts yang kamu embed dari CDN eksternal sering menjadi penyebab utama skor Core Web Vitals—terutama LCP dan CLS—jatuh. Solusi terbaik adalah self-hosting font, mengaktifkan font-display: swap, menggunakan variable fonts untuk mengurangi request HTTP, dan menambahkan preload pada font kritis. Artikel ini menjelaskan langkahnya dari awal sampai akhir di WordPress.
Pernah Lihat Teks “Melompat” Saat Halaman Dimuat? Itu Masalah Serius
Bayangkan ini: kamu buka halaman WordPress, mulai membaca paragraf pertama, lalu tiba-tiba semua teks bergeser karena font baru selesai diunduh. Tombol yang tadinya di bawah jempol sekarang pindah. Kamu malah klik iklan. Menyebalkan, kan?
Itu yang disebut Cumulative Layout Shift (CLS). Dan Google Fonts—si pahlawan yang memberi kita 1.000+ typeface gratis—sering jadi biang keladinya. Ironis, karena justru tools gratisan Google yang bikin skor Core Web Vitals-mu merah.
Masalahnya bukan di font-nya. Masalahnya di cara WordPress theme dan plugin meng-load font tersebut. Kalau kamu serius ingin LCP dan CLS-mu hijau, optimasi font WordPress adalah langkah yang nggak bisa kamu skip.
Kenapa Google Fonts Bikin Skor-mu Jeblok
Setiap kali kamu embed Google Fonts via <link> atau @import, browser harus melakukan ini:
- Resolve DNS ke
fonts.googleapis.com - Buka koneksi HTTPS baru ke server Google
- Download file CSS descriptor
- Baca URL font asli di
fonts.gstatic.com - Buka lagi koneksi ke domain berbeda
- Download file font aktual (WOFF2)
Itu dua round-trip eksternal sebelum satu huruf pun muncul. Di koneksi lambat atau mobile 3G, delay ini bisa mencapai 1-3 detik. Selama itu, teks-mu kosong (FOIT) atau pakai fallback font yang tiba-tiba berganti (FOUT). Keduanya buruk untuk CLS.
Google PageSpeed Insights bakal langsung menandainya: “Eliminate render-blocking resources” dan “Ensure text remains visible during webfont load”. Dua warning itu hampir selalu muncul di audit WordPress karena Google Fonts.
Self-Hosting Font: Satu Langkah, Banyak Masalah Hilang
Self-hosting artinya kamu menyimpan file font di server-mu sendiri. Nggak ada lagi round-trip ke Google. Nggak ada DNS lookup eksternal. Browser cukup download dari origin yang sama dengan HTML dan CSS-mu. Hasilnya: LCP turun drastis.
Cara paling gampang di WordPress: pakai plugin OMGF (OMGF | Host Google Fonts Locally) atau Swap Google Fonts Display. Keduanya gratis di repo WordPress. Prosesnya sederhana:
- Install dan aktifkan plugin
- Plugin otomatis mendeteksi Google Fonts yang dipakai theme-mu
- Download font ke
/wp-content/uploads/atau/fonts/ - Generate stylesheet lokal yang mengarah ke file di server-mu
- Hapus link eksternal ke Google
Yang keren: OMGF bisa otomatis mendeteksi font dari theme dan plugin sekaligus. Jadi meskipun Elementor atau theme GeneratePress-mu pakai Google Fonts, semuanya akan di-self-host.
Tambahan bonus: self-hosting font juga membuat situsmu lebih GDPR-friendly. Nggak ada data IP pengunjung yang dikirim ke server Google saat request font. Di Eropa, ini poin penting.
Variable Fonts: Satu File, Semua Weight yang Kamu Butuhkan
Ini bagian yang jarang dibahas di tutorial mainstream. Kebanyakan WordPress user yang peduli performa akan self-hosting font, tapi mereka masih download 4-6 file terpisah: Regular (400), Bold (700), Italic, Bold Italic. Padahal ada cara lebih efisien: variable fonts.
Variable font adalah satu file .woff2 yang berisi semua variasi weight, width, dan style dalam satu container. Satu file bisa menggantikan 6-10 file individual. Ukuran totalnya sering kali lebih kecil daripada jumlah file terpisah.
Contoh nyata: Inter (typeface populer dari Rasmus Andersson). Versi statis butuh sekitar 400KB untuk 4 weight. Versi variable-nya: ~300KB untuk akses ke semua weight dari 100 sampai 900.
Cara implementasi di CSS:
@font-face {
font-family: 'Inter';
src: url('/fonts/Inter-Variable.woff2') format('woff2-variations');
font-weight: 100 900;
font-display: swap;
}Google Fonts sekarang menyediakan opsi variable untuk sebagian besar typeface populer. Saat download manual, centang opsi “Variable” di kanan atas UI Google Fonts. Upload ke WordPress, dan kamu hemat 2-5 request HTTP tambahan per halaman.
Preload & Font-Display: Dua Baris yang Bikin Bedanya
Setelah self-hosting dan menggunakan variable fonts, masih ada dua optimasi penting: preload dan font-display.
Font-Display: Swap
Properti font-display memberitahu browser apa yang harus dilakukan saat font belum selesai diunduh. Nilai-nilainya:
- block: Sembunyikan teks sampai font siap (FOIT). Ini yang bikin teks hilang beberapa detik.
- swap: Tampilkan fallback font dulu, ganti setelah font siap. Ini yang paling aman untuk CLS.
- fallback: Periode block pendek, lalu swap.
- optional: Font hanya dipakai jika sudah ada di cache. Cocok untuk font dekoratif.
Untuk body text dan heading, swap adalah pilihan terbaik. Pengunjung tetap bisa membaca konten segera tanpa layout shift yang mengganggu. Plugin OMGF sudah otomatis menambahkan font-display: swap ke semua stylesheet yang di-generate.
Preload Font Kritis
Preload memberi tahu browser: “File ini penting, download sekarang juga, jangan tunggu CSS parsing selesai.” Tanpa preload, browser baru tahu font dibutuhkan setelah membaca CSS. Itu menambah delay.
Tambahkan ini di <head> untuk font utama:
<link rel="preload" href="/fonts/Inter-Variable.woff2" as="font" type="font/woff2" crossorigin="anonymous">Di WordPress, kamu bisa menambahkannya via hook wp_head di functions.php atau pakai plugin seperti Preload Fonts / Perfmatters. Jika pakai OMGF versi Pro, fitur preload sudah built-in.
Rangkuman: Checklist Optimasi Font WordPress
Kalau kamu ingin hasil maksimal, ikuti urutan ini (berdasarkan dampak vs effort):
- 1. Self-host semua Google Fonts — pakai OMGF, cukup 5 menit
- 2. Aktifkan
font-display: swap— hilangkan FOIT/FOUT, perbaiki CLS - 3. Preload font kritis — potong 200-500ms dari LCP
- 4. Upgrade ke variable fonts — kurangi jumlah file dan total KB
- 5. Subset font — buang karakter yang nggak kamu pakai (huruf Cyrillic, Latin Extended, dsb.)
- 6. Cache font dengan versi hash — set cache-control header panjang (1 tahun) untuk file .woff2
Dengan checklist ini, warning “Eliminate render-blocking resources” di PageSpeed Insights biasanya langsung hilang. Skor CLS dan LCP kamu bakal bergeser dari merah ke hijau.
Untuk pembahasan lebih dalam tentang Core Web Vitals, baca juga artikel kami: WordPress Performance Optimization untuk Core Web Vitals dan LCP Sudah Hijau? INP WordPress-mu Bisa Diam-diam Bikin Ranking Bocor.
Kesimpulan
Optimasi font di WordPress bukan soal estetika semata. Ini adalah salah satu pengungkit performa paling underrated yang bisa mengubah skor Core Web Vitals-mu secara signifikan. Self-hosting, variable fonts, preload, dan font-display swap adalah empat pilar yang wajib kamu terapkan.
Yang lebih penting: jangan percaya begitu saja kalau Google Fonts via CDN selalu “lebih cepat karena pakai cache global.” Di real-world metrics—terutama di Indonesia dengan koneksi yang bervariasi—self-hosting hampir selalu menang. Referensi teknis lebih lanjut bisa kamu cek di Web.dev Font Best Practices dan dokumentasi MDN Variable Fonts Guide.
Siap bikin skor PageSpeed-mu hijau? Coba checklist di atas dan lihat perbedaannya di audit berikutnya.
