Cara Optimasi Image Dengan CDN Staticaly Agar Blog Fast Loading

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://4.bp.blogspot.com/-1IXM0nq9Y-c/VlkMYmQsRII/AAAAAAAAj38/27BU80myUrM/w300-h168-p-k-no-nu/atelier-reseau-internet-monde.jpg' height='9' title=' ' width='16'/>

<img alt='' data-src='https://4.bp.blogspot.com/-1IXM0nq9Y-c/VlkMYmQsRII/AAAAAAAAj38/27BU80myUrM/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.

Reaksi:
PERHATIAN:Jika anda mendownload di blog ini, maka anda akan di redirect terlebih dahulu ke laman Short Safelink untuk keamanan blog. Oleh karena itu jika terjadi error 404 maka terjadi kesalahan dalam klik di laman redirect atau terjadi refresh laman redirect. Untuk mengatasinya anda bisa mengulang kembali klik file yang akan anda download di blog ini. Dan Jika anda ingin bertanya atau bantuan bisa kontak kami dengan Klik Disini atau nomor berikut 085733513782 - Terima kasih.

Berlangganan update artikel terbaru via email:

Related Posts

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar Disqus

27 Responses to "Cara Optimasi Image Dengan CDN Staticaly Agar Blog Fast Loading "

  1. Dead indited subject material, Really enjoyed reading.

    ReplyDelete
  2. Hello There. I found your blog using msn. This is an extremely
    well written article. I will make sure to bookmark it and
    return to read more of your useful information. Thanks for the post.
    I'll definitely comeback.

    ReplyDelete
  3. Thanks for one's marvelous posting! I quite
    enjoyed reading it, you are a great author.

    I will ensure that I bookmark your blog and may come back down the road.
    I want to encourage you to definitely continue your great job, have
    a nice day!

    ReplyDelete
  4. When I originally commented I seem to have clicked the -Notify me when new comments are added- checkbox and
    now every time a comment is added I receive
    four emails with the exact same comment. Is there an easy
    method you are able to remove me from that service?
    Kudos!

    ReplyDelete
  5. Highly descriptive blog, I enjoyed that a lot.
    Will there be a part 2?

    ReplyDelete
    Replies
    1. there are other ways, you can visit this link https://www.azid45.web.id/2018/09/cara-membuat-lazy-load-image-agar-mempercepat-loading-blog.html

      Delete
  6. I want to show some appreciation to you for rescuing me from this particular matter.
    After surfing throughout the the net and meeting basics which were not helpful, I
    figured my life was done. Existing without
    the presence of strategies to the difficulties you have sorted out as a result of your main guide is a crucial case,
    and those that would have badly affected my entire career if I hadn't discovered your web blog.
    Your actual expertise and kindness in handling the whole lot was useful.

    I don't know what I would have done if I had not
    encountered such a step like this. I can at this moment relish my future.
    Thanks a lot very much for the skilled and results-oriented
    guide. I will not think twice to refer your web page to
    anyone who will need guidelines about this subject matter.

    ReplyDelete
  7. Right here is the right website for everyone who would like to find
    out about this topic. You know a whole lot its almost hard to argue with you
    (not that I really would want to...HaHa). You certainly put a new spin on a subject that has been discussed for a long time.
    Great stuff, just wonderful!

    ReplyDelete
  8. Hello there! Would you mind if I share your blog
    with my twitter group? There's a lot of folks that I think would really appreciate your content.
    Please let me know. Cheers

    ReplyDelete
  9. Asking questions are genuinely nice thing if you are not understanding
    anything completely, but this piece of writing offers fastidious understanding yet.

    ReplyDelete
  10. Attractive section of content. I just stumbled upon your web site
    and in accession capital to assert that I get in fact enjoyed account your blog posts.
    Anyway I'll be subscribing to your feeds and even I achievement you access consistently quickly.

    ReplyDelete
    Replies
    1. thank you verry much. your access consistently qucly by bookmark.

      Delete
  11. Appreciation to my father who informed me regarding this website, this webpage is in fact amazing.

    ReplyDelete
  12. I know this site presents quality dependent articles or reviews
    and other information, is there any other site which gives such stuff in quality?

    ReplyDelete
  13. Loving the info on this website, you have done outstanding job on the content.

    ReplyDelete
  14. We're a group of volunteers and opening a new scheme in our community.

    Your site provided us with useful information to paintings on. You've done a formidable
    job and our whole group will be grateful to you.

    ReplyDelete
  15. I want to point out my gratitude for your generosity supporting people that need assistance with this
    field. Your very own dedication to getting the message throughout appears
    to be definitely powerful and have frequently empowered professionals
    much like me to realize their desired goals. Your personal insightful report
    implies so much to me and substantially more to my office
    colleagues. Warm regards; from all of us.

    ReplyDelete
  16. Good article and right to the point. I am not sure if this is truly
    the best place to ask but do you folks have any ideea where to get some professional writers?

    Thanks :)

    ReplyDelete
    Replies
    1. thank to very much. maybe you can visit www.kompiajaib.com

      Delete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel