Optimasi Gambar Memakai Cdn Staticaly 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 sekarang tak perlu khawatir dengan gambar dengan ukuran yang tinggi sekarang sanggup kalian meningkatkan secara optimal dengan adanya derma dari CDN Staticaly.

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

Baca Juga


Apa sih Staticaly ini ?

Singkatnya, Staticaly ialah CDN Gratis, Handal, dan Open Source untuk file statis kalian, yang dilengkapi dengan fitur-fitur canggih sehingga kalian sanggup memuat proyek kalian dan menciptakan demo dari GitHub, GitLab, dan Bitbucket lebih gampang 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 menciptakan loading blog ini terasa berat, untuk versi dekstop, sedangkan untuk versi mobile sendiri sanggup teratasi dengan fitur AMP pada blog ini.

Baru - gres ini admin dari blog CDN Staticaly. Iya, Artikel kali ini terinspirasi dari blognya Mas Adhy Suryadi. Di mana dia membahas bagaimana penggunaan Staticaly untuk sumber CDN gambar blogger.

Kalian sanggup berkunjung ke blog Mas Adhy untuk melihat penjelasannya.

Untuk peneranpannya di blog ini sendiri, aku memakai cara ini hanya pada gambar screenshoot di tengah postingan saja, sebab untuk thumbnail blog ini sudah mempunyai ukuran yang sangat kecil dan tidak berdampak jelek pada loading blog.

Lalu bagaimana untuk menerapkan cara ini pada blog ?

Caranya sangat mudah, jikalau kalian mengupload gambar melalui blogger, biasanya kalian akan mendapat url gambar yang kurang lebih ibarat 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 ibarat berikut. https://cdn.staticaly.com/img/2.bp.blogspot.com/-pB5sVdkn88o/W6rkzskMGYI/AAAAAAAAEC8/sGWln4I5jhc1GL-p1JXYXus-hc8xUVIZwCLcBGAs/s1600/cdn-staticaly.png atau, sanggup memakai cara yang lebih mudah, dengan menerapkan javascript, dengan menyimpan instruksi di bawah ini sempurna di atas instruksi </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 memakai script di atas, akan menciptakan semua gambar yang ada di dalam blog akan memakai staticaly secara otomatis. jadi, silahkan pilih mau memakai cara manual atau otomatis.

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

Sebagai contoh,

Di sini, aku mengupload gambar dengan ukuran 456KB melalui blogger. Tentunya, sanggup di pastikan dengan ukuran ibarat itu, gambar akan di muat dengan lebih lama.

Untuk membuktikan, aku cek gambar yang aku upload barusan melalui situs webspeedtest.cloudinary.com dan balasannya sanggup di lihat melalui gambar berikut.

Image Source "idnxmus.com"
Gambar di atas menunjukkan Score Image ialah C yang artinya tidak mengecewakan berat untuk di muat.

Selanjutnya, aku akan cek gambar yang sama namun dengan penggunaan CDN Staticaly. Dan balasannya sanggup di lihat melalui gambar berikut.

Image Source "idnxmus.com"
Gambar di atas menunjukkan Score Image ialah A yang artinya sangat cepat untuk di muat. Dan sanggup kalian lihat juga ukuran file yang tadinya 456KB sekarang menjadi 56KB.

Bagaimana pendapat kalian ?

Saya sendiri tetapkan untuk mencoba memakai cara ini pada semua artikel yang akan aku tulis kedepannya, sebab memang untuk blog tutorial ibarat ini akan sangat membantu untuk kecepatan jalan masuk blog.

Pertanyaan Yang Sering Diajukan

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

Penutup

Cara ini sanggup meningkatkan kecepatan jalan masuk blog sampai 50%, pasalnya hasil kompresi gambar yang dihasilkan sangatlah baik dengan tetap mempertahankan kualitas gambar yang jernih dengan kapasitas yang minim.
Sumber https://www.idnxmus.com/

Artikel Terkait

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel