Optimasi Font Loading untuk Performa Lebih Baik

Font web kustom memang bisa mempercantik desain website Anda, tapi seringkali menjadi penyebab utama loading yang lambat dan pengalaman pengguna yang buruk. Ketika browser menemukan font web yang perlu diunduh, ia mungkin akan menunda tampilan teks hingga font tersebut siap.

Ini dikenal sebagai masalah FOIT (Flash of Invisible Text) atau FOUT (Flash of Unstyled Text). Mengoptimasi font loading sangat penting untuk meningkatkan First Contentful Paint (FCP) dan Largest Contentful Paint (LCP), serta keseluruhan performa website Anda.

Mengapa Font Loading Memengaruhi Performa?

Render-Blocking Resource: Browser perlu mengunduh file font eksternal sebelum bisa merender teks yang menggunakannya. Ini memblokir rendering halaman.
Large File Sizes: File font (terutama yang memiliki banyak glyph atau weight) bisa sangat besar, membutuhkan waktu unduh yang signifikan.
Network Requests: Setiap font weight atau style yang berbeda biasanya memerlukan permintaan HTTP terpisah.

Baca Juga : Optimasi SEO di Website Jamstack

Strategi Optimasi Font Loading

Berikut adalah beberapa teknik efektif untuk mengoptimasi font loading:

1. Gunakan `font-display`

Properti CSS font-display memberi tahu browser bagaimana harus berperilaku saat font belum tersedia. Ini adalah cara paling dasar dan penting untuk mengontrol pengalaman loading font.

font-display: swap; (Paling Umum & Direkomendasikan):
- Browser akan merender teks menggunakan font fallback (sistem) terlebih dahulu (menghindari FOIT).
- Setelah font web selesai diunduh, browser akan "menukar" font fallback dengan font web yang sebenarnya (menyebabkan FOUT).
- Ini seringkali merupakan keseimbangan terbaik antara performa dan pengalaman visual.
CSS
```
@font-face {
  font-family: 'MyWebFont';
  src: url('mywebfont.woff2') format('woff2');
  font-display: swap; /* Gunakan ini! */
}
```
font-display: fallback;: Mirip dengan swap, tetapi dengan periode blokir yang lebih pendek (sekitar 100ms) dan periode pertukaran yang sangat singkat sebelum beralih ke fallback permanen jika font web tidak cepat dimuat.
font-display: optional;: Browser akan menggunakan font web hanya jika sudah ada di cache. Jika tidak, ia akan langsung menggunakan font fallback tanpa menunggu, lalu mengunduh font web di latar belakang untuk kunjungan berikutnya. Ini terbaik untuk performa, tapi mungkin mengorbankan desain awal.
font-display: block;: Ini akan memblokir rendering teks hingga font dimuat (menyebabkan FOIT), serupa dengan perilaku default tanpa font-display. Hindari ini untuk font utama.

2. Preload Font Web Kritis

Untuk font yang mutlak diperlukan untuk above-the-fold content dan harus dimuat secepat mungkin, gunakan <link rel="preload">. Ini memberitahu browser untuk mulai mengunduh font dengan prioritas tinggi di awal proses loading.

HTML

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

as="font": Memberitahu browser bahwa resource yang di-preload adalah font.
type="font/woff2": Memberikan hint tipe MIME, membantu browser memutuskan apakah ia mendukung format tersebut.
crossorigin: Wajib untuk font yang dimuat dari origin lain (termasuk CDN), karena font seringkali menggunakan CORS.

Hati-hati: Jangan berlebihan dengan preload. Terlalu banyak resource yang di-preload bisa membanjiri browser dan justru memperlambat. Hanya preload font yang benar-benar esensial.

3. Self-Hosting Font (Jika Memungkinkan)

Meskipun layanan seperti Google Fonts sangat nyaman, men-host font sendiri di server Anda dapat memberikan kontrol yang lebih besar dan seringkali performa yang lebih baik.

Kontrol Cache: Anda bisa mengatur cache header dengan lebih agresif.
Kurangi DNS Lookup: Menghilangkan request ke domain pihak ketiga.
HTTP/2 atau HTTP/3: Pastikan server Anda menggunakan protokol yang lebih cepat ini untuk melayani font.

Jika Anda tetap menggunakan Google Fonts, tambahkan &display=swap pada URL font untuk mengaktifkan font-display: swap;.

HTML

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

4. Subset Font

Sebagian besar font menyertakan ribuan glyph untuk berbagai bahasa dan simbol. Jika website Anda hanya menggunakan subset karakter tertentu (misalnya, hanya Latin standar), Anda bisa membuat subset dari font tersebut untuk mengurangi ukuran file.

Google Fonts: Secara otomatis menyediakan subset berdasarkan bahasa yang diminta.
Tool pihak ketiga (misalnya font-subset): Anda bisa menggunakan tool ini untuk membuat subset font Anda sendiri.

5. Gunakan Format Font Modern (`WOFF2`, `WOFF`)

WOFF2 (Web Open Font Format 2.0): Ini adalah format font terbaik saat ini untuk web. Menawarkan kompresi yang sangat efisien (seringkali 30% lebih kecil dari WOFF), didukung oleh hampir semua browser modern.
WOFF (Web Open Font Format): Fallback yang baik jika WOFF2 tidak didukung (jarang terjadi di browser modern).
EOT dan TTF: Hindari penggunaan EOT dan TTF jika tidak diperlukan untuk browser sangat lama.

Gunakan @font-face dengan beberapa format untuk fallback:

CSS

@font-face {
  font-family: 'MyWebFont';
  src: url('mywebfont.woff2') format('woff2'), /* Paling prioritas */
       url('mywebfont.woff') format('woff');   /* Fallback */
  font-display: swap;
}

6. Batasi Jumlah Font dan Weight yang Digunakan

Setiap font family atau font weight yang berbeda memerlukan request HTTP dan download terpisah.

Pertimbangkan dengan cermat berapa banyak font family dan font weight yang benar-benar Anda butuhkan.
Misalnya, jika Anda hanya menggunakan regular (400) dan bold (700), jangan sertakan light (300) atau extra-bold (800) jika tidak digunakan.

7. Gunakan System Fonts (Jika Sesuai Desain)

Untuk performa puncak dan TTFB terbaik, pertimbangkan untuk menggunakan font bawaan sistem (system fonts) alih-alih font web kustom. Ini akan menghilangkan kebutuhan untuk mengunduh file font sama sekali.

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

Font ini akan terlihat berbeda di setiap OS, tapi sangat cepat dan reliable.

Baca Juga : Plugin Terbaik untuk Website Multilingual di WordPress

Menguji Optimasi Font Loading Anda

Setelah menerapkan strategi di atas, selalu uji performa website Anda:

Lighthouse / PageSpeed Insights: Perhatikan metrik FCP dan LCP. Lighthouse juga akan memberikan audit spesifik terkait font.
WebPageTest / GTmetrix: Gunakan Waterfall Chart untuk melihat kapan font mulai diunduh dan apakah mereka memblokir rendering.
Chrome DevTools (Network Tab): Filter berdasarkan "Fonts" untuk melihat ukuran dan waktu unduh setiap font file.

Optimasi font loading adalah bagian integral dari optimasi performa website secara keseluruhan. Dengan menerapkan strategi seperti menggunakan font-display: swap;, preloading font kritis, memilih format font modern, men-subset font, dan membatasi jumlah font weight, Anda dapat secara signifikan mempercepat waktu muat website Anda, mengurangi FOIT/FOUT, dan memberikan pengalaman pengguna yang lebih baik dan lebih responsif.