Modifikasi template untuk mempercepat loading blog - Selamat berjumpa lagi dengan saya yang sudah tidak asing lagi alias sudah terkenal (didesa saya 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 adalah rajanya suatu blog bisa nangkring di pageone search engine.
Namun selain artikel juga masih banyak faktor pendukung untuk bisa berada di pageone seperti salah satu trik/tips SEO (search engine optimation) adalah kecepatan loading blog karena kecepatan loading sangat menunjang untuk meningkatkan pageview blog itu sendiri. Jika blog kita memiliki loading yang cukup berat, bisa jadi pengunjung langsung kabur mencari blog lain yang lebih cepat / mudah dibuka.
Terkait dengan kecepatan loading blog, tentu saja faktor utamanya adalah menggunaan template yang yang fast loading dan sudah banyak yang membagikannya, baik yang gratis atau premium. Meskipun blog kita sudah menggunakan template yang memiliki loading cepat, tapi tentu saja harus kita modifikasi lagi sesuai yang kita inginkan, terutama fitur yang memang tidak kita butuhkan. Saya sendiri sampai saat ini hanya bisa memodifikasi saja.
Sebagai contoh saja sih, template blog ini menggunakan template premium kompi flexible yang kecepatan loadingnya bisa anda rasakan sendiri, tapi masih saya modif lagi dengan menghilangkan fitur yang tidak saya inginkan karena saya masih ingin yang lebih cepat dari aslinya.
Apa saja yang saya hilangkan pada template kompi flexible blog ini? Ikuti tour saya berikut ini:
1. Menghapus kolom komentar yang berlebihan
Kita tahu bahwa saat ini banyak blog menggunakan kolom komentar yaang menurut saya berlebihan dengan 3 sistem komentar, yakni blogger, disqus dan facebook. Menurut saya penggunaan 3 sistem komentar tidak begitu efektif, kenapa? kolom komentar mana yang banyak digunakan? Tentu saja yang banyak / sering digunakan oleh pembaca / pengunjung (apalagi sesama blogger) hanya sistem komentar yang tampil duluan, bukan karena 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 jika fungsi hal tersebut tidak sebanding dengan efek yang diberikan. Sehingga sampai sekarang blog ini tetap menggunakan 1 sistem komentar saja dan saya memilih menggunakan komentar disqus yang katanya loadingnya berat banget.
Sekarang jika anda menggunakan komentar blogger saja, coba refresh halaman postingan blog anda dengan blog saya ini, lebih cepat mana coba? padahal saya pake disqus gitu. Maksud saya loading blog tidak hanya fokus pada sistem komentar apa yang digunakan, tapi secara keseluruhan kode 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 tempat untuk gadget/widget dengan lebar 300px. Karena fungsinya juga tidak begitu signifikan, maka saya modif lagi menjadi lebih elegan dan minimalis tapi tetap terlihat profesional seperti website-website besar.
baca: Cara membuat footer ala kompi ajaib
4. Merubah tombol share sederhana
DonReach Share Buttons With Counts, itulah tombol share yang digunakan template ini dengan menggunakan link JS external yang juga cukup menyumbang loading pada blog. Sehingga saya 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 saya setiap kali me-refresh halaman blog ini karena tampilan gambar untuk thumbnail homepage, postpage dan popular post tidak langsung tampil sempurna 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 kode untuk recent comment
Recent comment juga memperlambat loading blog yang tidak sebanding dengan fungsinya yang hanya menampilkan komentar terbaru, jadi saya hapus juga karena 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 sosial yang awalnya berada di bilah menu dengan search box show hide, sekarang saya hapus dengan hanya menampilkan search Result Google Custom. Untuk URL profil sosmed saya 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 saya inginkan karena hanya menampilkan jumlah komentar di homepage dan kebanyakan pengunjung tidak begitu peduli seberapa banyak komentator artikel tersebut. Apalagi menurut mas +Adhy Suryadi comment count tidak mempengaruhi 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 contoh dari saya untuk memodifikasi template, semoga bisa menjadi motivasi dan referensi bagi anda semua para kaum blogger. Selanjutnya anda tinggal mengkreasikan apa yang anda inginkan terhadap blog anda.
