Ukuran font mungkin terlihat seperti detail kecil, tapi ternyata memiliki pengaruh yang signifikan terhadap performa website secara keseluruhan, terutama pada waktu loading dan user experience. Pemilihan dan implementasi font yang tepat bisa membuat perbedaan besar dalam seberapa cepat situsmu terasa bagi pengguna.

1. Ukuran File Font (Paling Berdampak)

Ini adalah aspek paling langsung dari ukuran font yang memengaruhi performa. Saat kita bicara "ukuran font", kita juga harus mempertimbangkan ukuran file font itu sendiri.

• Setiap Font Family dan Weight adalah File Terpisah:

  • Setiap jenis font (misalnya, Open Sans) yang kamu gunakan adalah file terpisah yang harus diunduh oleh browser.

  • Lebih dari itu, setiap weight (misalnya, Regular, Bold, Italic, Light) dari font family yang sama juga merupakan file terpisah. Jika kamu menggunakan Open Sans Regular, Open Sans Bold, dan Open Sans Italic, itu berarti browser perlu mengunduh tiga file font berbeda.

Semakin banyak file font yang harus diunduh, semakin lama waktu loading initial halaman. Ini juga meningkatkan jumlah request HTTP, yang membebani server dan bandwidth.

Jika font kustom berukuran besar atau lambat diunduh, browser mungkin menampilkan teks menggunakan font default sistem (FOUT) lalu menggantinya dengan font kustom setelah dimuat, atau bahkan menyembunyikan teks (FOIT) sampai font kustom siap. Ini bisa mengganggu pengalaman pengguna.

Baca Juga : Cara Mengurangi Waktu Loading Website

2. Pengaruh pada Layout Shift (CLS - Cumulative Layout Shift)

Cumulative Layout Shift (CLS) adalah salah satu metrik Core Web Vitals Google yang mengukur stabilitas visual halaman. Perubahan layout yang tidak terduga, seperti font yang memuat terlambat dan menyebabkan teks tiba-tiba mengubah ukuran atau posisi elemen lain, akan berdampak negatif pada skor CLS-mu.

Ketika browser pertama kali merender halaman, ia mungkin menggunakan font default sistem. Setelah font kustom diunduh dan diterapkan, ukuran karakter dan spasi bisa berubah, menyebabkan seluruh layout halaman bergeser. Ini sangat menjengkelkan bagi pengguna yang mungkin sedang mencoba membaca atau berinteraksi dengan elemen lain.

3. Pengaruh pada Initial Render dan First Contentful Paint (FCP)

• Blocking Rendering: Browser seringkali harus menunggu font diunduh dan siap sebelum bisa merender teks. Ini berarti font bisa menjadi render-blocking resource (sumber daya yang menghalangi rendering).

• Dampak pada FCP: Jika teks adalah bagian penting dari konten above the fold, font yang lambat dimuat akan menunda First Contentful Paint (FCP), yaitu waktu ketika konten pertama kali terlihat oleh pengguna.

Baca Juga : Tools untuk Analisis Performa Website Jadi Lebih Cepat dan Responsif

4. Pengaruh pada User Experience dan SEO

• Kekecewaan Pengguna: Pengguna tidak suka menunggu. Situs yang lambat karena font besar atau layout shift yang mengganggu dapat membuat pengunjung frustrasi dan pergi.

• Peringkat SEO: Kecepatan website dan stabilitas visual (melalui Core Web Vitals) adalah faktor penting dalam peringkat SEO Google. Font yang tidak dioptimalkan dapat menurunkan skor ini dan berdampak pada visibilitas situsmu di hasil pencarian.

Baca Juga : Cara Meningkatkan Peringkat Website di Google

Cara Mengoptimalkan Penggunaan Font untuk Performa

Untuk mengurangi pengaruh negatif ukuran font terhadap performa, terapkan strategi berikut:

1. Batasi Jumlah Font Family dan Weight:

   • Idealnya, gunakan 1-2 font family saja.

   • Pilih weight yang benar-benar dibutuhkan (misalnya, Regular dan Bold). Hindari mengimpor semua weight jika tidak digunakan.

   • Tool seperti Google Fonts sering menawarkan opsi untuk memilih weight spesifik yang ingin kamu embed.

2. Gunakan Format Font Modern (WOFF2):

   • WOFF2 adalah format font web yang paling efisien dan paling banyak didukung browser modern. Ia menawarkan kompresi yang sangat baik.

   • Sertakan fallback ke WOFF atau TTF untuk browser lama jika perlu, tapi prioritaskan WOFF2.

3. Subset Font:

   • Jika kamu hanya menggunakan karakter tertentu dari suatu font (misalnya, hanya huruf Latin dan angka, bukan karakter khusus lainnya), kamu bisa membuat subset font yang hanya berisi karakter yang dibutuhkan. Ini secara drastis mengurangi ukuran file font.

   • Beberapa font provider atau tool optimasi font memungkinkanmu melakukan ini.

4. Self-Host Font (dengan Hati-hati):

   • Meskipun menggunakan layanan seperti Google Fonts itu mudah, meng-host font di server-mu sendiri bisa memberikan kontrol lebih besar atas caching dan mengurangi request ke domain eksternal.

   • Pastikan font di-host di CDN dan diatur browser caching-nya dengan tepat.

5. Gunakan font-display: swap:

   • Properti CSS font-display menentukan bagaimana browser akan menampilkan font sebelum font kustom dimuat.

   • font-display: swap adalah yang paling direkomendasikan. Ini akan menampilkan font default sistem terlebih dahulu (FOUT) agar teks dapat segera dibaca, lalu "menukar" dengan font kustom setelah dimuat. Ini meminimalkan invisible text dan membantu FCP.

   CSS

   @font-face {
     font-family: 'YourCustomFont';
     src: url('yourcustomfont.woff2') format('woff2');
     font-display: swap; /* Penting! */
   }
   

6. Preload Font Kritis:

   • Untuk font yang sangat penting untuk konten above the fold, kamu bisa memberitahu browser untuk memuatnya lebih awal dengan rel="preload".

   • Gunakan dengan bijak, karena terlalu banyak preload bisa membebani browser.

   HTML

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

7. Optimalkan Render Blocking Resources:

   • Pastikan CSS yang memuat font tidak memblokir rendering terlalu lama. Gunakan teknik Critical CSS untuk inline CSS yang diperlukan untuk above the fold.

Meskipun ukuran font (dalam poin atau piksel) memengaruhi layout dan ukuran kotak teks, pengaruh terbesar pada performa website datang dari ukuran file font itu sendiri dan bagaimana font tersebut dimuat. Dengan mengoptimalkan file font dan strategi pemuatannya, kamu bisa menjaga desain visual tetap menarik tanpa mengorbankan kecepatan.