Penggunaan font lazim di sebagian besar halaman web dan sering kali disertai kesalahan. Banyak dari kesalahan ini berdampak negatif pada anggaran kinerja web. Artikel ini bertujuan untuk memberikan informasi tentang penggunaan font web dan membantu meningkatkan kinerja web Anda.
Seperti yang ditunjukkan dalam hierarki yang diterapkan saat merender halaman web apa pun, elemen font dapat menunda rendering elemen lain hingga elemen tersebut dimuat. Mengelola penundaan ini dengan benar penting untuk Pergeseran Tata Letak Kumulatif (CLS) dan persepsi pengguna.
Masalah dengan Pemuatan Font
Hingga font halaman dimuat, visibilitas font selama proses rendering HTML dan CSS bervariasi dari satu browser ke browser lainnya. Berikut ringkasan cara berbagai browser menangani situasi ini:
| Browser | Perilaku default jika font belum siap… |
|---|---|
| Tepi | Menggunakan font sistem hingga font siap. Menukar font. |
| Chrome | Akan menyembunyikan teks hingga 3 detik. Jika teks masih belum siap, gunakan font sistem hingga font siap. Menukar font. |
| Firefox | Akan menyembunyikan teks hingga 3 detik. Jika teks masih belum siap, gunakan font sistem hingga font siap. Menukar font. |
| Safari | Menyembunyikan teks hingga font siap. |
Untuk mengatasi masalah ini tanpa bergantung pada perilaku browser, parameter tampilan font diperkenalkan. Saat ini, 92% browser mendukung parameter tampilan font.
Apa Fungsi Tampilan Font?
Selama proses pemuatan halaman, tampilan font dapat bervariasi hingga dimuat sepenuhnya, tergantung pada browser. Misalnya, beberapa versi browser Safari menyembunyikan teks hingga font dimuat. Itu tampilan font: swap Parameter CSS membakukan perilaku ini dengan menampilkan teks menggunakan font sistem hingga file font dimuat. Setelah font dimuat, font sistem ditukar dengan font yang diinginkan. Berikut contoh penggunaannya:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}Pramuat Font
Menggunakan untuk memuat font sebelum jalur render kritis dapat mencegah kesenjangan saat font dimuat.
BONUS: Pendekatan Industri terhadap Penggunaan Font
Menurut data SameTech, mari kita lihat tren dan gambaran penting dunia internet. Grafik pertama di bawah menunjukkan penggunaan font di 10,000 halaman teratas, dan grafik kedua menunjukkan penggunaan font di 100,000 situs teratas. Mari kita periksa grafik ini terlebih dahulu:
Terdapat perbedaan 5% penggunaan Google Font dan Font Awesome antara 10,000 situs teratas dan 100,000 situs teratas. Ini memberitahu kita bahwa 10,000 situs teratas telah mengoptimalkan penggunaan font mereka. Kami merekomendasikan untuk memeriksa ini sebagai topik yang patut diperhatikan. Pertimbangkan bagaimana Anda dapat mengimplementasikan font web dengan solusi Anda sendiri.
BONUS 2: Statistik Penggunaan Google Font dan Font Awesome
Mengacu pada bonus pertama, kami menyarankan untuk memeriksa dua grafik yang menunjukkan jumlah pustaka font yang paling banyak digunakan. Jumlah domain unik di sini melebihi jutaan, dan jutaan ini mewakili pesaing SEO Anda. Menggunakan perpustakaan ini dengan lebih baik dan lebih optimal daripada yang lain dapat membantu Anda menonjol.
Dengan mengikuti tips berikut dan mengoptimalkan penggunaan font, Anda dapat meningkatkan kinerja web dan pengalaman pengguna secara signifikan.
