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.

Berlangganan

Berlangganan posting : Daftarkan alamat email kamu untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

Silahkan tuliskan komentar kamu yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan akan saya tinjau terlebih dahulu sebelum disetujui, ayo saling berdiskus dengan sesama pengguna INTERNET.

How to style text in Disqus comments:Show
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parse Tool Hide Parse Tool


strong em u strike
pre code pre code spoiler