Cara Memasang Google Font dan Font Awesome Fast Loading di Blog

Baca Juga

Cara Memasang Google Font dan Font Awesome Fast Loading untuk Mengatasi Render-Blocking CSS File. Mempercepat Loading Blog. 

SAAT kita ngecek loding time atau fast loadin-tidaknya blog kita di PageSpeed Insights Google atau di GT Metrix, suka muncul peringatan atau rekomendasi "Remove render-blocking JavaScript/CSS File".

Untuk mengatasi render-blocking js file, kita bisa pasang javascriptnya langsung di template, atau simpan sendiri misalnya di Your Java Script.

CB belum menemukan cara terefektif mengatasi render-blocking js selain "mengekstrak" langsung di template. Jika isi file js-nya banyak banget, CB biarkan saja apa adanya. Yang penting, blog kita harus loading di bawah 4 detik biar disukai Google dan user!

Untuk mengatasi render-blocking CSS file, sudah banyak yang berbagi triknya, misalnya Got Know How dan Filament Group.

Beberapa blog dan template yang fast loading, CB "intik", juga menggunakan cara ini untuk mengatasi render-blocking CSS file dan membuat blognya ringan alias tampik cepat.

Jika kita menggunakan Google Font, misalnya Oswald, maka kita diharuskan menyimpan link css font tersebut di template, seperti ini:

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

Masalahnya, link itulah yang membuat file css jadi "render blocking" alias "terhambat" yang memperlambat loading blog.

Dulu, hal itu bisa diatasi dengan kode @font-face seperti ini:

/* Define a custom web font */ @font-face { font-family: &#039;MyWebFont&#039;; url(&#039;webfont.woff2&#039;) format(&#039;woff2&#039;), url(&#039;webfont.woff&#039;) format(&#039;woff&#039;), url(&#039;webfont.ttf&#039;) format(&#039;truetype&#039;), } /* Use that font in a page */ body { font-family: &#039;MyWebFont&#039;, sans-serif; }

Namun, sayangnya kebanyakan browser default bermasalah dengan si @font-face ini. 

Cara Memasang Google Font Fast Loading

Maka, untuk mengatasinya, kita bisa menggunakan kode seperti di bawah ini untuk mengatasi render-blocking css file di template blog untuk loading yang lebih cepat.

Pasang di atas kode </head>

<script> //<![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("LINK CSS 1 DI SINI");loadCSS(&quot;LINK CSS 2 DI SINI");loadCSS("LINK CSS 3 DI SINI"); //]]> </script>

Contoh penerapannya:

<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("https://fonts.googleapis.com/css?family=Droid+Sans");loadCSS("http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700");loadCSS("http://fonts.googleapis.com/css?family=Oswald:400,700"); //]]> </script>

Itu kode yang CB gunakan. Jika Anda hanya menggunakan satu jenis Google Fonts, tentu hanya satu link yang digunakan. Link CSS font filenya diberikan Google Font setelah kita pilih.

Cara Memasang Font Awesome Fast Loading

Font Awesome menjadi salah satu "trend" desain blog. Dengan "huruf yang mengagumkan" ini, kita bisa memasang gambar ikon di blog tanpa upload gambar atau pasang link image.

Tentu, ini akan membuat blog kita lebih fast loading dibandingkan pake gambar (image). Untuk memasang link font-awesome fast loading sekaligus mengatasi render blocking CSS, gunakan salah satu kode berikut ini.

Simpan di atas kode </head>

Kode #1

<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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Kode #2

<script type="text/javascript"> (function() { var css = document.createElement('link'); css.href = 'https://use.fontawesome.com/releases/v5.1.0/css/all.css'; css.rel = 'stylesheet'; css.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(css); })(); </script>

Kode #3

<link rel="stylesheet" href="https://cdnjs.Cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

Kode#4

Jika digabungkan dengan link ke Google Font --misalnya Font Droid Sans dan Oswald.

<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("https://fonts.googleapis.com/css?family=Oswald:300,400,500,600");
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Demikian Cara Memasang Google Font dan Font Awesome Fast Loading di Blog untuk mengatasi Render Blocking CSS. Biar blog lebih cepat.

Good Luck & Happy Blogging! (www.contohblog.com).*