Cara Optimalkan Pengiriman CSS, Di Template Evo Magz

Sekarang kita akan belajar cara untuk mengurangi dan menghilangkan CSS yang memblokir perenderan di konten untuk template evo magz. Kebetulan saya menggunakan template evo magz pro buatan mas sugeng, template ini terkenal dengan segala fitur yang luar biasa mulai high CTR, mobile dan responsive.

Layaknya para blogger yang lain, saya selalu penasaran dengan template yang saya gunakan, apakah benar bisa memberikan nilai signifikan ketika di lakukan pengujian. ternyata setelah saya melakukan pengujian pada PageSpeed Insights hasilnya sangat memuaskan walaupun masih terdapat beberapa masalah karena penggunaan Javascript dan CSS yang tidak bisa load secara sempurna sehingga menyebabkan pem-blokir-an di konten parush atas.

Salah satu dari CSS yang harus di optimalkan adalah CSS seperti kode bawah ini :

<link href='//fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>

jadi, ketika anda melakukan pengujian menggunakan PageSpeed Tools maka kesalahan dari kode CSS di atas seperti pada gambar di bawah ini :

Untuk mengatasi kesalahan perenderan CSS di atas, kita akan mengoptimalkan pengiriman CSS dengan cara membungkus kode CSS di atas menggunakan javascript sehingga pem-blokir-an perenderan dapat di lakukan secara sempurna.

Silahkan anda copy kode javascript di bawah ini :

<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("//fonts.googleapis.com/css?family=Open+Sans+Condensed:700");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
//]]>
</script>

Buka mode edit HTML, maka anda akan menemukan kode CSS yang akan kita ganti tepat di atas kode "<b:skin><!CDATA[/* ", seperti gambar di bawah ini :

Selanjutnya, silahkan anda hapus atau replace dengan kode javascript yang telah anda copy. Jika semua telah anda lakukan dengan benar, silahkan anda save / simpan perubahan dan lakukan pengujian page PageSpeed Tools untuk melihat, apakah ada perubahan setelah melakukan pengoptimalan CSS atau tidak. Tapi saya yakin, langkah ini akan berhasil karena saya sudah melakukan uji coba pada template evo magz pro yang saat ini saya gunakan dan hasilnya seperti gambar di bawah ini :

kotak subscribe

Subscribe to receive free email updates: