Beranda» CSS » Javascript »WebFontConfig: Mengatasi Render Blocking Bundle CSS Fonts
- Oktober 13, 2019
A+ A-

WebFontConfig: Mengatasi Render Blocking Bundle CSS Fonts

WebFontConfig: Mengatasi Render Blocking Bundle CSS Fonts - Pada artikel sebelumnya saya telah mengulas beberapa trik-trik blogging yang membahas tentang bundling css seperti Google Fonts API dan Font Awesome.

Mungkin kamu telah melewatkan-nya jadi silahkan baca disini dan pada artikel ini saya akan kembali menjelaskan hal yang hampir serupa yaitu mengatasi bundling css fonts dengan metode yang berbeda agar teman-teman blogger mendapatkan lebih banyak referensi mengenai cara menghilangkan bundling css tersebut.

Dalam istilah lain WebFontConfig mungkin lebih akrab dikenal dengan WebFont Loader yaitu teknik memuat file css tanpa menyertakan sumber-nya, Cara kerja script WebFontConfig ini juga tidak jauh berbeda dengan script loadcss namun di beberapa hal WebFontConfig mungkin sedikit lebih unggul untuk pengoptimalan speed (Web Performance).

Kelebihan WebFontConfig
  1. WebFontConfig atau WebFont Loader adalah bagian dari Google Hosted Libraries, yang merupakan jaringan distribusi konten untuk perpustakaan JavaScript open-source Google Developers.
  2. Menyajikan durasi cache yang lebih lama dan memangkas waktu pemuatan (loading) yang lebih pendek.
  3. Mudah di gunakan dan sangat membantu dalam pengoptimalan (Optimasi PageSpeed Insights)
  4. Support di banyak browser (hampir semua versi browser)

Script WebFont Configuration

<script type='text/javascript'>
//<![CDATA[
WebFontConfig={custom:{families:["FontAwesome"],urls:["https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"]},google:{families:["Roboto:400,700,300:latin","Oswald:400,700:latin"]}},function(){var t=document.createElement("script");t.src=("https:"==document.location.protocol?"https":"http")+"://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js",t.type="text/javascript",t.async="true";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}();
//]]>
</script>
Tempatkan script WebFontConfig diantara tag <head> dan </head> kemudian ganti sumber css "//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" dengan sumber librarie css yang telah ada disitus anda, jangan lupa sesuaikan juga jenis font "Roboto, Oswald" dengan font web anda.

Jika situs anda menggunakan banyak jenis font, kamu dapat menambahkan sedikit modifikasi script pada bagian "google:{families:["Roboto:400,700,300:latin","Oswald:400,700:latin"]}" menjadi;
[code type="CSS"]example:
google:{families:["Aclonica","Acme","Alegreya"]}[/code]
Artikel ini merupakan jawaban sekaligus solusi untuk cara asynchronously css external, analisa saya mengenai ini "asynchronously css external"  dengan script WebFontConfig, mendapatkan hasil "performa" yang lebih baik dibandingkan dengan internalisasi css. Semoga bermanfaat dan sampai jumpa kembali.
,