Skip to main content

Begini!!! Cara Optimasi Loading Gambar Menggunakan CDN Statically di Blogger

Cara optimasi gambar postingan blog menggunakan statyically.io - Sudah berkali kali saya sebutkan bahwa loading blog sangat penting untuk meningkatkan pageview suatu blog, dan ada satu kesalahan yang tidak begitu diperhatikan oleh para blogger pemula, dimana mereka hanya mementingkan kecepatan blog hanya di homepage saja, tidak pada bagian postingan.

Sebenarnya yang terpenting adalah di bagian postingan, mengapa saya jelaskan begitu? Ya karena rata rata pengunjung blog datang bukan ke bagian homepage malainkan ke bagian artikel yang muncul di mesin pencarian.

Untuk itu, tidak ada salahnya jika anda mencoba untuk optimasi loading blog terkhususnya pada bagian postingan. Hampir semua kendala yang memperlambat loading artikel anda ada pada bagian gambar (image), dan itu cukup memberatkan apalagi bagi pengunjung yang memiliki koneksi internet cukup lambat.

Maka dari itu, saya mencoba membantu anda mengoptimasi gambar postingan menggunakan statically.io yang sudah banyak digunakan beberapa blog besar seperti kompi ajaib.

BACA JUGA : Cara Membuat Manifest JSON di Blogger

Statically.io

Sebelum masuk ke tutorial mari kita berkenalan terlebih dahulu, statically.io merupakan media hosting gratis yang di memiliki hosting cukup lengkap, mulai dari js,css,html, hingga img.

Sebenarnya masih ada satu hosting gratis andalan saya yaitu github, namun github sudah mulai kalah saing dibanding statically.io yang memiliki fitur cukup lengkap.

Cara Optimasi Gambar Artikel Postingan Blog

Untuk mempercepat img pada postingan blog ada 2 alternatif silahkan ikuti tutorial berikut.

1. Memasang statically.io pada URL gambar

Cara pertama cukup mudah, anda hanya perlu mengubah alamat URL gambar yang anda posting.

Biasanya URL gambar di blogger kurang lebih seperti di bawah ini

https://1.bp.blogspot.com/-TFYRiiB0ZFY/YFS-E76gXFI/AAAAAAAAARs/lBg1zQ2D2Pg22zkMwKYNc-1WIc1nEu9HgCLcBGAsYHQ/s1280/cdn-statically.jpg

Nah, anda hanya perlu mengubah di bagian https:// menjadi https://cdn.statically.io/img/

Sehingga URL gambar menjadi seperti dibawah ini

https://cdn.statically.io/img/1.bp.blogspot.com/-TFYRiiB0ZFY/YFS-E76gXFI/AAAAAAAAARs/lBg1zQ2D2Pg22zkMwKYNc-1WIc1nEu9HgCLcBGAsYHQ/s1280/cdn-statically.jpg

Jika anda tidak mau ribet maka gunakan alternatif kedua.

2. Menambahkan script cdn.statically.io

Silahkan buka dashboard blogger anda kemudian pilih tema >> edit HTML.

Copy kode dibawah ini tepat diatas </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.statically.io/img/");
  };
//]]>
</script>

Kemudian simpan tema, dengan menambahkan script di atas maka seluruh gambar yang ada di blog otomatis akan terpasang cdn statically.

Penutup

Oke saya rasa hanya itu yang bisa saya share untuk anda tentang cara optimasi kecepatan gambar postingan blog dengan menggunakan cdn statically.io

Semoga tutorial ini bermanfaat untuk anda dan bisa memberikan dampak positif terhadap perkembangan blog anda kedepannya.

www.repick.net
NOTE : Konten yang ada di blog ini asli karya Gio Lesmana. Tidak diperkenankan mengambil isi konten tanpa izin. Traktir saya kopi melalui: Paypal.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar