Cara Mempercepat Loading Gambar Blog Dengan Cdn Staticaly

Cara Mempercepat Loading Gambar Blog dengan CDN Staticaly - Gambar atau thumbnail yang dibentuk untuk sebuah post niscaya tidak akan ketinggalan untuk dipakai 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 sanggup memperlihatkan hambatan bagi sebuah blog/website kalau tidak kita atur dengan baik. Dalam artian gambar yang akan kita masukkan ke artikel harus di meningkatkan secara optimal terlebih dahulu sebelum kita tambahkan semoga supaya pemuatan dari gambar tersebut tidak membutuhkan waktu lama.

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

Pada artikel sebelumnya sudah saya tuliskan wacana sebuah cdn alternatif dari staticaly yang sanggup memuat file statis dan gratis untuk digunakan. Dan tidak hanya itu, cdn staticaly ini juga sanggup 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 dipakai di dalam sebuah artikel yang kita tulis.

Gambar yang kita upload ke dalam artikel blog dengan memanfaatkan hosting blogger memang mempunyai kecepatan terusan cukup baik, akan tetapi dengan sumbangan cdn staticaly akan menciptakan loading/kecepatan terusan gambar tersebut semakin sempurna. Dan berikut perbandingan dari gambar yang secara default di upload ke blogger dan gambar yang memakai sumbangan cdn staticaly.

Hasil GOOD untuk gambar Bogger biasa tanpa CDN Staticaly.

Hasilnya EXCELLENT untuk gambar blogger yang memakai CDN Staticaly.

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

Secara default url gambar yang dihasilkan pada gambar yang di upload ke blog ialah 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 memakai cdn staticaly pada gambar blog/website sahabat hanya perlu mengganti https:// dengan https://cdn.staticaly.com/img/ sehingga menjadi ibarat 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 ialah sebaga berikut

<amp-img alt="Cara Mempercepat Loading Gambar Blog dengan CDN Staticaly Cara Mempercepat Loading Gambar Blog dengan CDN Staticaly" 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="Cara Mempercepat Loading Gambar Blog dengan CDN Staticaly" layout="responsive"><amp-img fallback alt="Cara Mempercepat Loading Gambar Blog dengan CDN Staticaly Cara Mempercepat Loading Gambar Blog dengan CDN Staticaly" height="160" width="1245" src="https://1.bp.blogspot.com/-ADE_dEIwftk/W7qRsRMXzPI/AAAAAAAAETs/luCyNE1MjVErIjt_Qeyv9w7VGj9ThC-OACLcBGAs/s320/contoh.png" title="Cara Mempercepat Loading Gambar Blog dengan CDN Staticaly" layout="responsive"></amp-img></amp-img>

Sangat gampang bukan?

Tambahan :
Untuk pengguna blogger Non Amp dan tidak ingin repot-repot mengganti url gambar satu persatu, sahabat sanggup gunakan sumbangan script berikut dan letakkan sebelum 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>
 

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

Script datas tidak berlaku untuk gambar yang memakai javascript lain ibarat salah satu misalnya gambar related post DTE. Untuk mengatasinya sahabat 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 sanggup saya bagikan kali ini semoga bermnafaat. Selamat mencoba dan Salam luar Biasa.

Source : kompiajaib

Share this post