Saturday, May 16, 2015

Mengatasi Render Blocking Font Awesome

render blocking font awesome

Mengatasi Render Blocking CSS Font Awesome - Setelah sebelumnya saya membuat artikel tentang cara mengatasi render blocking jQuery di blog cantik dan cepat serta cara optimalkan css delivery blogger terkait masalah speed loading di GTMetrix dan Google Speed Insight. Nah kali ini masih seputar kecepatan loading blog, saya akan memberikan cara mengatasi render blocking CSS pada Font Awesome. Meskipun hanya terlihat satu baris kecil eksternal Css saja namun ukuran dari font awesome ini cukuplah besar yaitu mencapai 85 kb.

1. Menggunakan Inline CSS Font Awesome

Contoh penggunaannya biasanya seperti ini :

<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet"/>

Caranya klik link css eksternal pada font awesome diatas pada tab browser kemudian copy semua codenya ke dalam notepad, setelah itu silakan pilih efek font awesome yang ingin kita gunakan saja.

Misalnya :

.fa-envelope-square:before{content:&quot;\f199&quot;} untuk font envelope square
.fa-comments:before{content:&quot;\f086&quot;} untuk font comments
dan sebagainya

Kemudian masukkan kode css yang sudah di seleksi tersebut ke dalam template blogger sebelum kode ]]></b:skin> atau </style> jika anda sudah menyembunyikan css blogger.

Sebagai contoh kodenya seperti dibawah ini :


@font-face{font-family:&#39;FontAwesome&#39;;src:url(&#39;http://netdna.bootstrapcdn.com/font-awesome/4.1.0/fonts/fontawesome-webfont.eot?v=4.0.3&#39;);src:url(&#39;http://netdna.bootstrapcdn.com/font-awesome/4.1.0/fonts/fontawesome-webfont.eot?#iefix&amp;v=4.1.0&#39;) format(&#39;embedded-opentype&#39;),url(&#39;http://netdna.bootstrapcdn.com/font-awesome/4.1.0/fonts/fontawesome-webfont.woff?v=4.1.0&#39;) format(&#39;woff&#39;),url(&#39;http://netdna.bootstrapcdn.com/font-awesome/4.1.0/fonts/fontawesome-webfont.ttf?v=4.1.0&#39;) format(&#39;truetype&#39;),url(&#39;http://netdna.bootstrapcdn.com/font-awesome/4.1.0/fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular&#39;) format(&#39;svg&#39;);font-weight:normal;font-style:normal}.fa,#searchnya button:before,.comments .comments-content .icon.blog-author:before,#searchsubmit:before,.indexsocial&gt;a:before{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul&gt;li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-search:before{content:&quot;\f002&quot;}.fa-envelope-o:before{content:&quot;\f003&quot;}.fa-heart:before{content:&quot;\f004&quot;}.fa-user:before{content:&quot;\f007&quot;}.fa-check:before{content:&quot;\f00c&quot;}.fa-gear:before,.fa-cog:before{content:&quot;\f013&quot;}

2. Menggunakan Javascript

Masukkan kode dibawah ini sebelum tag </body>

<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.2.0/css/font-awesome.min.css");
//]]>
</script>

Demikian sedikit tutorial blogger ini semoga bermanfaat agar menjadikan loading blog anda super cepat