۱۴۰۰-۱۲-۰۹ 
۶ دقیقه 
۵ 
اگر به‌تازگی تصمیم گرفته‌اید سایت وردپرسی‌تان را بهینه کنید اما در نتایج تست سرعت با ارور «Does not use passive listeners to improve scrolling performance» مواجه شدید، صفحه‌ی درستی را برای خواندن انتخاب کرده‌اید. در این مطلب به دلایل بروز این خطا می‌پردازیم و روش‌های برطرف کردنش در وردپرس را بررسی می‌کنیم.
اصلاً Passive event listeners چیست؟
رویداد یا Event، عملی است که زمانی که کاربر یا مرورگر، تغییر یا دستکاری در صفحه انجام می‌دهند، اتفاق می‌افتد. همه مرورگرهای مدرن، ویژگی پیمایش رشته‌ای دارند. این ویژگی به اسکرول اجازه می‌دهد حتی در زمانی که جاوا اسکریپت سنگینی در حال اجراست به آرامی اجرا شود.
اما این روش بهینه‌سازی باعث می‌شود مرورگر منتظر بماند تا اسکریپت‌ها فعال شوند و قبل از فعال شدن اجازه اسکرول کردن نمی‌دهد. این امر می‌تواند روی تجربه کاربری تاثیر منفی بگذارد. بنابراین هسته اصلی وردپرس پیشنهاد می‌کند که این ویژگی را غیرفعال نگه دارید تا چنین مشکلاتی پیش نیاید.
توجه: اگر درنظر دارید که این خطا را برطرف کنید باید بدانید که وارد یکی از وظایف دولوپرها می‌شوید و ما با فرض این که شما مهارت‌های یک توسعه دهنده را دارید، مطالب را در اختیارتان قرار می‌دهیم.
ارتباط اسکرول و خطای Does not use passive listeners to improve scrolling performance چیست؟
بیایید پروسه‌ٔ انجام کار مرورگر را بررسی تا بهتر درک کنیم که این خطا به چه صورت اتفاق می‌افتد. در واقع مرورگر عناصر DOM را باهم ترکیب می‌کند و از آن عکس می‌گیرد تا یک پارچه به نظر برسند. این تصویر لایه نام دارد. سپس هر لایه را رنگ آمیزی می‌کند، یعنی پیکسل به پیکسل آن را برای نمایش روی صفحه‌ٔ کاربر آماده می‌کند. هرچه اسکریپت‌ها و تصاویر سنگین‌تر باشند این پروسه بیشتر با اختلال مواجه می‌شود و scroll jank که در بخش بعدی با آن آشنا خواهیم شد، اتفاق می‌افتد.
پیشنهاد خواندن: مقاله ۵ روش ساده برای رفع خطای minimize main thread work در وردپرس!
Passive Event Listeners دقیقاً چه کاری انجام می‌دهد؟
همانطور که بالاتر گفتیم، مرورگر باید منتظر لود شدن تمام اسکریپت‌ها بماند تا به کاربران اجازه اسکرول کردن بدهد. بنابراین زمانی که قالب‌هایی با فایل‌ها و تصاویر سنگین روی سایت وجود دارند، زمان لود شدن اسکریپت‌ها بیشتر می‌شود و ممکن است در روند اسکرول کاربران، وقفه‌های ناخوشایندی ایجاد شود. به این اختلال و توقف در روند اسکرول به زبان دولوپرها scroll jank گفته می‌شود. عامل اصلی scroll jank، اسکرول لمسی در صفحات موبایل و تبلت است.
برای رفع مشکل scroll jank، ویژگی Passive Event Listeners وارد عمل می‌شود. این ویژگی به کاربران اجازه می‌دهد بی‌آنکه تمام اسکریپت‌ها لود شده باشند، به سادگی و کاملاً روان اسکرول کنند. یعنی کاربران ممکن است یکی از تصاویر صفحه را که بارگیری نشده نبینند اما از روان بودن اسکرول لذت ببرند و احساس کنند روی این اقدام کنترل دارند. استفاده از این ویژگی به بهبود UX کمک می‌کند.
مشکل event listeners در دستگاه های لمسی
مرورگرهایی که در دسکتاپ باز می‌شوند معمولاً مشکل خاصی ندارند. چرا که با ماوس کار می‌کنند و مشخص است که اسکرول کجا شروع می‌شود و کجا پایان می‌یابد. اما در دستگاه‌های لمسی، بیشتر مرورگرها گیج می‌شوند و نمی‌توانند به درستی تشخیص دهند که پیمایش باید از کجا شروع و به کجا ختم شود. بنابراین مرورگرها ترجیح می‌دهند که منتظر event listeners برای پایان کار بمانند و سپس اسکرول را انجام دهند.
در این مرحله، Passive Event Listeners وارد بازی می‌شوند تا حس عدم‌کنترلی که کاربر از این روند ممکن است تجربه کند را حل کنند.
کاری که در این مرحله انجام می‌شود ارتباط نزدیکی با متد addEventListener دارد. addEventListener در جاوا اسکریپت به برنامه‌نویس اجازه می‌دهد توابع را برای یک event خاص تنظیم کند. بنابراین بیایید به سراغ اصل مطلب و راه‌حل مشکل برویم:
برای حل مشکل از AddEventListener و پارامتر option آن استفاده کنید. در این پارامتر، باید پرچمی را تنظیم کنید که نشان دهد event listeners لمسی، اسکرول را لغو نخواهد کرد، بلکه از آن درخواست می‌کند ادامه پیدا کند. هنگامی که این کار را انجام می‌دهید، این اطلاعات به مرورگر منتقل می‌شوند. به این ترتیب اسکرول به آرامی ادامه می‌یابد و مشکل حل می‌شود. این کار باعث می‌شود که مرورگر نتواند منتظر شنونده رویداد لمسی برای اسکرول باشد. مرورگر بلافاصله با کمک پارامتر option در المان AddEventListener ، بدون انتظار اسکرول را انجام می‌دهد. در پایان کار، حرکت انگشت کاربر روی صفحه‌ی لمسی با نتیجه اسکرول هم‌خوانی خواهد داشت و تجربه بررسی صفحه بسیار با کیفیت‌تر خواهد بود.
پیشنهاد خواندن: آموزش رفع ۱۱ خطای Page speed insight + روش دریافت امتیاز کامل!
حالا چطور Passive Event Listeners را فعال کنیم تا عملکرد اسکرول بهبود بیابد؟
فعال کردن Passive Event Listeners اصلاً چیز پیچیده‌ای نیست. کافی است مراحل زیر را با دقت طی کنید:
۱. Capture Argument را اضافه کنید
اولین کاری که باید انجام دهیم این است که مکانیزمی برای اضافه کردن اطلاعات اضافی به Event Listeners داشته باشیم.
اضافه کردن آرگومان capture به قطعه کد راه‌حل خوبی است و فضایی را برای افزودن اطلاعات اضافی در اختیارمان قرار می‌دهد. بنابراین اگر قطعه کد اولیه به شکل زیر باشد:
document.addEventListener('touchstart', handler, true);
پس از بهینه‌سازی، capture و true را به انتهای قطعه کد خود اضافه می‌کنیم. بنابراین قطعه کد در نهایت باید چیزی شبیه به این باشد:
document.addEventListener('touchstart', handler, {capture: true});
روشی که ما از آن استفاده می‌کنیم سینتکس جدیدی است که با رفتار واقعی سروکار دارد و به شما امکان می‌دهد تعیین کنید آیا می‌خواهید Listeners در مرحله capture فراخوانی شود یا خیر. جالب نبود؟
۲. کوئری Event.defaultPrevented قبل و بعد از فراخوانی PreventDefauls()
حالا نوبت مرحله بعدی است. پس از ایجاد یک فضای کاری با آرگومان capture برای خود، می‌توانیم اطلاعات خاصی در مورد زمان ثبت رویداد کنترل‌کننده ایجاد کنیم. به عنوان مثال، اگر پیش‌بینی کنیم که شنونده در زمان رویداد، موردی به نام preventDefault() را فراخوانی نکند، مرورگر مجبور نیست منتظر بماند تا شنونده رویداد لمسی تصمیم بگیرد که اسکرول کند یا نه. حتی اگر شنونده رویداد لمسی بعداً با این مورد تماس بگیرد، این درخواست نادیده گرفته می‌شود و یک هشدار در کنسول رخ می‌دهد.
اطمینان حاصل کنید که قبل و بعد از () preventDefault یک عبارت Event.defaultPrevented وجود دارد، مانند مثال زیر: 👇
addEventListener(document, "touchstart", function(e) {
console.log(e.defaultPrevented); // will be false
e.preventDefault(); // does nothing since the listener is passive
console.log(e.defaultPrevented); // still false
}, Modernizr.passiveeventlisteners ? {passive: true} : false);
چطور می‌توان یک رویداد کنترل‌کننده را غیرفعال کرد و ‘’does not use passive listeners to improve scrolling performance’’ را برطرف کرد؟
باید این خبر خوش را به شما بدهیم که شما همین الان ارور را برطرف کردید! پیش از این مرورگر مجبور بود با وجود چرخاندن اسکرولر ماوس و انگشت کاربر، فرایند را به تاخیر بیندازد. اما به لطف بهینه‌سازی که همین الان انجام دادید اتفاق نمی‌افتد.
توجه داشته باشید که این مشکل اکنون فقط برای listeners های فعال می‌تواند تکرار شود. اما بازهم جای نگرانی نیست. شما می‌توانید با دنبال کردن مراحلی که گفته شد برای listenerهای دستگاه‌های لمسی موبایلی هم مشکل را برطرف کنید.
ارور “Does not use passive listeners to improve scrolling performance” به چه معناست؟
این ارور از طرف ابزارهایی مثل گوگل لایت هاوس یا Page speed insight برای سایت شما ارسال می‌شود و نشان می‌دهد در فرایند اسکرول و نمایش با تاخیر آن به کاربر دچار مشکل شده‌اید. برای برطرف کردن این مشکل می‌توانید از passive و capture استفاده کنید.
توجه داشته باشید کهاسکرول jank یک مشکل عملکردی است. بنابراین، به احتمال بسیار زیاد هنگام ورود به ممیزی عملکرد از طریق Google Lighthouse چنین هشداری را مشاهده خواهید کرد.
به یاد داشته باشید، استفاده از Passive Event Listeners برای رفع تمام مشکلات عملکرد سایت شما کافی نیست. در عین حال، کاهش و شکستن فایل‌های جاوا اسکریپت طولانی مدت می‌تواند بر عملکرد کلی شما تأثیر مثبت بگذارد. این در مورد فضای محدودی است که شنوندگان رویداد غیرفعال انجام می‌دهند.
اگر مرورگر از Passive Event Listeners پشتیبانی نکند، چطور عملکرد اسکرول را بهبود بدهیم؟
اگر می‌خواهید عملکرد پیمایش را بدون استفاده از شنونده‌های رویداد غیرفعال برای مرورگرها بهبود ببخشید، می‌توانید از ابزار زیر استفاده کنید:
سخن پایانی
در این مقاله درباره‌ی دلایل و پروسه‌ای که باعث می‌شوند خطای Does not use passive listeners to improve scrolling performance را دریافت کنیم و چگونگی برطرف کردن مرحله به مرحله آن صحبت کردیم. اگر درباره هر یک از مطالب گفته شده در این مقاله سوالی دارید می‌توانید از بخش نظرات زیر همین پست از ما بپرسید و پاسخ بگیرید. همچنین می‌توانید تجربیات خود را با سایر کاربران به اشتراک بگذارید.
برای نوشتن این مقاله از منابع زیادی استفاده کردیم که مهم‌ترین آن gitlab.com است. برای آشنایی با سایر ارورهای وردپرس به دسته «راهنمای رفع خطاهای وردپرس» مراجعه کنید.
سلام من در داخل gtmetrix با همین پیغام خطا مواجه شد م و بعد از کلی جستجو در اینترنت به تکه کد زیر رسیدم و وقتی اونو داخل فایل jQuery قرار دادم با اینکه پیغام خطا از بین رفت ولی بعضی از قسمتای سایت مثه اسلایدر و قسمت add to cart محصولات بهم ریخت و خراب شد الان به نظرتون باید چیکار کنم؟؟؟
jQuery.event.special.touchstart = {
setup: function( _, ns, handle ) {
this.addEventListener(“touchstart”, handle, { passive: !ns.includes(“noPreventDefault”) });
}
};
jQuery.event.special.touchmove = {
setup: function( _, ns, handle ) {
this.addEventListener(“touchmove”, handle, { passive: !ns.includes(“noPreventDefault”) });
}
};
jQuery.event.special.wheel = {
setup: function( _, ns, handle ){
this.addEventListener(“wheel”, handle, { passive: true });
}
};
jQuery.event.special.mousewheel = {
setup: function( _, ns, handle ){
this.addEventListener(“mousewheel”, handle, { passive: true });
}
};
سلام. امید عزیز این کد مشکلی نداره و درست هست. بنابراین احتمالاً اشتباه جای‌گذاری شده. علاوه بر این بعضی از event listenerها قابلیت این که passive بشن رو ندارند و کدی که خودشون استفاده کردند برای بعضی eventها مثل touchstart و … همه ی listenerها رو سعی می‌کنه که به passive تبدیل کنه و این عامل هم می‌تونه باعث خطا شده باشه. اگر از مشترکان لیموهاست هستید می‌تونید تیکت بزنید تا همکاران پشتیبانی ما با دسترسی به سایت شما ظرف چند دقیقه به شما کمک کنند مشکل رو برطرف کنید. در غیر این صورت اگر بک آپ تهیه کردید قبل از ایجاد این تغییر می‌تونید بازگردانی انجام بدید و به دقت دستورالعمل معرفی شده در همین مقاله رو دنبال کنید.
سلام به شما خانم نخعی
من از یه تکه کد دیگه استفاده کردم و مشکل برطرف شد خوشبختانه
سلام
کد را لطفا اینجا بذارید همه بررسی و در صورت لزوم استفاده کنند.
ممنون
سلام
میشه این کدتون رو اینجا به اشتراک بگذارید؟