Cara Mengatasi Does not use passive listeners to improve scrolling performance di Blogger

Ini merupakan salah satu hal yang saya temui ketika optimasi tampilan mobile, yaitu  Does not use passive listeners to improve scrolling performance , kamu mengalami hal yang sama?

{getToc} $title={Table of Contents}

Does not use passive listeners to improve scrolling performance

Berarti mungkin cara saya ini bisa cocok untuk mengatasi permasalahan kamu..

Jadi di Google Page Speed, Lighthouse menyebutkan seperti ini.. hehe

Consider marking your touch and wheel event listeners as `passive` to improve your page's scroll performance.

Ada rekomendasi begitu.. lebih jelasnya beginian.. dan disitu saya ditunjukkan letak kesalahannya... di Baris 8572.

Wow panjang amat!!! enggak... itu letakknya.. seperti kalo kalian cari buku di perpustakaan, kan ada penomorannya seperti peta gitu.. kode raknya...

Listener atau Pemroses peristiwa Touch dan Wheel berguna untuk melacak interaksi pengguna dan menciptakan pengalaman pengguliran khusus, tetapi mereka juga dapat menunda pengguliran halaman. 

 

Saat ini, browser tidak dapat mengetahui apakah pemroses acara akan mencegah pengguliran, jadi mereka selalu menunggu pendengar selesai mengeksekusi sebelum menggulir halaman. Pemroses acara pasif memecahkan masalah ini dengan memungkinkan Anda menunjukkan bahwa pemroses peristiwa atau listener tidak akan pernah mencegah pengguliran.

Kompatibilitas Browser

Sebagian besar browser mendukung listener pasif. Lihat Kompatibilitas browser

 

Kenapa Lighthouse Pagespeed menganggap Passive Listener itu penting?

 

Lighthouse menyaring Listener dari host yang berbeda karena mungkin kalian tidak memiliki kendali atas skrip ini. Mungkin ada skrip pihak ketiga yang mengganggu kinerja pengguliran lamanmu, tetapi ini tidak tercantum dalam laporan Lighthouse milikmu. 

 

Lalu Bagaimana Solusinya mengatasi 'Does not use passive listeners' ?

Kalo pada permasalahan saya, karena disitu Document Write, kalian bisa lihat.. inilah masalah scriptnya...

 

  <script>
                             
  document.write(&quot;&lt;script
  src=\&quot;/feeds/posts/default?max-results=10&amp;orderby=published&amp;alt=json-in-script&amp;callback=favouritePosts\&quot;&gt;&lt;\/script&gt;&quot;);
                    
  
                           
  </script> 
  

Jadi Solusinya saya menambahkan Passive Listener , seperti ini

document.addEventListener('touchstart', onTouchStart, {passive: true});

 

kenapa document , bukan this? karena biar gampang, jadi manggilnya tidak didalam.. tinggal samakan variabelnya aja document...

 

Jadinya seperti ini :

 

  <script>
                             
  document.write(&quot;&lt;script
  src=\&quot;/feeds/posts/default?max-results=10&amp;orderby=published&amp;alt=json-in-script&amp;callback=favouritePosts\&quot;&gt;&lt;\/script&gt;&quot;);
                             
  document.addEventListener('touchstart', onTouchStart, {passive: true});
                           
  </script> 

Untuk lebih lengkapnya...

Seperti itulah cara mengatasinya, sebagai eksperiment saya untuk melakukan optimasi tampilan mobile pada RahmanCyber v1.

Letakkan cara yang sama disetiap document write.. supaya tidak muncur pesan merah lagi.. hehe

Jangan lupa... tambahkan Passive Listener , seperti ini

document.addEventListener('touchstart', onTouchStart, {passive: true});

 

 

 

 

 

Update :

Ternyata setelah saya sadari, dan menilik lagi... ternyata GAGAL! tetap muncul error *di tampilan mobile..

Sementara saya melakukan penghapusan sementara untuk tampilan mobile dengan memberi Tag Conditional

 

 

 

F.N.A-RED