Optimasi Gambar menggunakan CDN Statically untuk mempercepat loading Blogmu

Optimasi Gambar menggunakan CDN Statically untuk mempercepat loading Blogmu

Kebutuhan gambar dalam sebuah blog memang diperlukan, guna untuk mempertegas isi dalam sebuah artikel.

Tapi terkadang, gambar dalam sebuah website juga dapat membebani blog, sehingga ketika memuat blog akan menjadi lebih lama.

Untuk itu perlu mengakali supaya gambar di blog tidak terlalu membebani halaman. Solusinya adalah menggunakan CDN Statically.

Singkatnya, CDN Statically adalah sebuah layanan CDN gratis untuk mengoptimalkan gambar di dalam sebuah website agar bisa memuat dengan lebih cepat.

Untuk penerapan, bisa dilihat di artikel berikut ini.

Kegunaan

Manfaat dari optimasi gambar dengan CDN Statically adalah bisa membantu gambar menjadi ringan dengan mengkompres gambar secara otomatis.

Manfaat lainnya yang bisa didapatkan adalah bisa meningkatkan PageSpeed score website Kami.

Penerapan CDN Statically di Blogger

Di CMS Wordpress, CDN Statically sudah support dengan menyediakan fitur plugin, sehingga tidak perlu setting ribet lagi untuk memasangnya.

Walaupun di Blogger (Blogspot) tidak mempunyai plugin seperti Wordpress, tapi Kita juga bisa menerapkan di Blogger dengan script khusus.

Ada 2 tipe Blogger saat ini, yaitu Blogger Non-AMP dan Blogger AMP. Untuk itu, Kamu harus tau template Blogger tipe mana yang Kamu gunakan. Berikut cara memasang script optimasi gambar blog:

CDN Statically tipe Blogger Non-AMP

Untuk Kamu yang menggunakan template non-AMP, memasang CDN Statically hanya perlu menggunakan satu script. Dengan script tersebut, nantinya semua gambar yang ada di Blog secara otomatis langsung teroptimasi termasuk ketika baru mengupload gambar. Berikut kode scriptnya:

• Masuk ke Blog
• Pilih menu Tema
• Klik Edit Tema
• Lalu cari kode </body>
• Silhakan Copy kode berikut:

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

• Paste script diatas tepat di atas </body>
• Klik Simpan

Dan sekarang, gambar di web Kamu sudah di optimasi secara otomatis.

CDN Statically tipe Blogger AMP

Untuk saat ini, template Blogger dengan tipe AMP tidak bisa menggunakan script otomatis seperti tipe Non AMP dikarenakan tipe AMP tidak mensupport JavaScript.

Maka dari itu, Kamu harus melakukannya secara manual dengan mengubah URL gambar agar dapat teroptimasi dengan CDN Statically.

Cara perubahannya adalah sebagai berikut:

Ubah URL https:// menjadi https://cdn.statically.io/img/...... Sebagai contoh, bisa lihat URL berikut:

https://blogger.googleusercontent.com/img/b/.....
Menjadi
https://cdn.statically.io/img/blogger.googleusercontent.com/img/b/

Mungkin penerapannya cukup melelahkan, karena harus merubah satu persatu.

Penutup

Itulah tutorial cara pasang optimasi blog menggunakan CDN Statically. Tentunya optimasi gambar dapat mempercepat Loading Blog dan memudahkan situs Kamu bersaing di hasil pencarian teratas Google.