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 duduk perkara pemuatan/loading blog, dan skor kecepatan blog juga tidak terlalu baik.
Pada artikel sebelumnya sudah saya tuliskan perihal 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 susukan cukup baik, akan tetapi dengan proteksi cdn staticaly akan menciptakan loading/kecepatan susukan gambar tersebut semakin sempurna. Dan berikut perbandingan dari gambar yang secara default di upload ke blogger dan gambar yang memakai proteksi cdn staticaly.
Kedua perbandingan diatas merupakan reseource dari gambar yang sama dengan kecepatan susukan dari blogger dan proteksi cdn staticaly.
Secara default url gambar yang dihasilkan pada gambar yang di upload ke blog yaitu sebagai berikut
Dan untuk memakai cdn staticaly pada gambar blog/website teman hanya perlu mengganti https:// dengan https://cdn.staticaly.com/img/ sehingga menjadi menyerupai berikut ini
Cara diatas berlaku untuk blog Non Amp saja, sedangkan untuk gambar blog Amp yaitu sebaga berikut
Sangat gampang bukan?
Tambahan :
Untuk pengguna blogger Non Amp dan tidak ingin repot-repot mengganti url gambar satu persatu, teman sanggup gunakan proteksi script berikut dan letakkan sebelum isyarat
Untuk mengetahui script diatas berfungsi atau tdak, silahkan inspect element gambar blog sobat.
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
Sumber https://www.pehawe.info/
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 duduk perkara pemuatan/loading blog, dan skor kecepatan blog juga tidak terlalu baik.
Pada artikel sebelumnya sudah saya tuliskan perihal 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 susukan cukup baik, akan tetapi dengan proteksi cdn staticaly akan menciptakan loading/kecepatan susukan gambar tersebut semakin sempurna. Dan berikut perbandingan dari gambar yang secara default di upload ke blogger dan gambar yang memakai proteksi 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 susukan dari blogger dan proteksi cdn staticaly.
Secara default url gambar yang dihasilkan pada gambar yang di upload ke blog yaitu 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 teman hanya perlu mengganti https:// dengan https://cdn.staticaly.com/img/ sehingga menjadi menyerupai 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 yaitu 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, teman sanggup gunakan proteksi script berikut dan letakkan sebelum isyarat
</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 menyerupai salah satu misalnya gambar related post DTE. Untuk mengatasinya teman 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
Sumber https://www.pehawe.info/
