Ditulis oleh: Ditulis pada: 12/16/2014
Tidak bisa dipungkiri, jika kita ingin memiliki web atau blog yang menarik dan aktraktif maka kita tidak bisa lepas dari javascript atau jquery. Namun begitu, kita harus benar-benar selektif dalam menggunakan javascript atau jquery jangan sampai malah menjadi bumerang yang menyebabkan blog menjadi overload.
Pilihlah javascript atau jquery yang benar-benar dibutuhkan. Salah satu widget yang menggunakan jquey atau javascript adalah related posts, karena related posts dapat meningkatkan page view blog sehingga dapat menekan nilai bounce blog dan akhirnya blog menjadi baik di SERP.
Widget related posts yang saya rekomendaskan adalah widget related posts buatan mas Taufik Nurrohman atau saya sering menyebutnya sebagai related posts DTE (sesuai nama blognya).
Selain memiliki beberapa style yang bisa kita pilih yang sesuai dengan selera kita (ada 6 style yang bisa kita pilih), widget related posts DTE ini pun valid HTML5 meskipun kita menggunakan label posts dengan 2 kata atau lebih.
Nah jika kita menggunakan widget tersebut, maka kita harus menyimpan kode-kodenya di template blog kita baik CSS, ataupun javascript dan js.
Namun ternyata JS dari widget related posts DTE ini terdeteksi render-blocking javascript di PageSpeed. JS tersebut seperti di bawah ini.
<script type='text/javascript' src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js'/>
Sebelumnya untuk mengatasi render-blocking javascript dari js tersebut, saya mencoba menyimpan js tersebut secara inline atau menyimpan langung kode-kodenya tanpa menghostingnya. Dan memang dengan begitu render-blocking javascript dari js tadi bisa kita hindari. Namun permasalahan lain muncul yaitu size blog menjadi bertambah besar karena memang js tersebut memiliki kode-kode yang banyak, sehingga blog tetap memiliki loading yang berat karena size blog menjadi bertambah besar.
Nah untuk itu salah satu cara agar js related posts DTE tidak terdetek render-blocking javascript, kita tidak perlu menyimpan js tersebut secara inline, namun kita memuat js tersebut secara asynchronous.
Seperti kita ketahui, javascript related posts dte seperti berikut:
<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-post' class='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h4>Related Post:</h4>",
numPosts: 5,
summaryLength: 370,
titleLength: "auto",
thumbnailSize: 80,
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
containerId: "related-post",
newTabLink: false,
moreText: "Read More",
widgetStyle: 1,
callBack: function() {}
};
</script>
<script type='text/javascript' src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js'/>
</b:if>
<!-- Related Post Widget End -->
Saya sudah mencoba menambahkan langsung kode
async="async" pada js related posts, namun ternyata widgetnya tidak berjalan. Nah untuk itu silahkan tambahkan script untuk load js secara asynchronous di bawah ini untuk js related posts agar dimuat asynchronous.
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="URL JS DI SINI";document.body.appendChild(e)}if(window.addEventListener)window.addEventListener("load",downloadJSAtOnload,false);else if(window.attachEvent)window.attachEvent("onload",downloadJSAtOnload);else window.onload=downloadJSAtOnload
//]]>
</script>
Sehingga menjadi seperti di bawah ini.
<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-post' class='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h4>Related Post:</h4>",
numPosts: 5,
summaryLength: 370,
titleLength: "auto",
thumbnailSize: 80,
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
containerId: "related-post",
newTabLink: false,
moreText: "Read More",
widgetStyle: 1,
callBack: function() {}
};
</script>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js";document.body.appendChild(e)}if(window.addEventListener)window.addEventListener("load",downloadJSAtOnload,false);else if(window.attachEvent)window.attachEvent("onload",downloadJSAtOnload);else window.onload=downloadJSAtOnload
//]]>
</script>
</b:if>
<!-- Related Post Widget End -->
Script load js asynchronous di atas bisa digunakan untuk js lainnya, namun perlu diingat setiap widget belum tentu bisa dimuat secara asynchronous. Jadi silahkan dicoba, jika tidak bisa maka jangan dipaksakan untuk menggunakan script load asynchronous karena bisa menyebabkan widgetnya tidak jalan atau tidak tampil.