1/10/2021

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?



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...




Does not use passive listeners to improve scrolling performance



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...


passive listener




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





Posting Komentar

Follow by Email

Whatsapp Button works on Mobile Device only