Skip to main content

Cara Optimasi Image Dengan CDN Staticaly Agar Blog Fast Loading

www.azid45.web.id - Cara Optimasi Image atau Gambar Dengan CDN Staticaly Agar Blog Fast Loading. Mungkin untuk masalah CDN yang sering teman-teman dengar adalah rawgit.com dan biasanya digunakan sebagai penghubung gitHub agar code js. atau yang lainnya berfungsi. Namun sekarang ada layanan CDN baru dan pastinya buatan Indonesia yaitu staticaly. Teman-teman bisa menghubungkan file yang sudah tersimpan di GitHub dengan menuju link staticaly.com dan mempastekan link tersebut sebagaimana seperti layanan di rawgit.com

Selain layanan tersebut, ternyata staticaly juga dapat mengoptimasi gambar agar lebih ringan dan cepat. Hal ini pernah diuji coba oleh kang Adhy Suryadi pemilik blog kompiajaib.com. Menurut beliau dengan mengoptimasi gambar dari layanan CDN staticaly dapat mengoptimasi gambar dan mengatasi permasalahan gambar ketika kita mengecek blog di pagespeed insights. Untuk melihat perbandingannya, teman-teman dapat melihat gambar berikut ini;

Cara Optmasi Image Agar Fast Loading Dengan CDN Staticaly
tes gambar dari layanan blogger

Cara Optmasi Image Agar Fast Loading Dengan CDN Staticaly
tes gambar yang sudah dikombinasikan dengan CDN Staticaly

Penasaran untuk mengetahaui caranya?, memang blog yang memiliki gambar thumbnail akan lebih keren dan menarik serta indah untuk dipandang oleh karena itu banyak sekali para blogger banyak sekali dalam setiap memposting artiikelnya ditambahkan gambar. Namun kendalanya gambar yang berukuran besar, dapat memperlambat blog dan menjadikan masalah dalam fast loading blog ketika mengeceknya di pagespeed insights. Oleh karena iitu banyak juga para blogger yang mengoptimasi gambar dengan compress image online serta mengoptimasi gambar dengan cara lazy load sebagaimana yang pernah saya lakukan juga. Namun sebagaimana yang saya paparkan diatas, ternyata ada cara lain yang lebih efektif yaitu dengan layanan CDN Staticaly. Kalau sudah dari blognya kang Adhy Suryadi kompiajaib.com pastinya cara tersebut terjamin kevaliditasannya, apa lagi CDN tersebut merupakan miliik orang Indonesia sendiri. Oleh karena itu kita patut menggunakannya agar lebih berkembang dan terus meningkat.

Baca juga: optimasi image dengan java script lazy load image agar blog fast loading

Jadi ngelantur, ok. Ini yang kita tunggu-tunggu yaitu cara mengoptimasi gambar atau imgae dengan CDN staticaly, berikut caranya;

Untuk menggunakan CDN Staticaly pada gambar blogger cukup mudah. Biasanya kode gambar blogger seperti berikut ini.


<img border="0" data-original-height="815" data-original-width="1280" src="https://4.bp.blogspot.com/-huIADrjEcTY/W6nUEm9nqSI/AAAAAAAAzM0/PhzkECo_SZYX0bL1ILxfNW11pOx-X2TUACLcBGAs/s1600/gambar-blogger.png" />

Kita tinggal mengganti kode URL https:// yang bergaris tebal di atas dengan https://cdn.staticaly.com/img/ sehingga menjadi seperti berikut ini.


<img border="0" data-original-height="815" data-original-width="1280" src="https://cdn.staticaly.com/img/4.bp.blogspot.com/-huIADrjEcTY/W6nUEm9nqSI/AAAAAAAAzM0/PhzkECo_SZYX0bL1ILxfNW11pOx-X2TUACLcBGAs/s1600/gambar-blogger.png" />

Mudah bukan?. Demikianlah cara mengoptimasi gambar atau imgae dengan CDN staticaly. Semoga bermanfaat, dan blog teman-teman menjadi lebih fast loading. Amin

NB: Jika thumbnail teman-teman jika tidak berfungsi atau tidak kelihatan, maka itu karena masih menggunakan data:post.thumbnail, oleh karena itu agar bisa terlihat harus digantii dengan data:post.firstImageUrl

UPADATE 7 OKTOBER 2018

Agar tidak mengganti gambar satu persatu, cukup kita masukkan javascript berikut ini diatas </body>


<script>
//<![CDATA[
var images = document.getElementsByTagName('img');
  for (var i = 0; i < images.length; i++) {
    images[i].src = images[i].src.replace(/.*?:\/\//g , "https://cdn.staticaly.com/img/");
  };
//]]>
</script>

Dengan Menggunakan java script tersebut, maka secara langsung semua gambar blogger akan diredirect ke CDN Staticaly

Sedangkan untuk related post tumbnail dari DTE atau dari kang Adhy Suryadi, maka perlu mengganti kode java scriptnya sebagai berikut;

var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:200,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize):d.noImage;u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);

Menjadi

var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:200,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/.*?:\/\//g , "https://cdn.staticaly.com/img/").replace(/\/s[0-9]+(\-c)?/, "/s"+d.thumbnailSize):d.noImage;u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);

UPDATE 10 MEI 2019:
Untuk menggunakan dan mengubah otomatis image dengan cdn staticaly, ternyata membutuhkan settingan terlebih dahulu sebagimana optimasi menggunakan lazy load image agar work 100%. Caranya adalah sebagai berikut:

Pada kasus ini anda perlu mencari setiap tag img dan rubahlah src menjadi data-src kemudian tambahkan kode src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJAQMAAAAB5D5xAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjwA0AABsAAQrj5HwAAAAASUVORK5CYII=' pada akhir tag img. anda bisa perhatikan contoh dibawah ini dan bedakan sendiri.

<img alt=' ' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFIzmmtcuGAVgholEhJCHos-bII-BIGqa9NNGr2hwlQSDdWJh_5-JEvP0KtjSodjnteht03QeM5ucBPcg8akq6sJ2bZwZQmAFugi1ufJVbEOUOBoJsVVTPBweTmzs3KOSjAomM0pCGtjs/w300-h168-p-k-no-nu/atelier-reseau-internet-monde.jpg' height='9' title=' ' width='16'/>

<img alt='' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFIzmmtcuGAVgholEhJCHos-bII-BIGqa9NNGr2hwlQSDdWJh_5-JEvP0KtjSodjnteht03QeM5ucBPcg8akq6sJ2bZwZQmAFugi1ufJVbEOUOBoJsVVTPBweTmzs3KOSjAomM0pCGtjs/w300-h168-p-k-no-nu/atelier-reseau-internet-monde.jpg' height='9' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJAQMAAAAB5D5xAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjwA0AABsAAQrj5HwAAAAASUVORK5CYII=' title='' width='16'/>

Jika sudah langkah selanjutnya anda bisa copas kode berikut dan letakkan diatas kode </body>

<script>
//<![CDATA[
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));}
imgDefer[i].src = imgDefer[i].src.replace(/.*?:\/\//g , "https://cdn.staticaly.com/img/");
 }
//]]>
</script>

Selamat mencoba.

PERHATIAN:Jika anda ingin bertanya atau bantuan bisa kontak kami
contact atau 089677337414 - Terima kasih.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui
Buka Komentar
Tutup Komentar
Close Disqus