{"id":14828,"date":"2023-03-22T15:30:43","date_gmt":"2023-03-22T15:30:43","guid":{"rendered":"https:\/\/kwebby.com\/blog\/?p=14828"},"modified":"2025-06-10T13:44:01","modified_gmt":"2025-06-10T13:44:01","slug":"use-passive-listeners","status":"publish","type":"post","link":"https:\/\/kwebby.com\/blog\/use-passive-listeners\/","title":{"rendered":"How to Fix &#8216;Does not use passive listeners to Improve scrolling performance&#8217;"},"content":{"rendered":"\n<p>Performance is one of the most critical factors regarding SEO and user experience. Google has introduced <a href=\"https:\/\/kwebby.com\/blog\/google-core-web-vitals\/\" data-type=\"post\" data-id=\"14090\">Core Web Vitals<\/a> to help webmasters optimize their websites for user experience and performance.<\/p>\n\n\n\n<p>One common issue webmasters and developers face the &#8216;Does not use passive listeners to improve scrolling performance.&#8217; This guide will explain the cause of this issue and provide a step-by-step guide on how to fix it to enhance your <a href=\"https:\/\/kwebby.com\/blog\/largest-contentful-paint-lcp\/\" data-type=\"post\" data-id=\"14181\">website&#8217;s Core Web Vitals<\/a>.<\/p>\n\n\n\n<p>The &#8216;Does not use passive listeners to improve scrolling performance&#8217; issue relates to your website&#8217;s JavaScript touch and wheel event listeners.<\/p>\n\n\n\n<p>Event listeners can cause scrolling delays on touchscreens and other input devices because the browser must wait for the JavaScript to execute before processing the event.<\/p>\n\n\n\n<p>Also check out :- <a href=\"https:\/\/kwebby.com\/blog\/google-core-web-vitals\/\">What is Google Core Web Vitals? Step-by-step Guide to Improve it<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Fix Does not use passive listeners to Improve scrolling performance<\/h2>\n\n\n\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/lcgkZMz-04Q?si=3MYYVf5N7eIiI3tz\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n\n\n\n<p>Passive event listeners help browsers to perform scrolling smoothly without waiting for JavaScript, thus improving scrolling performance.<\/p>\n\n\n\n<p>Here&#8217;s a detailed breakdown of the measures you can take to fix this issue on your website:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Understanding Touch and Wheel Event Listeners:<\/h2>\n\n\n\n<p>To fix this issue, you first <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/best-practices\/uses-passive-event-listeners\/\" target=\"_blank\" rel=\"doFollow noopener\">need to understand the touch and wheel <\/a>event listeners that your website uses. These event listeners can be added to your code using the addEventListener method. For example:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>element.addEventListener(&#8216;touchstart&#8217;, function() {});<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9\">element<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addEventListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">touchstart<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>These event listeners can also be added directly to your HTML tags, like so:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>&lt;div ontouchstart=&#8221;&#8230;&#8221;>&lt;\/div><\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">ontouchstart<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">...<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/div&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">2. Identifying the Problematic Event Listeners:<\/h2>\n\n\n\n<p>Start by auditing your website using Google Lighthouse or Chrome DevTools&#8217; Performance panel to identify the specific event listeners causing the issue.<\/p>\n\n\n\n<p>Look for suggestions under the &#8220;Opportunities&#8221; or &#8220;Improve SEO&#8221; sections, guiding you towards the problematic event listeners in your code.<\/p>\n\n\n\n<p>Alternatively, Go to Pagespeed and enter your URL there and click on &#8220;Analyze&#8221;;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"259\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/image-46.jpeg\" alt=\"\" class=\"wp-image-14829\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/image-46.jpeg 700w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/image-46-300x111.jpeg 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>It will take some time to load your Report, and you may see &#8216;Does not use passive listeners to Improve scrolling performance&#8217; errors like the below;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"341\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/image-47.jpeg\" alt=\"\" class=\"wp-image-14830\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/image-47.jpeg 700w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/image-47-300x146.jpeg 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>As you can see, there are 3 Files where problems are, i.e. Jquery File and other 2 Internal Javascript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Switching to Passive Event Listeners:<\/h2>\n\n\n\n<p>Now that you&#8217;ve identified the problematic event listeners, the next step is to switch them to passive event listeners. You can do this by adding the passive option when defining the event listener. Here&#8217;s an example:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>element.addEventListener(&#8216;touchstart&#8217;, function() {}, {passive: true});<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9\">element<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addEventListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">touchstart<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{},<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #88C0D0\">passive<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">true<\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>This modification tells the browser that it doesn&#8217;t have to wait for the JavaScript to execute, as the event listener does not prevent the default scrolling behaviour. This allows smoother scrolling performance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to Implement it on your site?<\/h3>\n\n\n\n<p>Download and backup the problematic javascript files, In our case, slideout.min.js. Therefore, we had various Touch Listeners in our functions in slideout.min.js, as you can see below;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"331\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/image-49.jpeg\" alt=\"\" class=\"wp-image-14832\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/image-49.jpeg 700w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/image-49-300x142.jpeg 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>So we have filtered out Touch listeners by searching the js file by all event listeners, as you can see above.<\/p>\n\n\n\n<p>Now the next thing to do is to unminify the file and add Passive: true to all eventListeners with Touch listeners. Therefore we used the <a href=\"https:\/\/codepen.io\/kwebby\/pen\/eYLQYey\" target=\"_blank\" rel=\"noreferrer noopener\">unminify tool<\/a> to unminify our Javascript file first (Please Ignore if your file is already unminified).<\/p>\n\n\n\n<p>To unminify javascript code, copy the code from your file and upload it to the textarea below;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.51.27@2x-1024x512.png\" alt=\"\" class=\"wp-image-14834\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.51.27@2x-1024x512.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.51.27@2x-300x150.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.51.27@2x-768x384.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.51.27@2x-1536x769.png 1536w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.51.27@2x-2048x1025.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now click on Unminify Javascript to unminify the same and get the result in the below textbox;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"513\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.51.59@2x-1024x513.png\" alt=\"\" class=\"wp-image-14835\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.51.59@2x-1024x513.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.51.59@2x-300x150.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.51.59@2x-768x385.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.51.59@2x-1536x769.png 1536w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.51.59@2x-2048x1026.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now click on download to download the file as unminified.js!<\/p>\n\n\n\n<p>Now open this file using any text editor or download the visual studio code for free from here.<\/p>\n\n\n\n<p>Open using Notepad or text editor (mac) and search &#8220;addEventListener&#8221; by pressing CTRL+F;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"513\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.52.39@2x-1024x513.png\" alt=\"\" class=\"wp-image-14836\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.52.39@2x-1024x513.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.52.39@2x-300x150.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.52.39@2x-768x385.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.52.39@2x-1536x769.png 1536w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.52.39@2x-2048x1026.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now, Skip the functions which don&#8217;t have the word &#8220;Touch&#8221; in it, because it means that it does not need to use passive listeners.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"651\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.53.29@2x-1024x651.png\" alt=\"\" class=\"wp-image-14837\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.53.29@2x-1024x651.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.53.29@2x-300x191.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.53.29@2x-768x488.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.53.29@2x.png 1362w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>And for those who have the &#8220;Touch&#8221; keyword in it, add one more parameter to the function, i.e. &#8220;,{passive: true}.&#8221; as below;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"650\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.53.53@2x-1024x650.png\" alt=\"\" class=\"wp-image-14838\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.53.53@2x-1024x650.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.53.53@2x-300x190.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.53.53@2x-768x488.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/CleanShot-2023-03-22-at-20.53.53@2x.png 1364w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now, after you does that your functions with touch listeners will look like the above.<\/p>\n\n\n\n<p>Next, Click save and you&#8217;re ready to upload it on your server with the original filename.<\/p>\n\n\n\n<p><strong>Tip: Make sure you have your backup if things go south.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Handling Cross-Browser Compatibility:<\/h2>\n\n\n\n<p>Since not all browsers support passive event listeners, it&#8217;s crucial to ensure cross-browser compatibility when implementing this change on your website. The Feature Detection technique is the most straightforward method of ensuring compatibility.<\/p>\n\n\n\n<p>Here&#8217;s an example:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>let supportsPassive = false;\n\ntry {\n\nconst opts = Object.defineProperty({}, &#8216;passive&#8217;, {\n\nget: function () {\n\nsupportsPassive = true;\n\n}\n\n});\n\nwindow.addEventListener(&#8216;test&#8217;, null, opts);\n\n} catch (e) {}<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">let<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">supportsPassive<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">false;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">try<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">opts<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">Object<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">defineProperty<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">{},<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">passive<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">get<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">supportsPassive<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">true;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">window<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addEventListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">test<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">null<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">opts<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">catch<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">e<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #ECEFF4\">{}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Now you can use the supportsPassive variable when defining your event listeners:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>element.addEventListener(&#8216;touchstart&#8217;, function() {}, { passive: supportsPassive ? true : false });<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9\">element<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addEventListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">touchstart<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{},<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">passive<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">supportsPassive<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">?<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">true<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">false<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">5 Solution For JQuery<\/h2>\n\n\n\n<p>If you get the error, i.e. <strong>Does not user passive listeners to improve scrolling performance, <\/strong>and the resulting file is jquery, then we have a solution for you like below;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"269\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/image-48.jpeg\" alt=\"\" class=\"wp-image-14831\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/image-48.jpeg 700w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/03\/image-48-300x115.jpeg 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>To fix this, You need to add the below code just before the &lt;\/body&gt; tag in your footer as below;<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>&lt;script>\n    \n    jQuery.event.special.touchstart = {\n    setup: function( _, ns, handle ) {\n        this.addEventListener(&#8220;touchstart&#8221;, handle, { passive: !ns.includes(&#8220;noPreventDefault&#8221;) });\n    }\n};\njQuery.event.special.touchmove = {\n    setup: function( _, ns, handle ) {\n        this.addEventListener(&#8220;touchmove&#8221;, handle, { passive: !ns.includes(&#8220;noPreventDefault&#8221;) });\n    }\n};\njQuery.event.special.wheel = {\n    setup: function( _, ns, handle ){\n        this.addEventListener(&#8220;wheel&#8221;, handle, { passive: true });\n    }\n};\njQuery.event.special.mousewheel = {\n    setup: function( _, ns, handle ){\n        this.addEventListener(&#8220;mousewheel&#8221;, handle, { passive: true });\n    }\n};\n&lt;\/script><\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    jQuery.event.special.touchstart = <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">setup<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">_<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">ns<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">handle<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">this<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addEventListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">touchstart<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">handle<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">passive<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">!<\/span><span style=\"color: #D8DEE9\">ns<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">includes<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">noPreventDefault<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">jQuery.event.special.touchmove = <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">setup<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">_<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">ns<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">handle<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">this<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addEventListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">touchmove<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">handle<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">passive<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">!<\/span><span style=\"color: #D8DEE9\">ns<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">includes<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">noPreventDefault<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">jQuery.event.special.wheel = <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">setup<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">_<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">ns<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">handle<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">this<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addEventListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">wheel<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">handle<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">passive<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">true<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">jQuery.event.special.mousewheel = <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">setup<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">_<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">ns<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">handle<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">this<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addEventListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">mousewheel<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">handle<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">passive<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">true<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/script&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Click on save and re-run Pagespeed.dev report and you will be fine.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6. Verifying the Changes:<\/h2>\n\n\n\n<p>After implementing the changes, you should run Lighthouse or Chrome DevTools&#8217; Performance panel audit again to ensure the issue has been resolved. You should see an improvement in your website&#8217;s scrolling performance and potentially better Core Web Vitals scores.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">7. Implement a Global Passive Listener Polyfill (Optional)<\/h2>\n\n\n\n<p>For scenarios where individual scripts cannot be adjusted, such as with <a href=\"https:\/\/kwebby.com\/blog\/must-have-wordpress-plugins\/\" data-type=\"post\" data-id=\"11703\">third-party plugins<\/a> or <a href=\"https:\/\/kwebby.com\/blog\/how-to-embed-youtube-video-in-wordpress\/\" data-type=\"post\" data-id=\"22073\">embedded content<\/a>, using a <a href=\"https:\/\/www.npmjs.com\/package\/@esbuild-plugins\/node-globals-polyfill\" data-type=\"link\" data-id=\"https:\/\/github.com\/enonic\/global-polyfill\" target=\"_blank\">global polyfill<\/a> can address certain limitations. The script below automatically converts all touchstart, touchmove, and wheel event listeners into passive listeners. This can help improve your site&#8217;s performance, especially in terms of scrolling and input responsiveness.<\/p>\n\n\n\n<p>Here\u2019s the code:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>(function() {\n  const originalAddEventListener = EventTarget.prototype.addEventListener;\n\n  EventTarget.prototype.addEventListener = function(type, listener, options) {\n    if (type === &#8216;touchstart&#8217; || type === &#8216;touchmove&#8217; || type === &#8216;wheel&#8217;) {\n      options = options || {};\n      options.passive = true;\n    }\n    originalAddEventListener.call(this, type, listener, options);\n  };\n})();\n<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">originalAddEventListener<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">EventTarget<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9FF\">prototype<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">addEventListener<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #8FBCBB\">EventTarget<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9FF\">prototype<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addEventListener<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">type<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">listener<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">options<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">type<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">===<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">touchstart<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">||<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">type<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">===<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">touchmove<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">||<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">type<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">===<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">wheel<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">options<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">options<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">||<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{}<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">options<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">passive<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">true;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">originalAddEventListener<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">call<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #81A1C1\">this<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">type<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">listener<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">options<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">How It Works<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose:<\/strong> The script overrides the built-in <code>addEventListener<\/code> method for all objects inheriting from <code>EventTarget<\/code> (e.g., DOM elements). This means it applies globally across your site.<\/li>\n\n\n\n<li><strong>Functionality:<\/strong> When an event listener for <code>touchstart<\/code>, <code>touchmove<\/code>, or <code>wheel<\/code> is added, the script ensures <code>passive<\/code> is set to <code>true<\/code>. A passive listener doesn\u2019t block the browser\u2019s default behavior, like scrolling. This can prevent delays caused by event-handling logic and enhance performance.<\/li>\n\n\n\n<li><strong>Placement:<\/strong> Add the script to the footer of your site so that it runs after all other scripts are loaded. This is critical to ensure compatibility and proper sequencing.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Why It\u2019s Useful<\/h3>\n\n\n\n<p>Modern browsers may flag non-passive listeners in performance audits because they can impact scrolling. By automating the process of making relevant listeners passive, this script ensures better compliance with performance recommendations, leading to smoother interactions for users.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Caveats to Consider<\/h3>\n\n\n\n<p>While this approach is convenient, it\u2019s not without potential risks. If a script depends on <code>preventDefault()<\/code> within these events, changing listeners to passive will break that functionality. This is because passive listeners do not allow <code>preventDefault()<\/code> to block default browser actions. Therefore, evaluate whether this change could disrupt any existing behavior in your site before implementation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Core Web Vital Resources<\/h2>\n\n\n\n<p><a href=\"https:\/\/kwebby.com\/blog\/google-core-web-vitals\/\">What is Google Core Web Vitals? Step-by-step Guide to Improve it in 2023<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/kwebby.com\/blog\/largest-contentful-paint-lcp\/\">How to Improve Largest Contentful Paint (LCP) in 2023<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/kwebby.com\/blog\/cumulative-layout-shift-cls\/\">How to Improve Cumulative Layout Shift (CLS) in 2023 Easily<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/kwebby.com\/blog\/first-input-delay-fid\/\">How to Improve First Input Delay (FID) in 2023<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/kwebby.com\/blog\/css-image-sprites\/\">How to use CSS Image Sprites To Reduce HTTP Requests and Increase Pagespeed<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Fixing the &#8216;Does not use passive listeners to improve scrolling performance&#8217; issue can significantly enhance your website&#8217;s performance and user experience.<\/p>\n\n\n\n<p>Following the steps mentioned in this guide can effectively resolve this issue, making your website more SEO-friendly and enjoyable for your users.<\/p>\n\n\n\n<p>Don&#8217;t forget to continually monitor your website&#8217;s Core Web Vitals and make the necessary optimizations to stay ahead in the ever-evolving world of web performance.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Performance is one of the most critical factors regarding SEO and user experience. Google has introduced Core Web Vitals to help webmasters optimize their websites&hellip;<\/p>\n","protected":false},"author":1,"featured_media":14841,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[277,734,848,3,4],"tags":[],"class_list":["post-14828","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-advanced-seo-techniques","category-core-web-vitals","category-performance","category-seo","category-tutorials"],"_links":{"self":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts\/14828","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/comments?post=14828"}],"version-history":[{"count":2,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts\/14828\/revisions"}],"predecessor-version":[{"id":23930,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts\/14828\/revisions\/23930"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/media\/14841"}],"wp:attachment":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/media?parent=14828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/categories?post=14828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/tags?post=14828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}