12/03/2020

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. 

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. 

 

 

lazy load image

 

 

 

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 analisa dari beberapa website microstock, seperti 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 hanmpir 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 kalo kuliah di Informatika nang... 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 bang... 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 gambar ke Webp? saya sendiri belum nemuin hal 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 nyecroll 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 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 


Udah?

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://1.bp.blogspot.com/-JujFIV_q8nY/X8a2nX1xBjI/AAAAAAAAHrs/S1sQJmGxy-ISINXnS-yUsARO6EcYNt8IwCLcBGAsYHQ/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


Hasil Pagespeed RahmanCyber

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


hasil test gtmetrix rahmancyber net

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, YANG SETAHU SAYA menjadi andalan pengembang template...




Oke deh

Sudah ya...


Moga bermanfaat.



Advertisement
Sobat, ditempat ini kita belajar bareng ya, saling berbagi ilmu di http://rahmancyber.net Apabila ada yang perlu di tambahkan atau ada kesalahan mohon di koreksi
Bagi yang menginginkan konten berupa video, bisa langsung kunjungi link Channel Youtube RahmanCyber NET
Matur Nuwun...

Sponsor Rahmancyber Network



Baca Juga

Posting Komentar

Follow by Email

Whatsapp Button works on Mobile Device only