Mengatasi Serve images in next-gen formats Menggunakan Statically WEBP

Mengatasi Serve images in next-gen formats Menggunakan Statically WEBP - Yahaloo kimaks , gimana kabarnya ? semoga selalu berada di jalan kesantuyan.Pada postingan kali ini saya mau memberikan tutorial yang mungkin menarik untuk kamu coba.

Yups , sesuai judulnya kali ini saya mau membahas cara mengatasi masalah pagespeed yang masih merah , ataupun kuning.Mungkin beberapa diantara kamu masih memujakan fitur test pagespeed dari google.

Well , that's just bullshit, kenapa? karena test bukan hanya tergantung pada kode yang kita pakai melainkan tergantung seberapa cepat koneksi internet yang kita pakai.Itulah alasan ketika kalian menggunakan gtmetrix dan pagespeed google skor nya berbeda.cuiih.

Balik ke topic , Serve images in next-gen formats ini adalah salah satu masalah yang terjadi karena resource gambar pada blog sangatlah besar bahkan kalau menyentuh 100kb aja udah bikin skor kuning.

Belum lagi kalian tidak menghost gambar kalian di cdn lokal sendiri melainkan semua gambarnya menuju ke bp.blogspot.com.Tapi tenang sekarang ada sedikit solusinya yaitu menggunakan Statically.io dan mengubah formatnya menjadi webp.

Contoh misal gambar asli blog :

https://3.bp.blogspot.com/-WvjDGI4wI1Q/XSmKyEfpsuI/AAAAAAAADqc/GGdZ0RndJGc8xBTn3myp0THfQltQKK2vQCLcBGAs/w600-h337-p-k-no-nu/Km6K4E05HjM.jpg

tapi blogger sudah suport untuk mengubahnya menjadi WEBP menggunakan statically.io seperti ini:

https://cdn.statically.io/img/3.bp.blogspot.com/-WvjDGI4wI1Q/XSmKyEfpsuI/AAAAAAAADqc/GGdZ0RndJGc8xBTn3myp0THfQltQKK2vQCLcBGAs/w600-h337-p-k-no-nu/Km6K4E05HjM.jpg?format=webp

Sekarang coba buka url diatas maka gambar otomatis akan berubah jadi webp dan berubah ke host cdn statically tapi gambar original tidak berubah , wooo sugoii deso?

Sekarang masuk ke tutorial bagaimana cara mengubahh  semua gambar yang ada diblog jadi format webp tanpa mengubah urlnya satu persatu? santuy kalau ada cara yang lebih cepat kenapa tidak?

1.Masuk ke Blogger > Template > Edit HTML
2.Cari kode </body> dan letakan kode berikut tepat diatasnya:
Versi Pure Javascript:

<script>
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) { 
  var src = imgs[i].src;
  imgs[i].src = src.replace(/^(http:|https:)?///,'https://cdn.statically.io/img/') + "?format=webp";
}
</script>

Versi Jquery.

<script>
$('img').each(function(){
  var $this = $(this);
  $this.attr('src',$this.attr('src').replace(/^(http:|https:)?///,'https://cdn.statically.io/img/') + "?format=webp");
})
</script>

Silahkan pilih versi kode yang mana aja jika blog kalian sudah terpasang Jquery ya monggo , tapi kalau belum silahkan pake yang pure javascript.

3.Klik Simpa Tema , dan cek blog kalian
4.Silahkan klik gambar blog kalian apakah sudah berubah jadi format webp? caranya tinggal klik kanan pada salah satu gambar dan open image in new tab.
5.Kalau berhasil akan muncul logo favicon bewarna merah petir saat diakses bukan favicon blogger lagi dan url gambar masih tetap sama dan menambah host statically di depannya.

Berikut perbandingan tester sebelum dan sesudah menggunakan Statically.io tanpa (LazyLoad)

Sebelum:

Sesudah :

Yups , lumayan tapi kurang maksimal kalau  ingin jadi sempurna kalian bisa menerapkan caranya Kompi Ajaib dengan menggabungkan script Lazysize dan Imgpx.(untuk versi kompi ajaib cek tutorialnya disini).

Bagusan mana ? tergantung kalau kalian mau menambahkan beberapa script ke blog ya silahkan menggunakan caranya KompiAjaib.

Ok sekian dulu tutorial hari ini soreja sayonaraa minaa.