Home » » Cara Memasang CSS Google & Awesome Font Fast Loading

Cara Memasang CSS Google & Awesome Font Fast Loading

percepat loading blog
Mengatasi Render-Blocking CSS File untuk Mempercepat Loading Blog. Cara Memasang CSS Google & Awesome Font Fast Loading.

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!

Mengatasi Render-Blocking CSS File

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. 

Maka, untuk mengatasinya, kita bisa menggunakan kode seperti di bawah ini untuk mengatasi render-blocking css file di template blog:


<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.

Mengatasi Render Blocking CSS Font Awesome

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, gunakan kode berikut ini:


<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("//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>
Demikian Cara Memasang CSS Google & Awesome Font Fast Loading. Lebih jelas, silakan ke dua link sumber di alinea kelima di atas.

Kita juga bisa merujuk ke ExeIdeas soal mengatasi render-blocking css file dan javascript ini. Good Luck! (http://www.contohblog.com/).*

Thanks for reading & sharing Cara Memasang CSS Google & Awesome Font Fast Loading

Previous
« Prev Post

6 comments:

Comment Page:
  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. Thanks buat Tutorialnya...
    Ngebantu banget buat blog saya...

    Semoga Maju Trus Blognya,,,,

    ReplyDelete
  4. gan , untuk pemasangannya bebas atau dimana gan?

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox