Mengatasi Blocking Render CSS Font Awesome dan Font Google

Mengatasi Blocking Render CSS Font Awesome dan Font Google
AksesBlog.com - 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.

Memasang Script Render CSS

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

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>
Untuk cara penggunaannya kamu hanya perlu mengganti yang saya beri warna kuning itu adalah link font google dan font awesome yang ingin kita render pemuatannya.

Dengan cara ini saya berhasil membuat blog saya memiliki loading yang lumayan cepet, padahal sangat banyak javascript yang saya gunakan, dan saya optimasi dengan lazyload image, karena memang saya menggukana img lumayan besar.
Mengatasi Blocking Render CSS Font Awesome dan Font Google
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. Selamat mencoba.
Mas Iwan
Mas Iwan Hanya seorang blogger biasa yang gemar menulis, dan mencoba berbagi informasi dan pengalaman yang mungkin bisa bermanfaat kepada pembaca blog sederhana saya ini.

Tidak ada komentar untuk "Mengatasi Blocking Render CSS Font Awesome dan Font Google"

Berlangganan via Email