Tutorial Mempercepat blog dengan Script Lazy Load Image Otomatis di Blogger

RahmanCyber.NET | Blogger - Memang di Blogger sendiri permasalahan terbesar yang masih classic dari dulu hingga sekarang adalah OPTIMASI Image. 

 

{getToc} $title={Table of Contents}

 

Ternyata Image atau Gambar memegang peranan penting dalam hal pemborosan Paket Data,semakin banyak muatan gambar, maka data yang digunakan bakalan semakin banyak juga. 

 

Beberapa blogger malah ada yang tidak menampilkan gambar, jadi hanya tulisan saja... dan terbukti kecepatan blognya menjadi tidak dapat diragukan lagi. 

 

Dari waktu ke waktu optimasi gambar atau image pun dilakukan, terutama bagi para pelaku pelaku industri besar dibidang teknologi web, agar semakin kecil ukuran gambar, tetapi memiliki kualitas yang baik. 

 

Saya pernah menyinggung format webp, yang merupakan format gambar next generation kalo sebutannya di Google PageSpeed. 

 

 

 

 

 

Konsep Optimasi Image

 

Mungkin bagi website berbasih web hosting akan mudah melakukan konversi secara otomatis.. 

 

Konsepnya gini...

 

• Kita Upload Image
• Lalu Image itu di bagi kedalam folder beda, dengan ukuran yang auto scale.
• Di bagi pula kedalam folder thumb, yang secara otomatis convert ke format webp.
• Ketika pengunjung melakukan request data, maka yang nampak adalah thumbnail nya, yang formatnya webp.

Konsep ini saya amati dari beberapa website microstock, seperti Pixabay, dimana pada bagian preview di halaman utama, gambar yang ditampilkan adalah gambar dengan ekstensi webp.

 

Contoh Penerapan ekstensi gambar Webp di halaman utama Pixabay

 

 

 

 

Ketika kita upload image, maka imagenya langsung bisa scale ke beberapa ukuran.

dan pada halaman depan Pixabay sendiri yang berisi tampilan banyak foto.. ternyata ketika kita download, ukurannya di scale kecil dengan format webp, tetapi tidak mengurangi kualitas tampilan. 

 

 

Hal itu bakalan sangat melelahkan jika dikerjakan secara manual..

Misalnya saja

 

• Orang Upload Gambar
  
  
• Lalu pekerja melakukan scaling gambar tersebut dengan software pengolah grafis misalnya photoshop, di scale dengan format yang sudah distandarisasi ( Ukuran Small, Large, Extra Large )
  
  
• Ditaruh ke beberapa folder menggunakan FTP misalnya FILEZILA
  
  
• Dan itu baru 1 orang, coba bayangkan kalo Situs Microstock semacam PIXABAY
  
  
• Memiliki Jutaan User aktif, yang upload gambar tiap detik ada saja yang upload..
  
  
• Berapa karyawan yang harus dimiliki? untuk hanya sekedar melakukan Scale dan ubah format?
  
  
• Belum lagi jika ada kesalahan upload dari user, dan ingin mengupload ulang..
  
  
• Nah inilah fungsi dari DISIPLIN ILMU SISTEM INFORMASI atau INFORMATIKA

Jadi bagaimana caranya sistem itu membuat segalanya serba otomatis, bahkan hanya dijalankan beberapa karyawan saja bisa menghandle jutaan image tiap jam. 

 

atau Karyawan hanya melakukan moderasi saja, sehingga bisa fokus ke pemilihan kualitas..

 

Nah itu dia.

Kenapa Bidang IT itu merupakan salah satu bidang yang mahal...

 

karena ia membuat sebuah fungsi yang dapat menghandle pekerjaan yang seharusnya orang banyak yang menghandlenya.

Apalagi dengan adanya LOG atau Riwayat gubahan, sehingga hampir sama kayak CCTV yang bisa di ulik datanya, kalo ada nomor seri ( unik ) bisa dong langsung menggunakan fungsi FIND untuk mencari LOG tertentu sebagai barang bukti.. hehe

Bagaimana dengan BLOGGER?

 

 

Kita tau bahwa sebagai user yang disediakan ruang secara cuma cuma, kita tidak memiliki akses ke host secara langsung, kita tidak bisa masuk ke direktori lebih dalam.. dan kita hanyalah dapat melakukan pengaturan sesuai dengan apa yang sudah ditentukan oleh GM atau GAME MASTER.. hehe, ya tentu dari pihak blogger.

Jadi sebenarnya terbatas.. kebanyakan para blogger itu memanfaatkan celah yang ada, tetapi sebatas memanipulasi sahaja, karena memang ada keterbatasan disitu.

 

Lha wong sebenarnya Blogger itu kan platform untuk ngeblog.. hehe

 

ya mustinya fokus ke konten tulisan dong...

 

 

Jadi pake Template SKYLIGHT BASIC aja udah cukup sebenarnya..

 

 

nah tapi kan ada yang bisa dimanfaatkan, yaitu keleluasaan kita mengatur CSS, Javascript dan HTML di Blogger membuat kita bisa melakukan eksplorasi agar blog kita tampilannya bagus.. bahkan seperti halnya website hosting pada umumnya..

 

 

Krena beneran Blogger itu baik sekali, makannya bagi saya sendiri, saya bisa menempatkan BLOGGER sebagai platform unggulan di dunia blogging.

 

Ini perspektif saya sendiri, karena disini kita bisa bebas melakukan pengkreatifitasan terhadap blog kita selayaknya kita bermain WEB HOSTING.

 

 

Ada belajar CSS disana, Javascript juga, HTML juga malah dominasi ( yaeyalah ) yang enggak bisa itu PHP... hehe

 

 

Ya.. karena PHP biasanya langsung berhubungan ke server SQL dong atau Table tablenya.. hehe ( CRUD ) 

 

Loh kok tau bang?

 

Ya itukan pelajaran kuliah di Informatika... hehe...

 

 

Oke balik lagi ke Blogger..

Nah maka dari itulah, karena perbedaan yang signifikan antara blogger dengan web hosting, ya... cara satu satunya kita bisa lakukan dengan melakukan Konversi atau pengoptimalan gambar dengan ukuran sekecil mungkin dalam satuan kb.

 

Gambar yang di Optimalkan itu biasanya kurang dari 77kb.. itu udah bagus..

Lah.. entar pecah mas?

nah itu dia... makannya seminimal mungkin... sekecil mungkin..

dan sekarang udah hadir format webp... 

 

Lah ... udah terlanjur upload gambar di ribuan postingan, masak mau di ganti satu persatu...?

 

Ya bagaimana lagi, kalo enggak mau ganti ya.. berarti untuk upload kedepannya mulai melakukan optimalisasi gambar, yang sebelumnya biarkan aja.

Adakah cara otomatis ganti semua gambar di blogger menjadi Webp? 

 

Beberapa sumber menyarankan untuk menambahkan -rw pada url image setelah kode pada image yang diupload di blogger yang telah diupload sebelumnya...

 

Contoh :

<div class=”separator” style=”clear: both; text-align: center;”>
<a href=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_LBmhtH_jm1DjY30XAHsmouKOwilIwxuJoTnqtUXH1rauOsKMadWmB-UBT81bxufab-tZOkKk9VGJfvc2R3w5nXJX2zASR3Yr69QeTs09Ka35UjrAe8wrjYxP2ytr3Ow8BVNFxyV8TBw/s1600/IMG_20200221_163235.webp” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img alt=”How serve images in webP format in blogger.” border=”0″ data-original-height=”544″ data-original-width=”720″ src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_LBmhtH_jm1DjY30XAHsmouKOwilIwxuJoTnqtUXH1rauOsKMadWmB-UBT81bxufab-tZOkKk9VGJfvc2R3w5nXJX2zASR3Yr69QeTs09Ka35UjrAe8wrjYxP2ytr3Ow8BVNFxyV8TBw/s1600/IMG_20200221_163235.webp” title=”How to serve images in next-gen Format in blogger.” /></a></div>
<br /></div>
 

 

Menjadi :

 

<div class=”separator” style=”clear: both; text-align: center;”>
<a href=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_LBmhtH_jm1DjY30XAHsmouKOwilIwxuJoTnqtUXH1rauOsKMadWmB-UBT81bxufab-tZOkKk9VGJfvc2R3w5nXJX2zASR3Yr69QeTs09Ka35UjrAe8wrjYxP2ytr3Ow8BVNFxyV8TBw/-rw/IMG_20200221_163235.webp” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img alt=”How serve images in webP format in blogger.” border=”0″ data-original-height=”544″ data-original-width=”720″ src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_LBmhtH_jm1DjY30XAHsmouKOwilIwxuJoTnqtUXH1rauOsKMadWmB-UBT81bxufab-tZOkKk9VGJfvc2R3w5nXJX2zASR3Yr69QeTs09Ka35UjrAe8wrjYxP2ytr3Ow8BVNFxyV8TBw/-rw/IMG_20200221_163235.webp” title=”How to serve images in next-gen Format in blogger.” /></a></div>
<br /></div>
 

 

Catatan. 

Kadang gambar memiliki kode "s1600" tetapi Anda mungkin melihat kode lain seperti, "s200", "s320", "s400", "s640" dll. Tapi jangan khawatir tentang ini. Anda hanya harus menulis "-rw" setelah kode tersebut, apa pun angkanya, entah s1600/s200/s320/s400/s640. 

 

 

 

saya sendiri belum nemuin hal lain selain itu,

Lalu Apa sih Fungsi Lazy Load Image ini?

Dari namanya aja udah dapet diartikan kalo Lazy itu Males.. jadi lazy load image itu males memuat image.. hehe

 

Enggak enggak... bercanda...

Jadi sebenarnya konsep dasar dari Lazy Load Image ini adalah hampir menyerupai FEED INSTAGRAM atau sejenisnya yang udah merambah ke pasar mobile, kalo kalian liat, dan amati, postingan instagram itu banyak... banyak banget malah.. coba bayang kan jika semuanya di load langsung...

 

wah bakalan lama...

 

ini image soalnya bukan teks! saya udah jelasin panjang lebar ya optimasi image diatas dari pengamatan dan apa yang saya pelajari.. dan amati..

 

Maka biasanya yang di load di instagram itu ada beberapa image, anggap aja 20 postingan.... yang lainnya itu lazy alias enggak di load... nah ketika user scrolling sampai batas postingan yang diload.. berarti contohnya misal udah mencapai 20 image, maka akan di load lagi 20.. 

 

 

begitu seterusnya... sampai user lelang melakukan scrolling lagi... ehehehe

Nah Lazy Load Image hampir mirip dengan itu, jadi hanya ngeload gambar yang nampak aja.. baru kalo di scroll, dia akan memuat gambar tersebut.

Apakah sudah cukup bisa dipahami?

Nah tetapi ini bukan berarti membuat Gambar menjadi OPTIMAL dengan Size kecil ya... Bukan sama sekali... jadi ini semacam teknik manipulasi.. agar terasa loadingnya cepet...

 

Untuk nilai atau ukuran yang dimuat tetaplah sama..

 

Ibarat kata

 

User / visitor mengunjungi Blog RahmanCyber.NET , normalnya tanpa lazy load, si user tadi menghabiskan 8MB dalam sekali muatan .. wkwkwkwk

 

wah ini ngeprangk...

 

setelah dipasang lazyload, jika user scroll  melakukan gulir sampai bawah.. maka hasilnya akan sama.. hehe

 

cuman kecepatannya aja yang berasa lebih cepat.

Jadi jangan GR... hehe

 

Tapi walau demikian, ini akan mempengaruhi skor yang ditampilkan ketika website kita test di GTMETRIX maupun PAGESPEED.

Pada dasarnya script Lazy load ini bakalan berpengaruh banget ketika website kamu terdapat banyak sekali image dalam sebuah postingan.. jadi visitor akan merasa lebih cepet alias enggak berat.

Cara Memasang Script Lazy Load Otomatis

Kenapa otomatis..? karena untuk scrip edisi ini, kalian tidak perlu ngubah ngubah tag secara manual satu persatu.. jadi tinggal melatakkan script diatas akhiran tag body pada EDIT HTML.

 

Tapi sebelumnya, silahkan kalian cek dulu skor GTMETRIX Web Blog kalian... kunjungi GTMETRIX.COM 

Sudah sob?

 

Silahkan amati dan resapi skor yang didapatkan... kalo kalian beli template yang udah di optimalkan.. hal ini kalian udah gak perlu ribetin lagi.. tinggal nulis aja.. karena biasanya udah dissuaikan.. tapi jika tidak, atau ngeracik sendiri.. maka tutorial Lazy Load Image ini mungkin ada manfaatnya untuk dipraktekkan..

Detailnya seperti ini :

 

1. Kalian Buka dulu Blogger

2. Masuk ke Tema atau Themes jika bahasanya bahasa inggris..

3. Klik icon Segitiga kebawah

4. Pilih EDIT HTML

5. Setelah itu kalian carilah tag </body> , biasanya dibagian paling bawah...

6. letakkan kode dibawah ini tepat diatas </body>

 

Kode Script Lazy Load Image Otomatis

 <script type='text/javascript'> //<![CDATA[
// Lazy Load Image
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivsY7BNAjd7DSpJzUZjenZpVsAthMjyRDvy3hxvFj_nPQNzt2YB9mp-m7jdiax2k72_G1BtVfXhs9qE8_7z8-NGp3xEKIT2CVjosv2pp3UPtboa9nu_MonYLTMK3IEUzBbsMGECl66INw/s700-rw/rc-loading.png",effect:"fadeIn",threshold:"-50"})}); //]]>
</script>

Setelah itu... Klik Simpan

 

 

 

Apakah sudah selesai Pemasangan Script Lazy Load Imagenya?

 

Sebenarnya udah.. tapi silahkan, buka tab baru di browser kalian, setelah itu TEST Skor Website kalian di GT METRIX

 

Ingat ya..

 

Buka Tab Baru.. karena disini kita bakalan ngebandingin skor sebelum dan sesudah..

 

lakukan hal yang sama seperti pengetesan sebelumnya..

lalu bandingkan dengan hasil test sebelumnya..

ada perbedaan?

lebih cepat mana?

 

kalo ternyata malah lebih lambat.. ya.. hapus aja  Script Lazy Load Image Otomatis di Blogger nya..

^_^

Tapi kalo ternyata lebih cepat.....

Pertahankan..

berarti kalian berhasil :D

Nah seperti itulah cara menambahkan Script Lazy Load Image Otomatis di Blogger.

*Bonus

itu adalah hasil dari pengetesan di Google PageSpeed Insight RahmanCyber.NET, untuk tampilan desktop aja orang, apalagi yang mobile...dan untuk skorenya di sini.. malah saya rasa enggak berpengaruh banyak.. karena sebelumnya juga gak jauh beda dari itu... malah terasa sama saja... dipasang Lazy Load sama tidak untuk skornya..

Kenapa bisa sesulit itu? karena saya pengen buat Blog Magazine.. jadi disitu banyak pake Slider... dan apalagi untuk gambarnya sendiri tidak saya pikirkan optimasinya sebelumnya.. ( sebelum saya berguru ke para suhu blog )

Sehingga mau optimasi kan harus ganti satu persatu.. dan banyak..

 

dan inilah yang menyebabkan saya melakukan eksperimen dengan membuat panduan mempercepat blog pada mode mobile atau seluler... karena anjlok banget skornya deh.. untuk versi mobile 

disitu sebenarnya rangkuman dari riset yang saya lakukan...

Sedangkan untuk GTMETRIXnya sangat fantasti... lihat aja ini

jadi sebelumnya itu skor web saya F.. Merah bgt..dah pokoknya..

tapi setelah dipasang LAZY LOAD IMAGE Script... jadi naik..

hmmm kok bisa ya parameternya beda kali.. :D antara pagespeed insight dengan GTMetrix

Oke deh

Sudah ya...

Moga Tutorial Mempercepat blog dengan Script Lazy Load Image ini dapat bermanfaat..