Cara Memasang CSS Google & Awesome Font Fast Loading

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

Untukmengatasi 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:



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: 'MyWebFont';
  url('webfont.woff2') format('woff2'), 
  url('webfont.woff') format('woff'), 
  url('webfont.ttf')  format('truetype'),
}
/* Use that font in a page */
body {
  font-family: 'MyWebFont', 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:

Contoh penerapannya:

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:

DemikianCara 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/).*

reff : http://www.contohblog.com/2015/10/cara-memasang-css-google-awesome-font.html

Related video : Cara Memasang CSS Google & Awesome Font Fast Loading