𝗜 𝗦𝘁𝗼𝗽𝗽𝗲𝗱 𝗨𝘀𝗶𝗻𝗴 𝗚𝗼𝗼𝗴𝗹𝗲 𝗙𝗼𝗻𝘁𝘀 𝗖𝗗𝗡
Memuat font dari Google CDN memperlambat situs Anda.
Dulu saya menggunakan satu tautan di header saya. Rasanya mudah. Lalu saya memeriksa skor Lighthouse saya.
Laporan tersebut menunjukkan adanya masalah. Browser harus melakukan koneksi tambahan ke server Google. Browser harus melakukan DNS lookup dan TLS handshake. Hal ini menyebabkan penundaan. Pada koneksi seluler yang lambat, teks tetap tidak terlihat terlalu lama.
Saya beralih ke self-hosting. Hanya butuh satu sore. Sekarang saya melakukannya untuk setiap proyek.
Berikut adalah pengaturan yang Anda butuhkan:
- Gunakan format WOFF2. Ukurannya 30% lebih kecil daripada WOFF. Anda tidak lagi membutuhkan format lama seperti .ttf atau .eot.
- Konversi font Anda. Gunakan library fonttools untuk mengompres file .ttf menjadi .woff2.
- Gunakan properti
font-display: swap. Ini akan langsung menampilkan teks fallback. Ini mencegah teks tidak terlihat saat font sedang dimuat. - Preload font yang krusial. Tambahkan tautan preload ke bagian head untuk font yang digunakan di bagian atas halaman (above the fold).
- Selalu gunakan atribut
crossorigin. Jika Anda melupakannya, browser akan mengunduh font dua kali. - Lakukan subsetting pada font Anda. Jika situs Anda menggunakan bahasa Inggris, hapus glyph yang tidak digunakan. Ini dapat mengurangi ukuran file hingga 70%.
- Cache file Anda. Gunakan header
cache-controlyang lama agar font tetap tersimpan di browser.
Alur kerjanya sederhana:
Konversi ke WOFF2. Gunakan @font-face dengan swap. Preload font utama dengan crossorigin. Cache file tersebut.
Pengaturan ini meningkatkan kecepatan pemuatan Anda dan menghilangkan pihak ketiga dari jalur kritis (critical path) Anda.
Apakah Anda masih menggunakan Google CDN untuk produksi? Beritahu saya alasannya di kolom komentar.