8 Rahasia Mengoptimalkan Font Web untuk Mengurangi Waktu Loading

Font web adalah alat luar biasa yang dapat menyempurnakan desain situs web dan meningkatkan keterbacaan, tetapi jika tidak digunakan dengan benar, font web juga dapat memperlambat waktu pemuatan situs web Anda.

Bagaimana Font Web Mempengaruhi Performa Situs Web Anda

Saat Anda memuat halaman web, browser Anda harus mengirim permintaan ke server untuk semua sumber daya yang dibutuhkan halaman. Ini termasuk HTML, gambar, dan font. Semakin banyak permintaan yang perlu dilakukan browser Anda, semakin lama waktu yang dibutuhkan untuk memuat halaman Anda.

Di sinilah font web masuk. Jika Anda memiliki terlalu banyak font web di halaman Anda, browser Anda perlu membuat lebih banyak permintaan, yang akan memperlambat waktu pemuatan halaman Anda. Ini tidak hanya buruk bagi pengalaman pengguna, tetapi juga dapat memengaruhi peringkat mesin pencari situs web Anda.

Itulah mengapa penting untuk mengoptimalkan font web Anda. Dengan mengurangi jumlah font yang Anda gunakan, Anda dapat mempercepat waktu muat halaman dan meningkatkan kinerja situs web Anda.

Kabar baiknya adalah mengoptimalkan font web Anda untuk kinerja adalah proses yang cukup mudah. Berikut adalah cara untuk membantu Anda memulai:

1. Audit dan Pantau Penggunaan Font

Langkah pertama adalah mengaudit dan memantau Font yang digunakan di situs web Anda. Ini akan membantu Anda mengidentifikasi font mana yang digunakan dan berapa banyak bandwidth yang digunakan.

Sangat penting untuk menyadari berapa banyak bandwidth yang digunakan setiap Font sehingga Anda dapat memutuskan mana yang akan dipertahankan dan mana yang akan hilang.

Anda dapat menggunakan alat seperti Web Font Loader untuk membantu Anda dalam hal ini. Ini adalah alat sumber terbuka gratis yang membantu Anda memantau bagaimana font Anda dimuat.

Ini juga memungkinkan Anda untuk memuat font secara asinkron sehingga halaman Anda akan tetap dimuat, meskipun beberapa font Anda membutuhkan waktu lebih lama.

2. Subset Sumber Daya Font

Dengan mensubset sumber daya font Anda, Anda dapat secara signifikan mengurangi bandwidth yang digunakan di situs web Anda dan menjadikan pengalaman keseluruhan untuk pengguna Anda lebih cepat dan lebih dapat diandalkan.

Saat Anda membuat subset, Anda hanya memilih karakter yang Anda perlukan dari setiap Font. Dengan cara ini, alih-alih memuat seluruh file font, browser Anda hanya akan memuat karakter yang Anda perlukan untuk halaman atau elemen tertentu yang sedang Anda lihat.

Jika Anda menggunakan layanan font web seperti Typekit atau Google Fonts, Anda dapat membuat subset font Anda dengan memilih kumpulan karakter tertentu saat menyiapkan proyek. Jika Anda menggunakan font yang dihosting sendiri, banyak alat dan skrip hebat yang dapat membantu Anda melakukan hal yang sama.

3. Gunakan Format Font Modern

Tidak semua format font dibuat sama. Beberapa format benar-benar ketinggalan zaman. Itu sebabnya Anda ingin menggunakan format font modern bila memungkinkan. Format ini lebih efisien dan berkinerja lebih baik di seluruh browser.

Apa itu format font modern? Pada dasarnya, itu adalah font yang telah dikompresi dan dioptimalkan untuk web. Mereka memuat dengan cepat dan terlihat bagus di perangkat apa pun. Jadi, bagaimana Anda bisa menggunakannya di situs web Anda?

Ada beberapa cara.

• Salah satunya adalah dengan menggunakan layanan font web yang menyediakan format font modern. Ini adalah opsi termudah, karena layanan ini akan menanggung beban berat Anda.
• Pilihan lainnya adalah menggunakan konverter format font untuk mengonversi font Anda ke format modern. Ini bisa sedikit lebih rumit, tetapi itu sepadan jika Anda ingin menggunakan font khusus di situs web Anda.

4. Memuat Font Web Secara Asinkron

Sekarang, mari beralih ke tip pengoptimalan keempat: memuat font web secara asinkron. Ini adalah cara yang bagus untuk memastikan situs Anda dimuat dengan cepat dan tanpa gangguan.

• Dengan memuat font secara asinkron, Anda dapat memprioritaskan sumber daya halaman lain terlebih dahulu sebelum memuat file font.
• Artinya, dengan membuat sesi antrean permintaan untuk file font web, Anda akan bisa mendapatkan font yang Anda perlukan dengan cara yang teratur dan efisien.
• Ini akan mengurangi waktu yang diperlukan untuk memuat file font, menghasilkan kinerja situs yang lebih cepat dan lancar.
  Agak teknis, tapi untungnya ada banyak tutorial dan sumber daya untuk membantu Anda memulai dengan teknik ini.

5. Terapkan Cookie

Jika Anda ingin lebih mengoptimalkan font web Anda, menerapkan cookie adalah cara terbaik untuk melakukannya. Cookie adalah file data kecil yang disimpan di browser. Mereka dapat digunakan untuk mengingat hal-hal seperti preferensi pengguna, informasi autentikasi, dan lainnya.

Dalam hal font web, cookie dapat membantu mempercepat proses pemuatan font Anda.

• Dengan menambahkan cookie dengan file font yang Anda butuhkan, Anda dapat memberi tahu browser file mana yang akan diunduh terlebih dahulu dan kemudian mengunduh file lain sesuai kebutuhan.
• Ini membantu mengurangi penggunaan bandwidth dan secara signifikan mempercepat waktu pemuatan halaman Anda.

Penting untuk diperhatikan bahwa cookie tidak boleh digunakan dengan setiap sumber daya font halaman–hanya jika diperlukan. Anda tidak perlu terlalu khawatir tentang ini, karena sebagian besar browser akan menyimpan sumber daya font secara mandiri tanpa memerlukan cookie.

6. Batasi Karakter dalam Font

Jika Anda ingin mengoptimalkan font web Anda, penting untuk membatasi jumlah karakter di dalamnya. Semakin sedikit karakter dalam font, semakin kecil ukuran file dan semakin cepat memuat halaman.

Karena itu, membatasi karakter dalam font tidak selalu memungkinkan. Beberapa font mungkin memiliki ratusan atau bahkan ribuan mesin terbang, yang membutuhkan waktu lebih lama untuk dimuat.

Namun, jika Anda tidak membutuhkan semua glyph tersebut, Anda dapat mencoba menggunakan subset Font yang hanya berisi karakter yang Anda perlukan.

7. Gunakan Header Preload

Untuk memperkuat kinerja pemuatan font web dan perenderan yang lancar, tajuk pramuat harus diterapkan sesegera mungkin.

• Header ini membantu browser mengunduh font web lebih cepat, bahkan sebelum CSS dikirimkan.
• Juga, pramuat font web memastikan mereka akan tersedia di cache setelah digunakan dalam proyek.

Gunakan itu untuk mempramuat sumber daya font Anda. Pastikan Anda menggunakan jenis media yang sesuai, seperti font/woff2 atau font/woff, untuk mendeskripsikan sumber daya font saat Anda memuatnya terlebih dahulu. Browser kemudian dapat memprioritaskan sumber daya ini, meskipun tidak segera digunakan dalam proyek Anda.

8. Caching Adalah Kuncinya

Caching sangat penting untuk strategi pengoptimalan font web apa pun. Solusi caching edge utama — seperti Cloudflare dan Amazon CloudFront — memiliki alat yang dapat Anda gunakan untuk meng-cache font web dengan mudah.

Saat menyimpan font web ke dalam cache, mengatur waktu kedaluwarsa yang sesuai adalah penting. Ini akan memastikan bahwa permintaan browser kembali ke lapisan caching Anda dan tidak langsung ke server Anda, menghasilkan waktu pemuatan halaman dan Font yang lebih cepat.

Sebagai aturan praktis, saya biasanya menetapkan waktu kedaluwarsa antara satu dan tiga bulan untuk font yang di-cache, tergantung pada seberapa sering font berubah.

Jika Anda belum menggunakan beberapa solusi caching tepi, saya sangat menyarankan untuk mengimplementasikannya untuk kinerja font yang optimal. Solusi caching tepi meningkatkan kecepatan halaman dan memberikan pengalaman pengguna yang lebih baik secara keseluruhan.

FAQ
1. Apa praktik terbaik untuk mengoptimalkan font web guna mengurangi waktu pemuatan?

• Untuk font web, pertahankan font yang Anda gunakan seminimal mungkin dan gunakan font web yang merupakan sprite.
• Gunakan aturan CSS @font-face, atau terapkan font variabel ke elemen dengan gaya.
• Berikan font cadangan pada font web yang dimuat sebelum Font digunakan dalam lembar gaya.
• Cobalah cara-cara yang disebutkan ini untuk mengoptimalkan situs web Anda.

2. Bagaimana cara memastikan bahwa font web dikompresi dengan benar untuk mengurangi waktu pemuatan?
Untuk mengoptimalkan situs web Anda agar waktu muat optimal, lihat font web. Pelajari lebih lanjut tentang font web dengan sumber daya ini:

* [Font web: primer](https://www.useit.com/alertbox/web-fonts-primer) * [Font web](https://hackernoon.com/web-fonts-whats-the-diff -antara-biasa-dan-tebal-1be219e86e36)
* [Font web: primer](https://www.useit.com/alertbox/web-fonts-primer)

3. Apa alat dan teknik terbaik untuk menguji pemuatan?
Selalu ada ruang untuk peningkatan, dan selalu ada cara untuk menguji pemuatan situs Anda. Anda dapat mengambil bantuan alat seperti PageSpeed ​​Insights dan Google's Lighthouse.

Kesimpulan
Dengan mengikuti tips di artikel ini, Anda akan dapat memilih font yang terlihat bagus di situs web Anda dan memuat dengan cepat tanpa menyebabkan penundaan.

Jadi, tunggu apa lagi? Mulai optimalkan font web Anda hari ini! Anda dapat mencoba Tema SKT jika Anda memerlukan tema WordPress profesional yang tidak memerlukan waktu lama untuk memuat situs web kami.

Pilih dari tema untuk situs web yang mewakili penulis, otomotif, pernikahan, toko roti, blog, perusahaan, dll. Pilih dari paket yang dibuat dengan hati-hati yang sesuai dengan gambaran Anda, atau kami dapat membuat situs web Anda menjadi yang terbaik.