Optimasi Gambar Menggunakan CDN Staticaly Untuk Mempercepat Loading Blog

Untuk mempercepat loading blog atau website kini bisa dilakukan dengan sangat mudah dengan bantuan CDN staticaly yang mampu memperkecil ukuran gambar seoptimal mungkin.

Untuk blogger yang selalu di sibukkan dengan postingan tutorial, pastinya selalu merasa risih dengan gambar screenshoot yang di selipkan di dalam postingannya yang terlalu membebani loading blog mereka.

Tapi kini tak perlu khawatir dengan gambar dengan ukuran yang tinggi kini bisa kalian optimasi dengan adanya bantuan dari CDN Staticaly.

Dengan adanya CDN Staticaly akan membuat gambar yang harusnya sangat berat untuk dimuat di blog, kini dengan sangat cepat akan termuat tanpa menggunaan aplikasi apa pun.

Apa sih Staticaly ini ?

Singkatnya, Staticaly adalah CDN Gratis, Handal, dan Open Source untuk file statis kalian, yang dilengkapi dengan fitur-fitur canggih sehingga kalian dapat memuat proyek kalian dan membuat demo dari GitHub, GitLab, dan Bitbucket lebih mudah atau bahkan memuat gambar dari server asal kalian menjadi lebih cepat.

Saya sendiri selama menjalankan blog ini sering mengeluh, di mana gambar di setiap postingan ada banyak sekali, bahkan membuat loading blog ini terasa berat, untuk versi dekstop, sedangkan untuk versi mobile sendiri bisa teratasi dengan fitur AMP pada blog ini.

Baru - baru ini admin dari blog kompiajaib.com membuat sebuah artikel yang membahas tentang CDN Staticaly. Iya, Artikel kali ini terinspirasi dari blognya Mas Adhy Suryadi. Di mana ia membahas bagaimana penggunaan Staticaly untuk sumber CDN gambar blogger.

Kalian bisa berkunjung ke blog Mas Adhy untuk melihat penjelasannya.

Untuk peneranpannya di blog ini sendiri, saya menggunakan cara ini hanya pada gambar screenshoot di tengah postingan saja, karena untuk thumbnail blog ini sudah memiliki ukuran yang sangat kecil dan tidak berdampak buruk pada loading blog.

Lalu bagaimana untuk menerapkan cara ini pada blog ?

Caranya sangat mudah, jika kalian mengupload gambar melalui blogger, biasanya kalian akan mendapatkan url gambar yang kurang lebih seperti berikut ini.

https://2.bp.blogspot.com/-pB5sVdkn88o/W6rkzskMGYI/AAAAAAAAEC8/sGWln4I5jhc1GL-p1JXYXus-hc8xUVIZwCLcBGAs/s1600/cdn-staticaly.png

Kalian cukup mengganti https:// dengan https://cdn.staticaly.com/img/ sehingga menjadi seperti berikut.

https://cdn.staticaly.com/img/2.bp.blogspot.com/-pB5sVdkn88o/W6rkzskMGYI/AAAAAAAAEC8/sGWln4I5jhc1GL-p1JXYXus-hc8xUVIZwCLcBGAs/s1600/cdn-staticaly.png

atau, bisa menggunakan cara yang lebih mudah, dengan menerapkan javascript, dengan menyimpan kode di bawah ini tepat di atas 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.io/img/");
  };
//]]>
</script>

Dengan menggunakan script di atas, akan membuat semua gambar yang ada di dalam blog akan menggunakan staticaly secara otomatis. jadi, silahkan pilih mau menggunakan cara manual atau otomatis.

Dengan begitu dapat di pastikan setiap gambar yang kalian selipkan di dalam postingan blog akan di muat dengan sangat cepat.

Sebagai contoh,

Di sini, saya mengupload gambar dengan ukuran 456KB melalui blogger. Tentunya, dapat di pastikan dengan ukuran seperti itu, gambar akan di muat dengan lebih lama.

Untuk membuktikan, saya cek gambar yang saya upload barusan melalui situs webspeedtest.cloudinary.com dan hasilnya dapat di lihat melalui gambar berikut.

Gambar Sebelum di Optimasi Statically.

Gambar di atas menunjukkan Score Image adalah C yang artinya lumayan berat untuk di muat.

Selanjutnya, saya akan cek gambar yang sama namun dengan penggunaan CDN Staticaly. Dan hasilnya dapat di lihat melalui gambar berikut.

Gambar Setelah Optimasi Statically.

Gambar di atas menunjukkan Score Image adalah A yang artinya sangat cepat untuk di muat. Dan bisa kalian lihat juga ukuran file yang tadinya 456KB kini menjadi 56KB.

Bagaimana pendapat kalian ?

Saya sendiri memutuskan untuk mencoba menggunakan cara ini pada semua artikel yang akan saya tulis kedepannya, karena memang untuk blog tutorial seperti ini akan sangat membantu untuk kecepatan akses blog.

Pertanyaan Yang Sering Diajukan

Kang, gimana hasil gambar setelah menggunakan CDN Staticaly ?
Dari hasil uji coba, dari segi kapasitas dapat di lihat ukuran yang di hasilkan menjadi sangat kecil. Sedangkan dari segi kualitas gambar, tidak begitu menimbulkan dampak (hanya mengalami sedikit sekali penurunan kualitas). Silahkan kalian uji sendiri untuk membuktikan.
Apa CDN Staticaly bisa digunakan jangka panjang ?
Untuk saat ini saya belum bisa memastikan apakah ini bisa digunakan untuk jangka panjang.
Apakah cara ini bisa di terapkan untuk blog AMP ?
Tentu saja bisa, tidak hanya AMP, Blogger, Wordpress ataupun Website jenis apapun bisa menggunakan cara ini.
Apakah ini ada batasan atau limit dari jumlah maksimal kapasitas gambar ?
Sepertinya tidak ada limit, saya mencoba mengupload gambar dengan kapasitas 4MB masih tetap bisa kok. Apa ada gambar yang ukurannya lebih dari itu ?
Penutup

Cara ini dapat meningkatkan kecepatan akses blog hingga 50%, pasalnya hasil kompresi gambar yang dihasilkan sangatlah baik dengan tetap mempertahankan kualitas gambar yang jernih dengan kapasitas yang minim.

Cuma anak kemarin sore. Email kerjasama ke idnxmus@gmail.com

Baca Juga Nih

Ada 10 Caci Maki

Aturan Komentar :
Centang "Beritahu Saya" atau "Notify Me" untuk mendapatkan notifikasi balasan komentar via Email.
Gunakan tag HTML < em > untuk menuliskan potongan code atau URL. Contoh : < em >isi pesan< /em >
BUKA KOMENTAR