Optimasi Gambar Blog dengan CDN Statically

CDN Staticaly merupakan sebuah server yang memiliki tools open source yang dilengkapi dengan fitur-fitur canggih. Server CDN Staticaly memiliki data
Foto Redesain dari Png Image Optimizer Online - PNGkey

Pada kesempatan ini saya ingin berbagi pengalaman saya dalam mengatasi permasalahan gambar yang sedang menimpa blog saya nurulhuda.id sebelumnya.

Kenapa optimasi gambar pada sebuah blog diperlukan? Sederhana jawabannya optimasi gambar diperlukan karena menyangkut permasalahan performa dan kecepatan blog itu sendiri yang endingnya akan berpengaruh terhadap search engine optimization (SEO).

Cara optimasi gambar yang akan saya share ini sebenarnya sudah ada sejak beberapa tahun yang lalu, saya sendiri mengambil tutorial ini dari blognya Mas Adhy Suryadi yang beliau posting pada tahun 2018 dengan judul: Cara Mudah Menggunakan CDN Staticaly Pada Gambar Blogger Dengan Javascript.

Sebelumnya saya disibukan dengan tool kompresi gambar sebelum menguploadnya ke blog apalagi gambar yang akan saya upload berjumlah banyak dan memiliki size yang lumayan besar. Namun, sekarang kesibukan itu sedikit berkurang setelah menggunakan CDN Statically. adanya CDN Statically sangat membantu sekali yang sebelumnya gambar terasa berat (lambat loading) saat di akses di blog, kini menjadi cepat.

Berikut ini adalah grafik kecepatan gambar sebelum dan sesudah di optimasi dengan CDN Staticaly.

Redesain Foto - Nurul Huda

Apa Itu CDN Staticaly

CDN Staticaly merupakan sebuah server yang memiliki tools open source yang dilengkapi dengan fitur-fitur canggih. Server CDN Staticaly memiliki data center yang telah tersebar hampir di seluruh dunia.

Tujuan dari data center CDN Staticaly ini adalah untuk mengirim konten data dari situs website kepada visitor dengan cepat dengan mengambil data dari lokasi terdekat dengan lokasi visitor. Misalnya jika visitor anda datang berasal dari Indonesia bagian Timur sementara konten data anda tersimpan di inggis tentu ini akan memakan waktu yang cukup lama untuk pengiriman konten data tersebut. Dengan anda menggunakan CDN Staticaly maka konten data akan dikirim lagi dari inggris melainkan akan dikirim dari data center terdekat misalnya saja dari australia.

Cara menerapkan CDN Staticaly di Blog

Untuk menerapkan CDN Staticaly di postingan blog sangat mudah sekali berikut tahapannya:

Pertama: silahkan anda upload foto di postingan blog seperti biasa nanti anda akan mendapatkan url gambar yang telah anda upload tadi misalnya:

https://1.bp.blogspot.com/-AFCXgACzUIw/YMOFZ_wXKBI/AAAAAAAAE40/25zIpXkqt7YH4mCbCh-1vSNVDbFpu91vACLcBGAsYHQ/s0/Logo.png

Kedua: silahkan anda ganti https:// pada url gambar tersebut dengan https://cdn.statically.io/img/ sehingga menjadi seperti berikut:

https://cdn.statically.io/img/1.bp.blogspot.com/-AFCXgACzUIw/YMOFZ_wXKBI/AAAAAAAAE40/25zIpXkqt7YH4mCbCh-1vSNVDbFpu91vACLcBGAsYHQ/s0/Logo.png

Ketiga: silahkan anda simpan.

Gimana? mudah bukan untuk menerapkan CDN Staticaly di blog. cara tersebut adalah cara manual yang harus anda terapkan pada setiap url gambar yang telah dan / akan anda posting di blog. Namun, jangan khawatir anda dapat menerapkannya secara otomatis diblog dengan mengikuti tahapan berikut ini:

Pertama: silahkan masuk ke menu Dashboard Blog, klik Tema dan pilih Edit HTML.

Kedua: silahkan anda cari kode </body> untuk mempermudah bisa menggunakan tombol CTRL + F.

Ketiga: silahkan anda copy script js di bawah ini dan tempelkan tepat diatas 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.statically.io/img/");
  };
//]]>
</script>

Keempat: klik simpan.

Dengan menerapkan script js di atas, maka secara otomatis seluruh gambar yang anda posting di blog telah menggunakan CDN Staticaly.

Demikian panduan singkat saya tentang optimasi gambar pada situs blog. Cara ini cukup efektif untuk meningkatkan kecepatan blog hingga 50%. Silahkan anda share artikel ini jika menurut anda bermanfaat. Terima kasih