Tuesday, January 05, 2016

Defer Loading CSS Dengan Javascript

defer loading css blogger

Bagaimana Membuat Loading Blog Menjadi Super Cepat ?

Banyak faktor yang mempengaruhi kecepatan loading blog salah satunya adalah css eketernal baik itu google font, font awesome maupun css lainnya yang menggunakan penyimpanan dari pihak ketiga. Secara garis besar semua faktor faktor tersebut jika tidak dioptimalkan akan menimbulkan kritikan dari google guidelines pada saat kita lakukan uji pagespeed khususnya di Google Pagespeed Insight.

Beberapa kritikan yang sering terjadi adalah pada penggunaan ekternal CSS dan Javascript yang berlebihan seperti defer loading javascript, render blocking javascript dan sebagainya. Cara Mengatasi Render Blocking CSS Font Awesome .

Pada kesempatan kali ini saya akan memberikan contoh bagaimana mengoptimalkan kecepatan loading blog agar menjadi lebih ringan dan cepat pada ekternal CSS menggunakan defer loading css.

Baca juga Cara Optimalkan CSS Delivery Blogger

Untuk meningkatkan kecepatan loading blog dengan defer laoding css ini kita menggunakan lazy load Javascript agar nantinya pemuatan css dapat ditunda sementara dan menunggu semua element yang lain terbuka seluruhnya oleh browser.


<script>
var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'EKTERNAL CSS DISINI.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);
</script>

Simpan kode diatas sebelum kode </head> dan ganti EKTERNAL CSS DISINI dengan url css ekternal yang akan di tunda pemuatannya. Untuk menggunakan metode ini disarankan hanya pada css yang berukuran besar saja dan tidak untuk css berukuran kecil. Sedangkan untuk css berukuran kecil anda bisa langsung memasukannya pada template blog dengan internal CSS. Baca juga Cara Membuat Loading Blog Menjadi Super Cepat