Modifikasi template untuk mempercepat loading blog - Selamat berjumpa lagi dengan aku yang sudah tidak asing lagi alias sudah populer (didesa aku gitu), dan masih seputar tutorial/tips blogger. Menjadi blogger sangatlah gampang, tapi menjadi blogger yang sukses sesulit membalikkan telapak kaki. Seperti yang sudah banyak dibahas diblog manapun bahwa untuk menjadi blogger sukses harus konsisten terutama untuk update artikel. Iya memang artikel yakni rajanya suatu blog dapat nangkring di pageone search engine.
Namun selain artikel juga masih banyak faktor pendukung untuk dapat berada di pageone ibarat salah satu trik/tips SEO (search engine optimation) yakni kecepatan loading blog alasannya kecepatan loading sangat menunjang untuk meningkatkan pageview blog itu sendiri. Jika blog kita mempunyai loading yang cukup berat, dapat jadi pengunjung pribadi kabur mencari blog lain yang lebih cepat / praktis dibuka.
Terkait dengan kecepatan loading blog, tentu saja faktor utamanya yakni menggunaan template yang yang fast loading dan sudah banyak yang membagikannya, baik yang gratis atau premium. Meskipun blog kita sudah memakai template yang mempunyai loading cepat, tapi tentu saja harus kita modifikasi lagi sesuai yang kita inginkan, terutama fitur yang memang tidak kita butuhkan. Saya sendiri hingga ketika ini hanya dapat memodifikasi saja.
Sebagai pola saja sih, template blog ini memakai template premium kompi flexible yang kecepatan loadingnya dapat anda rasakan sendiri, tapi masih aku modif lagi dengan menghilangkan fitur yang tidak aku inginkan alasannya aku masih ingin yang lebih cepat dari aslinya.
Apa saja yang aku hilangkan pada template kompi flexible blog ini? Ikuti tour aku berikut ini:
1. Menghapus kolom komentar yang berlebihan
Kita tahu bahwa ketika ini banyak blog memakai kolom komentar yaang berdasarkan aku berlebihan dengan 3 sistem komentar, yakni blogger, disqus dan facebook. Menurut aku penggunaan 3 sistem komentar tidak begitu efektif, kenapa? kolom komentar mana yang banyak digunakan? Tentu saja yang banyak / sering dipakai oleh pembaca / pengunjung (apalagi sesama blogger) hanya sistem komentar yang tampil duluan, bukan alasannya komentar blogger atau disqus apalagi facebook.
Selain itu, penggunaan 3 sistem komentar juga memperlambat loading blog meskipun sudah di defer. Karena itulah, sangat kurang relevan kalau fungsi hal tersebut tidak sebanding dengan imbas yang diberikan. Sehingga hingga kini blog ini tetap memakai 1 sistem komentar saja dan aku menentukan memakai komentar disqus yang katanya loadingnya berat banget.
Sekarang kalau anda memakai komentar blogger saja, coba refresh halaman postingan blog anda dengan blog aku ini, lebih cepat mana coba? padahal aku pake disqus gitu. Maksud aku loading blog tidak hanya fokus pada sistem komentar apa yang digunakan, tapi secara keseluruhan instruksi yang ada.
baca: Merubah 3 sistem komentar menjadi 1 komentar disqus saja
2. Menghapus kotak berlangganan artikel (subscribe-box)
Kotak langganan artikel (subscribe box) sama halnya dengan blogger follower yang memberitahukan setiap update artikel blog kita kepada yang bersangkutan. Pertanyaannya sudah banyakkah yang berlangganan update artikel blog kita via email? Jika tidak, maka perlu dihapus saja.
Kode CSS Subscribe Box
#subscribe-box,#subscribe-box .emailfield input{font-family:Roboto,sans-serif}
.subscribe_box{width:100%;margin:30px 0;padding:0}
#subscribe-box{width:100%;height:auto;background-color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05);margin:0;padding:10px 0}
#subscribe-box p{font-size:18px;color:#666;font-weight:300;text-align:center;line-height:20px;padding:10px 20px 0;margin:0}
#subscribe-box .emailfield{padding:0 20px 10px}
#subscribe-box .emailfield input{color:#777;padding:10px 10px 10px 30px;margin-top:10px;font-size:15px;font-weight:300;width:100%;background:#ebebeb;border:1px solid #ccc;border-radius: 4px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#subscribe-box .emailfield input:focus{outline:0;background:#f5f5f5}
#subscribe-box .emailfield .submitbutton{background:#F4836A;box-shadow:0 4px 0 0 #cb5940;color:#fff!important;border:none;font-weight:500;outline:0;width:100%;cursor:pointer;transition:all 400ms ease-in-out;}
#subscribe-box .emailfield .submitbutton:hover,#subscribe-box .emailfield .submitbutton:active{background:#fb6f50!important}
.subs-title{font-family:Roboto,sans-serif;font-weight:900!important;color:#333!important;font-size:24px!important}
.subs-title2{font-family:Georgia,sans-serif;font-style:italic;font-weight:400!important}
#subscribe-box .form-name,#subscribe-box .form-email,#subscribe-box .form-button{position:relative!important}
#subscribe-box .form-name:before{content:'\f007';font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;color:#777;font-size:16px;padding-right:.5em;position:absolute;top:-2px;left:10px}
#subscribe-box .form-email:before{content:'\f0e0';font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;color:#777;font-size:16px;padding-right:.5em;position:absolute;top:-2px;left:10px}
#subscribe-box .form-button:before{content:'\f1d8';font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;color:#fff;font-size:18px;padding-right:.5em;position:absolute;top:-2px;left:50%;margin-left:-70px}
input.submitbutton{background-color:#F4836A!important;}Kode HTML Subscribe Box
<div class='subscribe_box'>
<div id='subscribe-box'>
<p class='subs-title'>SUBSCRIBE <span class='subs-title2'>to Our Newsletter</span></p> <p>Sign up here with your email address to receive updates from this blog in your inbox.</p>
<div class='emailfield'>
<form action='//feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('//feedburner.google.com/fb/a/mailverify?uri=KompiAjaib', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<span class='form-name'>
<input name='name' onblur='if (this.value == "") {this.value = "Your Name";}' onfocus='if (this.value == "Your Name") {this.value = "";}' type='text' value='Your Name'/></span>
<span class='clear'/>
<span class='form-email'>
<input name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' type='text' value='Your Email'/></span>
<input name='uri' type='hidden' value='KompiAjaib'/>
<input name='loc' type='hidden' value='en_US'/>
<span class='form-button'>
<input class='submitbutton' type='submit' value='Subscribe Now!'/></span>
</form>
</div>
</div>
</div>3. Merubah Footer minimalis ala Kompi Ajaib
Footer template kompi flexible menyediakan daerah untuk gadget/widget dengan lebar 300px. Karena fungsinya juga tidak begitu signifikan, maka aku modif lagi menjadi lebih elegan dan minimalis tapi tetap terlihat profesional ibarat website-website besar.
baca: Cara menciptakan footer ala kompi ajaib
4. Merubah tombol share sederhana
DonReach Share Buttons With Counts, itulah tombol share yang dipakai template ini dengan memakai link JS external yang juga cukup menyumbang loading pada blog. Sehingga aku juga menggantinya dengan yang lebih sederhana.
baca: Merubah tombol share menjadi lebih sederhana
5. Menghapus JS rezise image untuk thumbnail
Script resize image ini cukup menganggu aku setiap kali me-refresh halaman blog ini alasannya tampilan gambar untuk thumbnail homepage, postpage dan popular post tidak pribadi tampil tepat alias masih membesar dari kotak yang ada. Hal ini terinspirasi dari template kompi design yang sudah support AMP (Accelerated Mobile Page)
Script rezize image untuk homepage
function resizeThumb(e,t,g){for(var m=document.getElementById(e),r=m.getElementsByTagName("img"),s=0;s<r.length;s++)r[s].src=r[s].src.replace(/\/s72\-c/,"/s"+t),r[s].width=t,r[s].height=g}resizeThumb("Blog1",230,140);Script rezize image untuk postpage
function resizeThumbextralarge(e){for(var r=document.querySelectorAll(".thumb-post img"),t=0;t<r.length;t++)r[t].src=r[t].src.replace(/\/s1600/,"/s"+e),r[t].width=e,r[t].height=e}resizeThumbextralarge("600");Script rezize image untuk popular post
function resizeThumb(e,t,s){for(var r=document.getElementById(e),m=r.getElementsByTagName("img"),c=0;c<m.length;c++)m[c].src=m[c].src.replace(/\/s72\-c/,"/s"+t),m[c].width=t,m[c].height=s}resizeThumb("PopularPosts1",300,170); <!--Postingan-->
<img expr:alt='data:blog.pageName' expr:src='data:blog.postImageUrl' expr:title='data:blog.pageName' height='350' layout='responsive' width='600'/>
<!--Homepage-->
<img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title' height='140' layout='responsive' width='230'/>
<!--Popular Post-->
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnail,280)' height='100' itemprop='image' width='300'/>baca: resize image thumbnail tanpa javascript untuk kompi flexible
6. Menghapus instruksi untuk recent comment
Recent comment juga memperlambat loading blog yang tidak sebanding dengan fungsinya yang hanya menampilkan komentar terbaru, jadi aku hapus juga alasannya tidak terpakai.
Kode CSS untuk recent comment
ul.kangismet_recent{margin:0;padding:0}
ul.kangismet_recent b{font-size:16px;font-weight:300}
ul.kangismet_recent div{margin-bottom:10px!important}
ul.kangismet_recent div.avatarImage{margin-bottom:0!important}
.kangismet_recent li{background:0 0!important;margin:0!important;padding:0!important;display:block;clear:both;overflow:hidden;word-break:break-all}
.kangismet_recent li .avatarImage{background:#888;padding:0;float:left;margin:0 6px 0 0;position:relative;overflow:hidden}
.kangismet_recent li img{padding:0;position:relative;overflow:hidden;display:block}
.kangismet_recent li span{margin-top:4px;color:#666;display:block;font-size:14px;font-style:italic;line-height:1.2;font-weight:300}Kode JS untuk recent comment
var numComments=5,showAvatar=!0,avatarSize=60,roundAvatar=!0,characters=40,defaultAvatar="//www.gravatar.com/avatar/?d=mm",hideCredits=!0;maxfeeds=50,adminBlog="GANTI DENGAN NAMA ADMIN"; function hp_d11(s){var o="",ar=new Array(),os="",ic=0;for(i=0;i<s.length;i++){c=s.charCodeAt(i);if(c<128)c=c^2;os+=String.fromCharCode(c);if(os.length>80){ar[ic++]=os;os=""}}o=ar.join("")+os;return o}var numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||40,defaultAvatar=defaultAvatar||"//www.gravatar.com/avatar/?d=mm",moreLinktext=moreLinktext||" More »",showAvatar=typeof showAvatar==="undefined"?true:showAvatar,showMorelink=typeof showMorelink==="undefined"?false:showMorelink,roundAvatar=typeof roundAvatar==="undefined"?true:roundAvatar,hideCredits=hideCredits||false,maxfeeds=maxfeeds||50,adminBlog=adminBlog||'GANTI DENGAN NAMA ADMIN';function kangismet_recent(kangismet){var commentsHtml;commentsHtml="<ul class=\"kangismet_recent\">";ntotal=0;for(var i=0;i<maxfeeds;i++){var commentlink,authorName,authorAvatar,avatarClass;if(i==kangismet.feed.entry.length){break}if(ntotal>=numComments){break}var entry=kangismet.feed.entry[i];for(var l=0;l<entry.link.length;l++){if(entry.link[l].rel=="alternate"){commentlink=entry.link[l].href}}for(var a=0;a<entry.author.length;a++){authorName=entry.author[a].name.$t;authorAvatar=entry.author[a].gd$image.src}if(authorName!=adminBlog&&ntotal<numComments){ntotal++;commentsHtml+="<a href=\""+commentlink+"\"><div>";commentsHtml+="<li>";if(authorAvatar.indexOf("/s1600/")!=-1){authorAvatar=authorAvatar.replace("/s1600/","/s"+avatarSize+"-c/")}else if(authorAvatar.indexOf("/s220/")!=-1){authorAvatar=authorAvatar.replace("/s220/","/s"+avatarSize+"-c/")}else if(authorAvatar.indexOf("/s512-c/")!=-1&&authorAvatar.indexOf("https:")!=0){authorAvatar="https:"+authorAvatar.replace("/s512-c/","/s"+avatarSize+"-c/")}else if(authorAvatar.indexOf("blogblog.com/img/blank.gif")!=-1){if(defaultAvatar.indexOf("gravatar.com")!=-1){authorAvatar=defaultAvatar+"&s="+avatarSize}else{authorAvatar=defaultAvatar}}else{authorAvatar=authorAvatar}if(showAvatar==true){if(roundAvatar==true){avatarClass="avatarRound"}else{avatarClass=""}commentsHtml+="<div class=\"avatarImage "+avatarClass+"\"><img class=\""+avatarClass+"\" src=\""+authorAvatar+"\" alt=\""+authorName+"\" width=\""+avatarSize+"\" height=\""+avatarSize+"\"/></div>"}commentsHtml+="<b>"+authorName+"</b>";var commHTML=entry.content.$t;var commBody=commHTML.replace(/(<([^>]+)>)/gi,"");if(commBody!=""&&commBody.length>characters){commBody=commBody.substring(0,characters);commBody+="…";if(showMorelink==true){commBody+=""+moreLinktext+""}}else{commBody=commBody}commentsHtml+="<span>"+commBody+"</span>";commentsHtml+="</li></div></a>"}}commentsHtml+="</ul>";document.write(commentsHtml)};7. Merubah icon sosmed profil menjadi link saja
Icon profil media umum yang awalnya berada di bilah sajian dengan search box show hide, kini aku hapus dengan hanya menampilkan search Result Google Custom. Untuk URL profil sosmed aku pindahkan ke footer yang hanya berupa link teks.
baca: Merubah sosmed profil dengan search Result Google Custom
8. Menghapus comment count blogger
Ini juga tidak aku inginkan alasannya hanya menampilkan jumlah komentar di homepage dan kebanyakan pengunjung tidak begitu peduli seberapa banyak komentator artikel tersebut. Apalagi berdasarkan mas +Adhy Suryadi comment count tidak menghipnotis SEO blog itu sendiri.
Kode CSS untuk comment count
.post-comment-link{background:#82b965;font-size:12px;line-height:20px;display:block;position:absolute;top:15px;right:0}
.post-comment-link:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid #82b965;border-top:7px solid transparent;border-bottom:7px solid transparent;position:absolute;top:3px;left:-14px}
.post-comment-link a{padding:10px 7px;color:#fff;text-decoration:none;font-weight:300}Kode HTML untuk comment count
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'><a expr:href='data:post.url + "#total-comments"' expr:onclick='data:post.addCommentOnclick' title='Comments'><b:if cond='data:post.numComments == 0'><i class='fa fa-comment'/> 0</b:if><b:if cond='data:post.numComments == 1'><i class='fa fa-comment'/> 1</b:if><b:if cond='data:post.numComments >= 2'><i class='fa fa-comments'/> <data:post.numComments/></b:if></a></b:if>
</span>Sekarang, bagaimana dengan blog anda? seberapa cepatkah loading blog anda? bagaimana dengan fitur bawaan template? apakah sudah berfungsi sebagaimana mestinya? atau hanya sekedar jadi pajangan untuk mempercantik tampilan blog? semua itu hanya anda yang tahu ya.
Mungkin hanya itu saja sekedar pola dari aku untuk memodifikasi template, biar dapat menjadi motivasi dan acuan bagi anda semua para kaum blogger. Selanjutnya anda tinggal mengkreasikan apa yang anda inginkan terhadap blog anda.
