Mempercepat Loading Gambar di Blog dengan CDN

Mempercepat Loading Gambar di Blog dengan CDN - Banyak cara bisa digunakan untuk mengoptimalkan kecepatan suatu blog atau website. Mulai dari penggunaan template yang seringan mungkin, penulisan css, jangan gunakan terlalu banyak menggunakan javascript, gunakan lazy load gambar dan adsense bagi yang memiliki slot iklan sampai pada penggunaan CDN atau Content Delivery Network.

Mempercepat Loading Gambar di Blog dengan CDN

Apa itu Content Delivery Network?

Pengertian CDN atau Content Delivery Network adalah kumpulan dari server global yang terletak di beberapa data center dan tersebar di berbagai negara. Jaringan ini berfungsi untuk mengirimkan konten dari server ke suatu website.

Yang dilakukan oleh CDN adalah meningkatkan kecepatan pengiriman data melalui jaringan server kepada visitor dari lokasi terdekat yang paling memungkinkan.

Sebagai contoh visitor atau pengunjung yang berada di India, sedangkan servernya dari website anda berada di Indonesia. Karena jarak antara lokasi visitor dan server, pengiriman konten memerlukan proses waktu yang lama. Tapi, dengan adanya server CDN berada di beberapa tempat (misalnya India, US, dan Singapura) proses pengiriman konten dapat lebih cepat.

Jika pengunjung berasal dari India mungkin saja data dari server akan dikirimkan terlebih dahulu ke server terdekat dengan pengunjung. Yang mungkin dalam hal ini data dari server di Indonesia misalnya akan dikirimkan terlebih dahulu ke server yang berada di India, sehingga konten dapat lebih cepat diterima oleh visitor.

Kelebihan CDN

  1. CDN adalah solusi tepat untuk website yang memiliki banyak visitor.
  2. CDN memastikan sebuah website dapat diakses secara global.
  3. CDN cukup efektif mengurangi penggunaan resource (misalnya disk space dan bandwidth).
  4. CDN meningkatkan kecepatan loading situs web, terutama jika lokasi visitor dekat dengan server CDN.
  5. CDN dapat meningkatkan peringkat yang lebih baik di mesin pencari.
  6. CDN mendukung semua tipe website dan hosting.

Cara menggunakan CDN di Blog

Untuk mempercepat blog kalian bisa menggunakan layanan Content Delivery Network yang disediakan secara berbayar maupun secara gratis. Disini admin membagikan yang gratis saja, tapi kualitasnya bukan murahan ya. 

Admin menggunakan salah satu penyedian layanan CDN yaitu cdn.statically.io, selain support ke CSS dan Javascript layanan ini juga support ke image atau gambar. Sehingga pemuatan gambar menjadi lebih cepat.

Berikut langkah-langkahnya yang bisa diterapkan pada blog kalian.

1. Login ke dashboard blogger, kemudian editlah HTMLnya.

2. Setelah berada pada tampilan editor carilah kode </body>

3. Salin kode berikut kemudian tempelkan/paste diatas kode </body> tadi.

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

4. Terakhir simpan template yang sudah ditambahkan kode CDN tadi.

Dengan demikian blog sahabat sudah memakai layanan Content Delivery Network milik statically.io. Untuk mengeceknya silakan ikuti panduan berikut.

Cek penerapan CDN di Blog

1. Bukalah salah satu artikel kalian, tentunya yang ada badaknya eh... gambarnya ya.

2. Silakan klik kanan pada salah satu gambar kemudian pilih "copy image address" atau jika bahasa indonesia "salin alamat gambar".

3. Coba pastekan pada pada notepad. Maka kalian akan menemukan kode seperti berikut.

https://cdn.statically.io/img/1.bp.blogspot.com/-snYmZI_3lNk/X-aSxTLabTI/AAAAAAAAB4o/Sg7ghAEzUt8MTDZO0X3Xt8Tdxg7zfAIuACLcBGAsYHQ/s400/cara-membuka-dan-membalas-email-dengan-telegram.webp

Perhatikan yang admin tandai diatas, jika alamat url gambarnya sudah ada cdn.statically.io -nya maka dapat dipastikan blog anda sudah dioptimasi dengan layanan Content Delivery Network.

Demikian pembahasan bagaimana mempercepat loading gambar di blog dengan menggunakan layanan Content Delivery Network. Semoga bermanfaat.

Blogger, Content Creator, Graphic Designer, UI / UX Designer.

Post a Comment

© DhikaMedia. All rights reserved. Developed by Jago Desain