Cara Mengatasi Render-Blocking CSS File Google & Awesome Fonts

Kali ini saya akan menjelaskan tutorial bagaimana caranya mengatasi Render-Blocking CSS File Google Fonts dan Font Awesome di Blogger / Blogspot.

Pernah cek blog di PageSpeed Insights Google? Atau di GT Metrix? Biasanya muncul pesan peringatan, "Remove Render-Blocking JavaScript/CSS File".

Varvy.

Pertanyaannya adalah bagaimana cara memperbaiki Error dari Remove Render-Blocking JavaScript/CSS File di blog ini?

Cara Mengatasi Render-Blocking CSS File Google & Awesome Fonts

Ada begitu banyak Template Blogger yang memasang Google Fonts dengan memasang JavaScript (Js) seperti ini:

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

Masalahnya adalah cara penempatan kode seperti di atas-lah yang menyebabkan Remove Render-Blocking JavaScript/CSS File.

Yang kita butuhkan adalah kode ini:

<script type='text/javascript'>
//<![CDATA[
Lokasi JavaScript (Js) di Sini
//]]>
</script>

Dan kode di atas biasanya ditempatkan di atas kode </head>. Contoh cara menggunakannya seperti ini:

<script type='text/javascript'>
//<![CDATA[
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("https://fonts.googleapis.com/css?family=Droid+Sans");loadCSS("http://fonts.googleapis.com/css?family=Oswald:400,700");loadCSS("http://fonts.googleapis.com/css?family=Lato");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Oh iya, sedikit penjelasan ya! Di atas ada 3 jenis Google Fonts dan Font Awesome. Supaya gak bingung, lho. Bagaimana? Mudah, kan?