Optimasi Gambar Menggunakan CDN Statically Untuk Mempercepat Loading Blog

CDN Statically Untuk Mempercepat Loading Blog

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 Statically.

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

Apa sih Statically 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 Statically. 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.statically.io/img/ sehingga menjadi seperti berikut.

https://cdn.statically.io/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.statically.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.

Optimasi Gambar Blogger
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 Statically. Dan hasilnya dapat di lihat melalui gambar berikut.

Optimasi Gambar Blogger
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.

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.