Ditulis oleh: Ditulis pada: 12/11/2015
Awalnya saya ingin lebih mengoptimalkan template Kompi Flexible agar loadingnya menjadi lebih ringan. Salah satu hal yang menyumbangkan loading blog adalah pemuatan komentar Blogger. Meskpun kini komentar blogger sudah menggunakan foto profil komentator dengan ukuran kecil 35px (sebelumnya menggunakan ukuran 512px), namun pemuatan javascript komentarnya masih terasa juga.Kemudian saya iseng-iseng mencoba men-defer (menunda pemuatan) javascript komentar blogger dan ternyata bisa juga dilakukan, kali ini saya menghostingnya di Google Drive tapi saran saya coba gunakan selft hosting agar peformanya menjadi lebih baik.
Jika Anda menggunakan Threaded Comment Hack, maka ada 2 kelompok javascript yang harus di-hosting dan kemudian di-defer. Jika menggunakan Default Blogger Comment, hanya 1 kelompok javascript yang di-hosting dan kemudian di-defer.
Untuk Threaded Comment Hack
1. Langkah Pertama
Temukan kode berikut
<b:includable id='comments' var='post'> kemudian gulirkan layar ke bawah sampai menemukan javascript threaded comment hack sepert di bawah ini. <script src='//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js' type='text/javascript'/>
<script type='text/javascript'>
<b:if cond='data:post.numComments != 0'>
var Items = <data:post.commentJso/>;
var Msgs = <data:post.commentMsgs/>;
var Config = <data:post.commentConfig/>;
<b:else/>
var Items = {};
var Msgs = {};
var Config = {'maxThreadDepth':'0'};
</b:if>
//<![CDATA[
Config.maxThreadDepth=4,Display_Emo=!0,Replace_Youtube_Link=!0,Replace_Image_Link=!0,Replace_Force_Tag=!0,Replace_Image_Ext=["JPG","GIF","PNG","BMP"],Emo_List=[":)","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia9MnUcv2NZKJ9HABM9LfQRYxlU02KVWW0LftMJnnk-d_fakdwbEXh2k8GUsz2Yym7iRT2gw8iCodRclcFdgrHrzPmXn8sv1_YL9EPhwhUXnDG9C-aqbxp2DnnJYiCeLeyFA8lj8wQ3ow/s1600/smile1.gif",":(","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW47RRWt2P4YrRZSnFOrCXbrgA2OLZsBBzMKUZZvj_dx4MemyJT6LkF26V9zxYwIo6PyJAWzRKnrbuKEKXWVqfZN4GhA1-8Up8XWRkkNs_ZnYpeXaSgNiYQoUI8jkhD0WNWerksq3bMgQ/s1600/sad.gif","=(","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3cYNBMcVKE8UzLYRZc8jBc59BLMBnHk9kJdh24cdSuuMSBQA5cALvMTw6gX5dP6rlyTD2UHfvNid17Hgx4PggjuxhemcxtA4UzzkrnUrJSi1MAPpjpbFTE0bcZQwCsvJ5qXnRS-4QnLc/s1600/sadanimated.gif","^_^","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTAq0rq0lHTp-GNBSzSfNHRwQBqOAH-X6l82T4jXM3Zhsjm2GMb8MXrGamdQ9rWw1j1Y4wJt2YT4agsAkOEY6LOBE83GtZuMmfXKxiwlTu3-57-T2_FKLXfUP4Ou5fHis1lHMLPAicSdA/s1600/smile.gif",":D","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqqvPGc19eKpAF7Mw11s-OaeW_n1zjojjrYkMO7g4ExohNL6fWo3IbLWiWF5ks192h08vZLqbeh_xEFdnC5bvCnvKcgfLARn-pscQDg1LTZFXyRxh7IC7Nwcl8eBR38YqRWxJwTgfK1Y0/s1600/icon_smile.gif","=D","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiwLk2udSKYVxRWaYkPlUDJ1DhiWldbfXbsMOpiV4iEP_v53nvNnF6VBe-af03Bw-_b5jytAAgTZOelSOVBBONE8nROsO1t0Lo7XGj1fSvrqbccMjp1BBX_fXKIsESqpPUgZyPSBpxL5A/s1600/hihi.gif","|o|","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaALUPTqknHIEJ45QYk3a0g39_Z-Qx8uDu19exc_5A9Ew0d3dpyq_Rl2oQnh5-nrNvz-_r3GFryAHuEwiZJUCWH3nkxIOZzQ-h0Ev7cTZtfMOsRqKuyPfFHOlogBo5iOQu0VkVAvtXNk0/s1600/applause.gif","@@,","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiI0Z91Qm_mVP1P31CiEzrRhqd8L9F1KazwlmG54Oto1t0DmUtgWCIlOyhAynObxkqZb2FiBYnwmkCmU07VSkRdE053eoQ9k0tCkdpgwafp4gaSxOuy_tjyPtNBHzgT-7ypzebWp5Jh0I/s1600/rolleyes.gif",";)","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJLnhybjeVeAkEfT8agArFTF5yZAmIqsUnmCfzEa5ghdi3vtwiaqcn4_CFXOLI7Jia1EaJO5dGafqB-cL0oxfIt2hThSHzwABxPLkTARfNRAv82kjY4sl1WtumS8qf31HxsAdqIU2YG5c/s1600/wink.gif",":-bd","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_w03uXPutJ6IhOaZuff0U22w5qTPLMX09c6-ZgXE2sts8Jg4kMvK2a7x6_dgJIYFgFPgwQsYXJDo5XFtQFart-v7arnvkzJZWPL6qkmImbpcCc2WvabT6SpHyklrfBozs6MLsgj6IDog/s1600/thumb.gif",":-d","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglmsVYSmo2RH1dPb-o70ayC7HsZoq6bxrXKWuo7UksL-gxlxdq5vx8Pny0i9zh0lQdMWtTRfEG45H7k5v_DUVLGfsVmn7yXP8tU2nd3BfAvqzKGIDylvPisalOfQwZgn4HyguBfbdv9g8/s1600/thumbsup.gif",":p","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqCfbL5wJ8NB8t6mBD9dHjCf6kzavYJKYKQBEkvdjf7FWGRMP4CSFTbtjmQrDLjc-Fk3VtOM_NKpqxVtK1IMgzUCE8GQgEKMnyAIBF7QB3cUwWraSiQiKVB4UwHrLa3o8VtbMTapWkT44/s1600/wee.gif"],Force_Tag=["[pre]","<pre>","[/pre]","</pre>",'<pre class="brush: plain; title: ; notranslate" title="">',"<code>","</pre>","</code>"];
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 q=\'.W\';3 1a=$(\'#N-Y\').B(\'y\');u 1w(H){3 1h=\' \\n\\r\\t\\f\\2p\\1S\\1T\\1U\\24\\25\\26\\27\\2e\\2h\\2k\\2m\\2n\\2u\\2y\\2z\\2A\\2F\\1L\\1N\\1O\\1P\\1Q\';G(3 i=0;i<H.5;i++){b(1h.g(H.1V(i))!=-1){H=H.d(0,i);11}}C H}$(\'#28 .1B p\').k(u(D,7){b(2r){3 m=\'1g://13.Z.X/1t?v=\';3 8=7.g(m);F(8!=-1){1H=7.d(8);K=1w(1H);3 1c=K.g(\'&\');3 T=\'\';b(1c==-1){T=K.d(m.5)}1e{T=K.d(m.5,1c)}3 1j=\'<1k I="1W" y="1g://13.Z.X/1X/\'+T+\'?1Y=1" 20="0" 21></1k>\';7=7.d(0,8)+1j+7.d(8+K.5);8=7.g(m);b(8==-1){m=\'22://13.Z.X/1t?v=\';8=7.g(m)}}}b(23){3 1d=\'\';3 x=7;G(3 i=0;i<1z.5;i++){3 m=\'.\'+1z[i];3 o=x.E();3 8=o.g(m);F(8!=-1){l=x.d(0,8+m.5);o=l.E();3 w=\'2j://\';3 z=o.g(w);3 L=\'\';F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}w=\'1K://\';o=l.E();z=o.g(w);F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}b(L==\'\'||l.5<6){11}l=L+l;1d+=x.d(0,8+m.5-l.5)+\'<S y="\'+l+\'" I="2s"/>\';x=x.d(8+m.5);o=x.E();8=o.g(m)}}7=1d+x}b(1m){3 5=A.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';8=7.g(A[i]);F(8!=-1){7=7.d(0,8)+V+7.d(8+A[i].5);8=7.g(A[i])}}}b(2G){3 5=U.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){F(1){3 x=7.R();8=x.g(U[i]);b(8!=-1){7=7.d(0,8)+U[i+1]+7.d(8+U[i].5)}1e{11}}}}C 7});$(\'.1M\').k(u(D,7){b(1m){3 5=A.5;b(5%2==1){5--}3 15=\'\';G(3 i=0;i<5;i+=2){3 1C=\'<1F>\'+A[i]+\'</1F>\';3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';15+=\'<M I="1R">\'+V+1C+\'</M>\'}C 15}});$(\'.1f .1B p\').k(u(i,h){10=h.R();D=10.g(\'@<a 12="#c\');b(D!=-1){14=10.g(\'</a>\',D);b(14!=-1){h=h.d(0,D)+h.d(14+4)}}C h});u 1l(j){r=j.g(\'c\');b(r!=-1)j=j.d(r+1);C j}u 1n(j){j=\'&1Z=\'+j+\'#%1o\';1p=1a.1q(/#%1o/,j);C 1p}u 1r(){k=$(q).k();$(q).k(\'\');q=\'.W\';$(q).k(k);$(\'#N-Y\').B(\'y\',1a)}u 1s(e){j=$(e).B(\'16\');j=1l(j);k=$(q).k();b(q==\'.W\'){1u=\'<a 12="#1v" 29="1r()">\'+2a.2b+\'</a><a 2c="1v"/>\';$(q).k(1u)}1e{$(q).k(\'\')}q=\'#2d\'+j;$(q).k(k);$(\'#N-Y\').B(\'y\',1n(j))}17=2f.2g.12;18=\'#N-2i\';19=17.g(18);b(19!=-1){1y=17.d(19+18.5);1s(\'#2l\'+1y)}G(3 i=0;i<O.5;i++){b(\'1A\'2o O[i]){3 j=O[i].1A;3 1b=2q($(\'#c\'+j+\':P\').B(\'1D-1E\'));$(\'#c\'+j+\' .2t:P\').k(u(D,7){3 J=O[i].16;b(1b>=2v.2w){$(\'#c\'+J+\':P .2x\').1G()}3 Q=$(\'#c\'+J+\':P\').k();Q=\'<M I="1f" 16="c\'+J+\'" 1D-1E="\'+(1b+1)+\'">\'+Q+\'</M>\';$(\'#c\'+J).1G();C(7+Q)})}}3 1I=$("#2B");1I.2C(\'.2D S\').2E(u(){3 1J=$(1i).B(\'y\');$(1i).2H().B(\'y\',1J.1q(/\\/s[0-9]+(\\-c)?\\//,"/2I-c/"))});',62,169,'|||var||length||oldhtml|check_index|||if||substring|||indexOf|||par_id|html|img_src|search_key||upper_html||Cur_Cform_Hdr||||function||http_search|temp_html|src|find_http|Emo_List|attr|return|index|toUpperCase|while|for|str|class|child_id|yt_link|save_http|div|comment|Items|first|child_html|toLowerCase|img|yt_code|Force_Tag|img_html|comment_form|com|editor|youtube|temp|break|href|www|index_tail|newhtml|id|cur_url|search_formid|search_index|Cur_Cform_Url|par_level|yt_code_index|save_html|else|comment_wrap|http|whitespace|this|yt_video|iframe|Valid_Par_Id|Display_Emo|Cform_Ins_ParID|7B|n_cform_url|replace|Reset_Comment_Form|Display_Reply_Form|watch|reset_html|origin_cform|trim|comment_emo|ret_id|Replace_Image_Ext|parentId|comment_body|img_code|data|level|span|remove|ht|avatar|ava|HTTPS|u200a|comment_emo_list|u200b|u2028|u2029|u3000|item|x5d|x7c|x7d|charAt|comment_youtube|embed|autohide|parentID|frameborder|allowfullscreen|https|Replace_Image_Link|x3c|x3e|x0b|xa0|comment_block|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|u2001|form_|HTTP|u2002|rc|u2003|u2004|in|x5b|parseInt|Replace_Youtube_Link|comment_img|comment_child|u2005|Config|maxThreadDepth|comment_reply|u2006|u2007|u2008|comments|find|comment_avatar|each|u2009|Replace_Force_Tag|show|s45'.split('|'),0,{}))
//]]>
</script>Perhatikan kode yang saya marking, silahkan cut kemudian paste ke notepad.
Untuk javascript yang seperti di bawah ini
<script src='//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js' type='text/javascript'/>Silahkan ganti menjadi seperti berikut ini.
(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();Kemudian pada notepad, save as dan beri nama file threaded-comment.js (atau apa pun terserah Anda asal dengan ekstensi *.js), kemudian save as type: All Files (*.*).
Kemudian file threaded-comment.js yang barusan dibuat silahkan hosting di Google Drive atau Self Hosting.
Kemudian gunakan javascript defer seperti di bawah ini.
function downloadJSAtOnload(){var d=document.createElement("script");d.src="URL hosting comment-hack.js di sini",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;Sehingga penampakan pada edit HTML untuk javascript threaded comment hack menjadi seperti ini.
<script type='text/javascript'>
<b:if cond='data:post.numComments != 0'>
var Items = <data:post.commentJso/>;
var Msgs = <data:post.commentMsgs/>;
var Config = <data:post.commentConfig/>;
<b:else/>
var Items = {};
var Msgs = {};
var Config = {"maxThreadDepth":"0"};
</b:if>
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="URL hosting comment-hack.js di sini",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>2. Langkah Kedua
Silahkan cari kode berikut
<b:includable id='threaded_comment_js' var='post'> setelah ketemu silahkan lakukan seperti langkah pertama dan beri nama berbeda untuk js-nya agar kita mudah mengenalinya misalnya threaded-comment.js. Namun bedakan untuk javascript defer-nya agar tidak bentrok menjadi seperti berikut:function downloadJSAtOnload2(){var d=document.createElement("script");d.src="URL hosting threaded-comment.js di sini",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload2,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload2):window.onload=downloadJSAtOnload2;Cukup menambahkan angka
2 pada downloadJSAtOnload.Sehingg pada langkah kedua ini penampakan edit HTML nya menjadi seperti di bawah ini.
<script type='text/javascript'>
(function() {
var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
var config = <data:post.commentConfig/>;
//<![CDATA[
function downloadJSAtOnload2(){var d=document.createElement("script");d.src="URL hosting threaded-comment.js di sini",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload2,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload2):window.onload=downloadJSAtOnload2;
//]]>
</script>Untuk Defaut Blogger Comment
Jika Anda menggunakan Default Blogger Comment, Anda hanya perlu melakukan langkah kedua di atas.
Jika ingin mencobanya, silahkan baca dengan teliti, jika ada yang kurang dimengerti silahkan tanyakan di komentar.