WebFont Loading Strategy: Cara Efektif Mengurangi FOIT & FOUT

Kecepatan website bukan lagi sekadar faktor teknis, tetapi menjadi penentu utama ranking di Google dan konversi bisnis. Salah satu penyebab website terasa lambat tanpa disadari adalah cara memuat webfont. Masalah seperti FOIT (Flash of Invisible Text) dan FOUT (Flash of Unstyled Text) sering terjadi dan berdampak langsung pada pengalaman pengguna.

Di artikel ini, tim PT Code Hero Indonesia akan membahas secara mendalam strategi WebFont Loading yang optimal, teknik teknis terbaik, serta dampaknya terhadap SEO dan Core Web Vitals.

Apa Itu FOIT dan FOUT?

1. FOIT (Flash of Invisible Text)

FOIT terjadi ketika browser menyembunyikan teks sementara menunggu font selesai diunduh. Akibatnya, pengguna melihat area kosong selama beberapa detik.

2. FOUT (Flash of Unstyled Text)

FOUT terjadi ketika teks langsung tampil menggunakan font default, lalu berubah setelah webfont selesai dimuat.

Mengapa WebFont Loading Penting untuk SEO?

• Mempengaruhi Largest Contentful Paint (LCP)
• Mengurangi Cumulative Layout Shift (CLS)
• Meningkatkan Time to Interactive (TTI)
• Meningkatkan pengalaman pengguna (UX)

Google sangat memperhatikan stabilitas tampilan dan kecepatan rendering. Font yang dimuat tidak optimal dapat merusak skor Core Web Vitals.

Strategi WebFont Loading Terbaik

1. Gunakan font-display: swap

Properti CSS ini memungkinkan teks langsung tampil dengan fallback font, lalu diganti saat font utama siap.

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/customfont.woff2') format('woff2');
  font-display: swap;
}

2. Preload Font

Gunakan preload agar browser memprioritaskan file font.

3. Gunakan Format WOFF2

Format WOFF2 lebih kecil dan lebih cepat dibanding TTF atau OTF.

4. Batasi Variasi Font

Gunakan maksimal 2–3 variasi weight untuk menjaga performa.

5. Self-Hosted Font

Hosting font di server sendiri mengurangi ketergantungan eksternal dan meningkatkan kontrol performa.

Dampak Terhadap Core Web Vitals

Strategi WebFont Loading yang benar akan meningkatkan:

1. LCP lebih cepat
2. CLS lebih stabil
3. UX lebih profesional

Best Practice untuk Website Bisnis di Indonesia

Bagi perusahaan dan UMKM di Indonesia, optimasi font sering terabaikan. Padahal, performa website berbanding lurus dengan konversi.

• Audit performa rutin
• Gunakan CDN lokal
• Optimasi caching
• Minifikasi CSS

Kesimpulan

Mengurangi FOIT dan FOUT bukan hanya soal tampilan, tetapi strategi teknis penting dalam optimasi SEO dan performa website.