Cara Mempercepat Loading Gambar Blog dengan CDN Staticaly

Cara Mempercepat Loading Gambar Blog dengan CDN Staticaly - Gambar atau thumbnail yang dibuat untuk sebuah post pasti tidak akan ketinggalan untuk digunakan oleh para pembuat konten sebuah blog/web, baik sebagai thumbnail atau gambar utama dari sebuah post ataupun gambar sebagai penjelas dari artikel yang dibuat.

Akan tetapi gambar ini bisa memberikan kendala bagi sebuah blog/website jika tidak kita atur dengan baik. Dalam artian gambar yang akan kita masukkan ke artikel harus di optimasi terlebih dahulu sebelum kita tambahkan agar supaya pemuatan dari gambar tersebut tidak membutuhkan waktu lama.

Hal tersebut akan menghasilkan performa kurang baik terhadap blog kita dalam masalah pemuatan/loading blog, dan skor kecepatan blog juga tidak terlalu baik.

Pada artikel sebelumnya sudah saya tuliskan tentang sebuah cdn alternatif dari staticaly yang dapat memuat file statis dan gratis untuk digunakan. Dan tidak hanya itu, cdn staticaly ini juga bisa kita manfaatkan untuk mempercepat loading gambar sebuah blog/website.

Sebagai pengguna blogger kita akan memanfaatkan hosting yang memang sudah disediakan secara gratis oleh blogger untuk menampung gambar, dan kita bebas mengupload gambar apa saja yang ingin digunakan di dalam sebuah artikel yang kita tulis.

Gambar yang kita upload ke dalam artikel blog dengan memanfaatkan hosting blogger memang memiliki kecepatan akses cukup baik, akan tetapi dengan bantuan cdn staticaly akan membuat loading/kecepatan akses gambar tersebut semakin sempurna. Dan berikut perbandingan dari gambar yang secara default di upload ke blogger dan gambar yang menggunakan bantuan cdn staticaly.






Kedua perbandingan diatas merupakan reseource dari gambar yang sama dengan kecepatan akses dari blogger dan bantuan cdn staticaly.

Secara default url gambar yang dihasilkan pada gambar yang di upload ke blog adalah sebagai berikut

<img border="0" data-original-height="625" data-original-width="1245" height="160" src="https://1.bp.blogspot.com/-ADE_dEIwftk/W7qRsRMXzPI/AAAAAAAAETs/luCyNE1MjVErIjt_Qeyv9w7VGj9ThC-OACLcBGAs/s320/contoh.png" width="320" />

Dan untuk menggunakan cdn staticaly pada gambar blog/website sobat hanya perlu mengganti https:// dengan https://cdn.staticaly.com/img/ sehingga menjadi seperti berikut ini

<img border="0" data-original-height="625" data-original-width="1245" height="160" src="https://cdn.staticaly.com/img/1.bp.blogspot.com/-ADE_dEIwftk/W7qRsRMXzPI/AAAAAAAAETs/luCyNE1MjVErIjt_Qeyv9w7VGj9ThC-OACLcBGAs/s320/contoh.png" width="320" />

Cara diatas berlaku untuk blog Non Amp saja, sedangkan untuk gambar blog Amp adalah sebaga berikut

<amp-img alt="gambar blogger" height="160" width="1245" src="https://cdn.staticaly.com/img/1.bp.blogspot.com/-ADE_dEIwftk/W7qRsRMXzPI/AAAAAAAAETs/luCyNE1MjVErIjt_Qeyv9w7VGj9ThC-OACLcBGAs/s320/contoh.png" title="gambar blogger" layout="responsive"><amp-img fallback alt="gambar blogger" height="160" width="1245" src="https://1.bp.blogspot.com/-ADE_dEIwftk/W7qRsRMXzPI/AAAAAAAAETs/luCyNE1MjVErIjt_Qeyv9w7VGj9ThC-OACLcBGAs/s320/contoh.png" title="gambar blogger" layout="responsive"></amp-img></amp-img>

Sangat mudah bukan?

Tambahan :
Untuk pengguna blogger Non Amp dan tidak ingin repot-repot mengganti url gambar satu persatu, sobat bisa gunakan bantuan script berikut dan letakkan sebelum kode </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>

Untuk mengetahui script diatas berfungsi atau tdak, silahkan inspect element gambar blog sobat.

Script datas tidak berlaku untuk gambar yang menggunakan javascript lain seperti salah satu contohnya gambar related post DTE. Untuk mengatasinya sobat perlu menggantinya secara manual pada javascript DTE, dan juga script diatas tidak berlaku unuk blog AMP

Demikian tutorial Cara Mempercepat Loading Gambar Blog dengan CDN Staticaly yang dapat saya bagikan kali ini semoga bermnafaat. Selamat mencoba dan Salam luar Biasa.

Source : kompiajaib