October 13, 2015

Cara Memasang Google Font dan Font Awesome Fast Loading di Blog

October 13, 2015

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

Cara Memasang Google Font dan Font Awesome Fast Loading di 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).*


Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

6 comments on Cara Memasang Google Font dan Font Awesome Fast Loading di Blog

  1. wah sangat bernafaat, belajar banyak dari blog cb, makasi bro...

    ReplyDelete
  2. Mas.. ini terkait menyertakan link javascript font pada bagian <![CDATA[ .

    Di genesisseo itu kan banyak banget ya kode Render-Blocking CSS File atau awalan <![CDATA[ ini.

    Bingung juga sih. Kode javascript yang diawali dengan function loadCSS(e, t, n) itu tinggal dimasukkan alias copas begitu saja atau disematkan ditengah-tengah pada salah satu kelompok <![CDATA[ ???

    Atau memang sudah tersedia sebelumnya? Terima kasih. Semoga ngeh dengan apa yang ditanyakan heuheu.

    ReplyDelete
    Replies
    1. Genesis SEO intinya sudah fast loading, tapi kalo mau coba, silakan, backup dulu templatenya

      Delete
    2. Iya mas fast loading bingits. Saya pernah tuh pasang 8 widget, 5 di sidebar (kolom pencarian tidak termasuk) dan 3 di footer. Cetar, tetep fast.

      Siap..nanti saya oprek habis-habisan. Thx mas.

      Delete
  3. gan , untuk pemasangannya bebas atau dimana gan?

    ReplyDelete

Contact Form

Name

Email *

Message *