رفع خطای Does not use passive listeners to improve scrolling performance در وردپرس

اگر به تازگی تصمیم گرفته‌اید سایت‌ وردپرسی‌تان را بهینه کنید اما در نتایج تست سرعت با ارور «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 که در بخش بعدی با آن آشنا خواهیم شد، اتفاق می‌افتد.

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 ، بدون انتظار اسکرول را انجام می‌دهد.
• در پایان کار، حرکت انگشت کاربر روی صفحه‌ی لمسی با نتیجه اسکرول هم‌خوانی خواهد داشت و تجربه بررسی صفحه بسیار با کیفیت‌تر خواهد بود.

حالا چطور 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 پشتیبانی نکند، چطور عملکرد اسکرول را بهبود بدهیم؟

اگر می‌خواهید عملکرد پیمایش را بدون استفاده از شنونده‌های رویداد غیرفعال برای مرورگرها بهبود ببخشید، می‌توانید از ابزارهای زیر استفاده کنید:

• Feature detection
• Polyfill

سخن پایانی 

در این مقاله درباره‌ی دلایل و پروسه‌ای که باعث می‌شوند خطای Does not use passive listeners to improve scrolling performance را دریافت کنیم و چگونگی برطرف کردن مرحله به مرحله‌ی آن صحبت کردیم. اگر درباره هر یک از مطالب گفته شده در این مقاله سوالی دارید می‌توانید از بخش نظرات زیر همین پست از ما بپرسید و پاسخ بگیرید. همچنین می‌توانید تجربیات خود در این باره را با سایر کاربران به اشتراک بگذارید. فراموش نکنید که با دنبال کردن صفحه اینستاگرام لیموهاست می‌توانید همواره از جوایز و تخفیف‌های ما باخبر باشید!