Digital Transformation
Web Font Optimization (Optimasi Font Web)
TL;DR: Web font optimization adalah serangkaian teknik memuat font kustom seefisien mungkin: memilih format modern, membatasi jumlah font, dan mengatur perilaku tampilan agar teks tidak hilang atau bergeser saat font dimuat. Tujuannya menjaga kecepatan dan stabilitas visual halaman.
Apa itu Web Font Optimization?
Web font optimization adalah cara memastikan font kustom (misalnya dari Google Fonts atau file self-hosted) tidak memperlambat halaman atau menggeser teks saat dimuat. Font yang berat dan dimuat tanpa pengaturan sering jadi penyebab tersembunyi skor Core Web Vitals yang buruk, terutama metrik Largest Contentful Paint dan Cumulative Layout Shift.
Analogi sederhananya: font ibarat bahan baku yang harus dikirim sebelum teks bisa "dimasak". Kalau pengiriman lambat, pembaca menatap halaman kosong atau melihat teks meloncat saat font asli tiba.
Teknik Utama
| Teknik | Manfaat |
|---|---|
font-display: swap | Teks tampil dengan font fallback dulu, lalu ditukar |
| Preload font kritis | Browser mengunduh font penting lebih awal |
| Subsetting | Buang glyph yang tidak dipakai, file lebih kecil |
| Format WOFF2 | Kompresi terbaik dibanding TTF atau WOFF lama |
| Batasi jumlah weight | Kurangi total berkas yang harus diunduh |
Praktik ini melengkapi optimasi aset lain seperti render-blocking resources dan critical CSS yang sama-sama menentukan kecepatan render pertama.
Kenapa Penting?
Sejak Core Web Vitals jadi faktor peringkat pada 2021, font yang tidak dioptimalkan langsung menekan skor LCP dan CLS. Untuk bisnis di Indonesia dengan banyak pengunjung mobile dan koneksi bervariasi, font ringan berarti teks terbaca lebih cepat dan bounce lebih rendah. Panduan teknis lengkap tersedia di dokumentasi web.dev tentang font.
Pertanyaan Umum
Apakah Google Fonts otomatis cepat?
Tidak selalu. Memuat banyak weight atau memanggil dari domain eksternal tanpa preconnect tetap bisa lambat. Self-hosting WOFF2 sering lebih cepat.
Apa beda swap dan optional pada font-display?
swap selalu menukar ke font kustom setelah dimuat. optional hanya memakai font kustom jika tiba sangat cepat, jika tidak tetap fallback demi stabilitas.