Mempercepat Loading Blog dengan Cara Remove Render-Blocking JavaScript dan Optimize CSS Delivery

Sobat. Sudah sering kali kita bahas pentingnya sebuah blog atau situs mempunyai kecepatan loading yang bagus (page load time). Selain menggunakan tools senjata ngeblog, kini ada beberapa tools pengukur kecepatan sebuah situs blog langsung dari mbah Google sendiri, yakni
Google Page Speed Insights.

Ketika kita melakukan cek kecepatn loading blog kita melalui Google Page Speed Insights, terkadang muncul pesan atau informasi yang berupa saran perbaikan. Contohnya saja "Harus Diperbaiki" (Should Fix) "Remove Render-Blocking JavaScript".

 Hal itu terjadi ketika di dalam template yang kita gunakan terdapat JavaScriptnya. Selain daripada itu, Google juga memberi tahu kita Cara Mengatasi Render-Blocking JavaScript itu sebagai berikut:

Ubah kode JavaScriptnya dari yang semula:
<script type="text/javascript" src="kode.js"></script>

Menjadi:

<script type="text/javascript"> /* Isi File JavaScript di Sini */</script>

Contohnya, dari semula begini:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js></script>

Diubah menjadi:

<script type="text/javascript">

/*! jQuery v1.8.3 jquery.com | jquery.org/license */
(function(e,t){function _(e) ... dan seterusnya dst... hingga (window);

</script>

Catatan: cara mengetahui isi kodenya: cop paste link http://........... min.js di address bar (alamat bar), ketika dimasukkan akan muncul deretan kode .js.

Optimize CSS Delivery

Selain daripada itu, saran Google berkenaan dengan kasus di atas adalah Optimize CSS Delivery, yaitu mengubah kode CSS. Tentu cara optimize CSS delivery juga masih dari mbah Google. Caranya, sebagai berikut:

Contoh, kode CSS yang sebelumnya seperti di bawah ini:

<link rel="stylesheet" href="http://..... small.css">

Isi small css-nya dibuka dulu (copas link http://..... small.css di address bar) dan akan muncul, misalnya, kode seperti ini:

.blue {color: blue;}

Diubah Menjadi begini:

<style>
.blue{color:blue;}
</style>

Demikian Tutorial Mengatasi Remove Render-Blocking JavaScript dan Optimize CSS Delivery. Tentu cara di atas sudah dilakukan para desainer template yang page load timenya bisa membuat blog kita lebih bagus lagi.

Salam blogger an good luck.

Sumber:
Contohblognih.blogspot.com