Cara Menunda (Defer) Parsing Pemuatan Font di Blog

Cara Menunda (Defer) Parsing Pemuatan Font di Blog - Penundaan pemuatan font ini bertujuan untuk mengurangi beban pemuatan blog dari font, sehingga dengan tidak hadirnya font dalam pemuatan utama blog, hal ini akan semakin mempercepat loading blog anda.

Baca Juga : Cara Mengetahui Font yang Dipakai Web / Blog Orang Lain

Dengan teknif defer parsing font ini, membuat font akan dimuat setelah pemuatan utama blog selesai, sehingga hal ini akan menimbulkan efek negatif bagi tampilan blog anda, berupa tampilan blog yang dalam sekian detik tidak akan menampilkan font yang sesuai dengan custom font blog anda, namun selanjutnya font akan kembali normal setelah pemuatan font yang tertunda tersebut selesai dimuat.

Efek negatif teknik akan sangat terasa bila anda mengakses blog anda melalui ponsel dengan browser lawas, custom font yang seharusnya dimuat setelah pemuatan utama selesai, di browser lawas, pemuatan ini tidak terjadi, akibatnya blog gagal menampilkan custom font dan hanya dapat menampilkan web safe font yang tidak menarik.

Namun semua efek negatif ini ada solusinya dan akan tertutupi dengan hasil nilai speed blog anda yang semakin meningkat. Langsung saja kita ke tutorialnya, cara ini sebenarnya bukan untuk platform blog saja, semua platform seperti wordpress, weebly, github juga dapat mengikuti tutorial kali ini.

Menunda Pemuatan (Defer Parsing) Custom Font di Blog

Pertama silahkan masuk ke menu editing HTML blog anda.
Untuk di Blogger = Tema (Theme) >> Edit HTML

Setelah itu silahkan kunjungi Google Font untuk mencari custom font untuk blog anda, namun jika anda sudah memiliki custom font tidak usah mencari lagi. Disini sebagai contoh saya akan menggunakan custom font Roboto dengan Weight 400 dan 700 untuk kemudian saya pasang di blog. Jika kita cari di Google Font, kita akan diberi kode script css font seperti ini.

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 

Sebelum menaruhnya pada blog, kita terlebih dahulu memberikan Javascript Defer Loadingnya, jadinya seperti ini.

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//fonts.googleapis.com/css?family=Roboto:400,700");//]]>
</script>

Ket : Ganti link font yang saya tandai dengan link font milik anda.

Bila anda mempunyai lebih dari satu custom font di blog, anda dapat menambahkan link font lagi pada javascript defer parsing seperti dibawah ini. Sebagai contoh saya menggunakan custom font Material Icon (Font Awesome).

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//fonts.googleapis.com/css?family=Roboto:400,700");loadCSS("https://fonts.googleapis.com/icon?family=Material+Icons");//]]>
</script>

Setelah script selesai dibuat, taruh script tersebut diatas kode </body>. Gunakan...

font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;

Ket : Ganti tulisan yang saya tandai dengan nama font yang anda pakai.

untuk memakai font-nya pada element blog anda. Dengan font-family tersebut, anda dapat menggantikan font Roboto dengan system font bila font Roboto gagal dimuat oleh script defer parsing.

Jika semua sudah selesai, klik Save Template.

Coba buka halaman blog anda, pasti akan terasa lebih cepat dari yang biasanya.

Teknik seperti ini sangat cocok diterapkan untuk blog non-AMP, karena teknik ini benar benar membuat blog anda loading seperti tanpa adanya font. Jika di AMP mungkin kita hanya menggunakan teknik @font-face untuk memaksimalkan pemuatan font di blog.

Sekian tutorial saya tentang Cara Menunda (Defer) Parsing Pemuatan Font di Blog kali ini, semoga dapat bermanfaat bagi anda semua, dan selamat mencoba ^_^.