Cara Mempercepat Loading Webfont

1. Gunakan WOFF2

Ini adalah format umum dengan ukuran paling kecil. Jika kamu masih menyajikan TTF atau OTF, ini adalah perbaikan termudah. Gunakan Webfont Generator untuk mengonversinya.

2. Hapus karakter yang tidak kamu gunakan

Banyak font memuat abjad yang tidak pernah ditampilkan di situsmu. Font Subsetter hanya menyimpan bahasa yang kamu pilih. Periksa lisensi font terlebih dahulu, dan pastikan semua bahasa yang dipakai situsmu tetap disertakan.

3. Muat lebih sedikit weight

Setiap weight dan italic adalah file tersendiri. Banyak situs hanya membutuhkan regular dan bold. Cari di CSS-mu weight yang tidak lagi dipakai, lalu hapus.

4. Pertimbangkan variable font

Jika kamu memakai tiga weight atau lebih, satu variable font bisa lebih kecil daripada beberapa file statis. Kamu bisa memperkecilnya lagi dengan mempersempit rentang weight-nya di Webfont Generator.

5. Preload font utama

Biasanya browser baru menemukan font setelah membaca CSS-mu. Preload membuat browser memulainya lebih cepat:

<link rel="preload" href="/fonts/brand-regular.woff2" as="font" type="font/woff2" crossorigin>

Pertahankan atribut crossorigin, meskipun di domain sendiri, atau file bisa terunduh dua kali. Preload hanya satu atau dua font yang dipakai di bagian atas halaman.

6. Atur font-display

Ini mengatur apa yang dilihat pengunjung saat font sedang dimuat. swap langsung menampilkan font cadangan, jadi teksmu tidak pernah tersembunyi. optional menghindari pergantian font yang terlambat, tetapi koneksi lambat mungkin tidak menampilkan font-mu pada kunjungan pertama.

7. Simpan cache font dalam jangka panjang

File font jarang berubah, jadi biarkan browser menyimpannya. Tambahkan versi atau hash pada nama file, lalu kirim:

Cache-Control: public, max-age=31536000, immutable

Ukur hasilnya

Jalankan halamanmu melalui Page Speed Test sebelum dan sesudah, lalu bandingkan Largest Contentful Paint dan pergeseran tata letak (layout shift).