Cara Pasang CSS Google Dan Awesome Font Fast Loading




Cara Pasang CSS Google Dan Awesome Font Fast Loading

Cara Pasang CSS Google Dan Awesome Font Fast Loading

Selamat siang sahabat blogger, kembali lagi saya akan share mengenai cara pasnag css google dan awesome font past loading, tentunya jika kita sudah membangun sebuah blog dan sudah banyak mengisi postingan mapun artikel yang bermanfaat, tidak terlepas dari ketakutan kita terhadap blog milik kita.

Loh kenpa mesti takut si mas? ...

Nah disini yang saya katakan takut dalam artian, blog nya nanti pada saat kita mengecek loading time atau fast loading tidaknya pada blog kita di PageSpeed InsightsGoogle atau di GT Metrix, dan bisa suka muncul peringatan atau rekomendasi "Remove render-blocking JavaScript/CSS File". itu dia maksud saya ya, hehe.

Apabila ingin mengatasi render-blocking js file, anda bisa langsung memasang javascriptnya di template, atau simpan sendiri misalnya di Your Java Script.

Namun saya sendiri belum menemukan cara efektif untuk mengatasi render-blocking js selain mengekstrak langsung di template. Tetapi jika isi file js-nya terlalu banyak anda bisa biarkan saja apa adanya, yang penting blog milik kita  loading harus di kisaran di bawah 4 detik bro, tujuannya agar bisa disukai Google maupun user!

# Untuk Atasi Render-Blocking CSS File

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

Ada terdapat beberapa blog dan template yang fast loading,  mereka juga menggunakan cara seperti ini tujuannya untuk mengatasi render-blocking CSS file serta bisa membuat blognya ringan dan cepat loadingnya

Apabila anda menggunakan Google Font, contoh misalnya Oswald, maka anda diharuskan menyimpan sebuah link css font tersebut di dalam template, anda bisa melihat link  seperti di bawah ini.

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


Nah yang menjadi masalah blog kita sering terasa loading blog melambat adalah di karenakan ada file css tersebut yang membuat "render blocking".

# Di bawah ini  kode @font-face nya,
/* 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;
}
Note: Tetapi sayangnya kebanyakan browser default telah bermasalah dengan si @font-face ini.  jadi anda bisa mengabaikan nya saja cara pertama ini.
# Untuk cara kedua kita bisa memakai kode seperti di bawah ini agar bisa diatasi render-blocking css file di template blog milik kita.
<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>

Bagi anda yang tidak mengetahui cara penerapannya, anda bisa melihat contoh yang saya berikan agar anda bisa lebih paham untuk cara penerapannya di template blog milik anda.

<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>
Jika Anda hanya ingin memakai satu jenis Google Fonts, maka tentu hanya satu link saja yang dipakai. Link CSS font filenya diberikan Google Font setelah kita pilih.
# Cara Mengatasi Render Blocking CSS Font Awesome
Pasti anda sudah tidak asing lagi dengan Font Awesome menjadi salah satu trend desain blogger, yang mana dengan sebuah huruf yang mengagumkan ini, dan kita dapat memasang sebuah gambar ikon di blog tanpa kita harus upload gambar atau pasang link image segala. dengan cara ini tentu saja akan membuat blog kita terasa akan lebih fast loading dibandingkan dengan menggunakan sebuah gambar/image.

Jika anda ingin memasang link font-awesome fast loading, maka anda bisa gunakan kode di bawah 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>

Bagaimana mudah bukan untuk membuat nya, demikian tutorial saya mengenai cara pasang  CSS Google & Awesome Font Fast Loading. selamat mencoba dan bisa bermanfaat untuk anda.


Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect