Memuat Js Related Posts Dte Dengan Asynchronous
Tidak sanggup dipungkiri, bila kita ingin mempunyai web atau blog yang menarik dan aktraktif maka kita tidak sanggup lepas dari javascript atau jquery. Namun begitu, kita harus benar-benar selektif dalam memakai javascript atau jquery jangan hingga malah menjadi bumerang yang mengakibatkan blog menjadi overload.
Pilihlah javascript atau jquery yang benar-benar dibutuhkan. Salah satu widget yang memakai jquey atau javascript yaitu related posts, alasannya yaitu related posts sanggup meningkatkan page view blog sehingga sanggup menekan nilai bounce blog dan alhasil blog menjadi baik di SERP.
Widget related posts yang aku rekomendaskan yaitu widget related posts buatan mas +Taufik Nurrohman atau aku sering menyebutnya sebagai related posts DTE (sesuai nama blognya).
Selain mempunyai beberapa style yang sanggup kita pilih yang sesuai dengan selera kita (ada 6 style yang sanggup kita pilih), widget related posts DTE ini pun valid HTML5 meskipun kita memakai label posts dengan 2 kata atau lebih. Anda sanggup mendapat widget related posts DTE pada url di bawah ini.
Source code: http://blogger-json-experiment.googlecode.com/svn/resources/related-post/widget-configuration.html
Nah bila kita memakai 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 menyerupai 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, aku mencoba menyimpan js tersebut secara inline atau menyimpan langung kode-kodenya tanpa menghostingnya. Dan memang dengan begitu render-blocking javascript dari js tadi sanggup kita hindari. Namun permasalahan lain muncul yaitu size blog menjadi bertambah besar alasannya yaitu memang js tersebut mempunyai kode-kode yang banyak, sehingga blog tetap mempunyai loading yang berat alasannya yaitu size blog menjadi bertambah besar.
Nah untuk itu salah satu cara semoga 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 menyerupai 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 eksklusif instruksi
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 semoga 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 menyerupai 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 sanggup dipakai untuk js lainnya, namun perlu diingat setiap widget belum tentu sanggup dimuat secara asynchronous. Makara silahkan dicoba, bila tidak sanggup maka jangan dipaksakan untuk memakai script load asynchronous alasannya yaitu sanggup mengakibatkan widgetnya tidak jalan atau tidak tampil.
Sumber https://www.kompiajaib.com/
0 Response to "Memuat Js Related Posts Dte Dengan Asynchronous"
Posting Komentar