WEB-PERFORMANCE FRONTEND PERFORMANCE-OPTIMIZATION CORE-WEB-VITALS USER-EXPERIENCE WEB-DEVELOPMENT CSS FONTS BROWSER-RENDERING SEO SPEED-OPTIMIZATION

Optimasi Font di Web: Mempercepat Loading dan Meningkatkan Pengalaman Pengguna

⏱️ 9 menit baca
👨‍💻

Optimasi Font di Web: Mempercepat Loading dan Meningkatkan Pengalaman Pengguna

1. Pendahuluan

Pernahkah Anda membuka sebuah website, melihat teksnya tiba-tiba berubah, atau bahkan menghilang sesaat sebelum muncul kembali? Itu adalah efek yang sering disebut “Flash of Unstyled Text” (FOUT) atau “Flash of Invisible Text” (FOIT), dan itu semua berhubungan dengan bagaimana browser memuat dan merender font di website kita.

Sebagai seorang developer, kita tahu betapa pentingnya performa web. Tidak hanya untuk SEO dan ranking di mesin pencari, tetapi juga untuk memberikan pengalaman pengguna yang mulus dan menyenangkan. Font, meskipun sering diabaikan, adalah salah satu aset krusial yang dapat secara signifikan mempengaruhi kecepatan loading dan Core Web Vitals (terutama Largest Contentful Paint/LCP dan Cumulative Layout Shift/CLS) website Anda.

Artikel ini akan membahas secara mendalam berbagai strategi dan praktik terbaik untuk mengoptimalkan loading font di website Anda. Kita akan belajar cara memilih format font yang tepat, mengurangi ukurannya, dan memuatnya secara efisien agar website Anda tidak hanya terlihat bagus, tetapi juga super cepat dan responsif. Mari kita selami!

2. Memahami Cara Browser Merender Font

Sebelum kita masuk ke optimasi, penting untuk memahami bagaimana browser memproses dan merender font. Ketika browser memuat halaman, ia akan melakukan beberapa langkah:

  1. Mengunduh HTML: Browser mulai mengunduh file HTML.
  2. Membangun DOM Tree: HTML diparsing menjadi Document Object Model (DOM).
  3. Mengunduh CSS: Jika ada link ke stylesheet eksternal, browser akan mengunduhnya.
  4. Membangun CSSOM Tree: CSS diparsing menjadi CSS Object Model (CSSOM).
  5. Membangun Render Tree: DOM dan CSSOM digabungkan untuk membuat Render Tree, yang berisi semua elemen yang terlihat dan gayanya.
  6. Memuat Font: Jika ada font kustom yang didefinisikan dalam CSS (@font-face), browser akan mulai mengunduh file font tersebut.

📌 Masalah Umum: FOUT dan FOIT

Kedua efek ini berkontribusi pada metrik Core Web Vitals seperti CLS (Cumulative Layout Shift) dan LCP (Largest Contentful Paint), yang sangat penting untuk SEO dan UX. Tujuan kita adalah meminimalkan atau bahkan menghilangkan efek ini.

3. Strategi Pemilihan dan Format Font

Memilih format font yang tepat adalah langkah pertama dalam optimasi. Tidak semua format font diciptakan sama. Beberapa lebih efisien dalam ukuran file, sementara yang lain memiliki kompatibilitas yang lebih luas.

✅ Prioritaskan WOFF2:

❌ Hindari TTF/OTF untuk Web:

Contoh Deklarasi @font-face dengan Prioritas:

@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/mycustomfont.woff2') format('woff2'),
       url('/fonts/mycustomfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Akan dijelaskan di bagian selanjutnya */
}

💡 Pertimbangkan Variable Fonts: Variable fonts adalah revolusi dalam tipografi web. Alih-alih mengimpor beberapa file font untuk setiap varian (misalnya, Light, Regular, Bold, Italic), variable font memungkinkan Anda mengimpor satu file font yang berisi semua varian tersebut. Ini dapat secara drastis mengurangi ukuran total file font yang harus diunduh, terutama jika Anda menggunakan banyak variasi font.

4. Mengurangi Ukuran File Font (Subsetting)

Salah satu cara paling efektif untuk mempercepat loading font adalah dengan mengurangi ukuran file-nya. Kebanyakan font komersial atau gratis yang Anda unduh mengandung ribuan glyph (karakter) yang mencakup berbagai bahasa dan simbol. Namun, aplikasi Anda mungkin hanya menggunakan sebagian kecil dari karakter tersebut.

🎯 Subsetting: Subsetting adalah proses menghilangkan glyph yang tidak digunakan dari file font. Misalnya, jika website Anda hanya menggunakan alfabet Latin dan angka, Anda dapat menghilangkan karakter Cyrillic, Greek, atau simbol-simbol khusus lainnya.

Cara Melakukan Subsetting:

# Contoh penggunaan glyphhanger untuk subsetting
# Mengambil semua karakter dari halaman HTML dan membuat subset font
npx glyphhanger --subset=*.html --output=mycustomfont-subset.woff2 --formats=woff2 --font=mycustomfont.woff2

⚠️ Hati-hati dengan Dynamic Subsetting: Beberapa layanan font (seperti Google Fonts) menyediakan subsetting dinamis berdasarkan teks yang digunakan. Namun, ini bisa menyebabkan masalah performa jika teks yang dirender berubah, karena browser mungkin perlu mengunduh subset baru. Untuk performa terbaik, lakukan subsetting statis yang mencakup semua karakter yang mungkin Anda gunakan.

5. Memuat Font Secara Efisien dengan font-display

Properti CSS font-display adalah senjata utama Anda untuk mengontrol bagaimana browser menangani FOUT dan FOIT. Properti ini mendefinisikan bagaimana font akan ditampilkan atau disembunyikan tergantung pada apakah ia telah diunduh dan siap digunakan.

font-display memiliki beberapa nilai:

Contoh Penggunaan font-display: swap:

@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/mycustomfont.woff2') format('woff2'),
       url('/fonts/mycustomfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* ✅ Rekomendasi untuk mencegah FOIT dan mengurangi CLS */
}

Dengan font-display: swap, Anda memastikan bahwa pengguna selalu melihat konten teks Anda secepat mungkin, meskipun dengan font default, sehingga menghindari masalah FOIT dan mengurangi CLS.

6. Menggunakan Resource Hints untuk Font (Preload, Preconnect)

Resource hints adalah instruksi yang dapat Anda berikan kepada browser untuk memprioritaskan pengunduhan sumber daya tertentu. Ini sangat berguna untuk font kustom yang merupakan sumber daya penting.

Kombinasi Terbaik: Gunakan preconnect untuk domain font (jika di-host eksternal) dan preload untuk font-font kritis yang harus segera terlihat.

7. Self-Hosting vs. Google Fonts/CDN

Mana yang lebih baik? Self-hosting font atau menggunakan layanan seperti Google Fonts/CDN? Keduanya memiliki pro dan kontra.

Self-Hosting Font: ✅ Pro:

❌ Kontra:

Google Fonts / CDN Pihak Ketiga: ✅ Pro:

❌ Kontra:

Rekomendasi: Untuk performa terbaik dan kontrol maksimal, self-hosting font adalah pilihan yang paling direkomendasikan, terutama jika Anda sudah memiliki CDN sendiri. Pastikan untuk mengimplementasikan semua strategi optimasi yang telah kita bahas (WOFF2, subsetting, font-display: swap, preload).

Jika kemudahan adalah prioritas utama dan Anda tidak menghadapi masalah performa yang signifikan, Google Fonts tetap merupakan pilihan yang baik, tetapi pastikan untuk menggunakan preconnect dan font-display: swap untuk meminimalkan dampak negatifnya.

Kesimpulan

Optimasi font adalah bagian integral dari membangun website yang cepat dan memberikan pengalaman pengguna yang luar biasa. Dengan memahami bagaimana browser merender font dan menerapkan strategi yang tepat, Anda dapat secara signifikan mengurangi waktu loading, mencegah pergeseran layout yang mengganggu, dan meningkatkan Core Web Vitals Anda.

Mulai dari memilih format WOFF2 yang efisien, melakukan subsetting untuk mengurangi ukuran file, hingga menggunakan font-display: swap dan resource hints seperti preload dan preconnect, setiap langkah kecil berkontribusi pada website yang lebih baik. Jangan biarkan font menjadi hambatan bagi performa website Anda. Terapkan praktik terbaik ini, dan lihat sendiri bagaimana website Anda menjadi lebih cepat dan lebih responsif!

🔗 Baca Juga