Mengatasi Blocking Render CSS Font Awesome dan Font Google

Daftar Isi

Sebagai seorang blogger yang gemar ngoprek template sendiri tentunya saya selalu memikirkan bagaimana caranya agar template yang saya oprek ini bisa dengan mudah diakses dan dengan loading yang terbilang ringan.

Dalam blog setidaknya sering kita jumpai Font Google dan Font Awesome, keduanya adalah font yang wajib ada dalam sebuah template yang modern saat ini. Blocking render ini dimaksudkan untuk membuat antrian loadCSS manjadi lebih dinamis yang berdampak pada loading blog akan menjadi lebih baik.

Render Menggunakan Script

1. Sebagai tambahan render ini bisa kamu cek melalui pagespeed insight, agar kamu tau adakah js maupun css yang masih dirender secara tidak dinamis.
2. Berikut kode scriptnya :

   <script>
   //<![CDATA[
   function loadCSS(e, t, n) {
       "use strict";
       var o=window.document.createElement("link"),
       i=t||window.document.getElementsByTagName("script")[0];
   
       o.rel="stylesheet",
       o.href=e,
       o.media="only x",
       i.parentNode.insertBefore(o, i),
       setTimeout(function() {
               o.media=n||"all"
           }
   
       )
   }
   
   loadCSS("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
   loadCSS("//fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i|Titillium+Web:300,300i");
   //]]>
   </script>

3. Untuk cara penggunaannya kamu hanya perlu mengganti URL itu adalah link font google dan font awesome yang ingin kita render pemuatannya. Lebih spesifik kamu bisa mengganti bagian berikut ini saja:

   loadCSS("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
   loadCSS("//fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i|Titillium+Web:300,300i");
   

   URL linknya saja ya yang perlu kamu ganti atau sesuaikan dengan link css yang kamu ingin gunakan.

Cara lain untuk menghilangkan render Font Google adalah dengan cara memasang langsung source filenya ke template yang kamu gunakan, untuk lebih jelasnya kamu bisa menyimak tulisan saya perihal font linkmagz

Baca Juga: loading

Dengan cara ini saya berhasil membuat blog saya memiliki loading yang lumayan cepat, padahal sangat banyak javascript yang saya gunakan, dan saya optimasi dengan lazyload image, karena memang saya menggunakan img lumayan besar. Kamu bisa meletakkan script itu dimanamun kamu mau, ntah itu diatas kode </body> maupun diatas kode </head> kamu bisa coba satu persatu yang mana mimiliki performa yang baik untuk blog kamu sendiri.