جلسه ۴۸ – رفع ارور Use passive listeners to improve scrolling performance

سلام همراهان عزیز میزفا
از مجموعه مقالات آموزش جی تی متریکس و از سایت میزفا همراه شما هستیم. تو جلسه قبلی درباره برطرف کردن خطای Use HTTP/2 for all resources صحبت کردیم و در این جلسه به آموزش رفع ارور Use passive listeners to improve scrolling performance در جی تی متریکس می‌پردازیم. این خطا روی بهینه سازی تجربه کاربری (UX) از طریق بهبود اسکرول شدن صفحه توسط کاربر تاکید داره. تو این مقاله سعی می‌کنیم علت ایجاد مشکل رو به ساده‌ترین شکل ممکن بیان کنیم. چون درک دلیل فنی خطا مبحث پیچیده‌ای هست و پیش نیازش آگاهی از برخی اصطلاحات و متدهای برنامه نویسی هست. از طرف دیگه برطرف کردن خطا هم اصلا آسون نیست و نیاز به تخصص و تجربه بالا در برنامه نویسی داره. اما منابع لازم برای مطالعه بیشتر رو انتهای مقاله در اختیار برنامه نویسان عزیز قرار می‌دیم تا بتونند بیشتر مطالعه کنند.
لطفا تا پایان با میزفا همراه باشید.

خلاصه خطای Use passive listeners to improve scrolling performance

میزان سختی: ****
روی چه مواردی تاثیر می‌ذاره: تجربه کاربری (UX)

علت ایجاد خطای Use passive listeners to improve scrolling performance چیست؟

احتمالا این تجربه رو داشتید که وقتی صفحه‌ای رو باز می‌کنید و صفحه هنوز در حال لود شدنه، اسکرول کردن صفحه با مشکلاتی مواجه میشه؛ یعنی صفحه اسکرول نمیشه و یا به کندی اسکرول میشه. این مشکل مخصوصا روی موبایل و تبلت ملموس‌تره. دلیل این مشکل و علت ایجاد خطای Use passive listeners to improve scrolling performance در جی تی متریکس اینه که مرورگرهایی مثل کروم در حالت عادی تا زمانی که JavaScript اجرا نشه، اجازه اسکرول کردن رو نمیدن. توی ویدئو زیر این موضوع بهتر مشخص شده:

ارور Use passive listeners to improve scrolling performance باعث تجربه کاربری ضعیف میشه و حتی شاید دلیلی باشه که کاربر تصمیم بگیره صفحه ما رو ترک کنه. اما چرا چنین مشکلی پیش میاد؟

مقصر بیشتر تاخیرها یا توقف‌هایی که موقع اسکرول کردن ایجاد میشن، touch event listener هست. اینکه touch event listener دقیقا چیه، بحثی مرتبط با آموزش جاوا اسکریپت هست و ما واردش نمی‌شیم. اما touch event listener ها معمولا برای ردیابی تعامل‌های کاربران یا بهینه سازی اسکرول شدن صفحه استفاده میشه. مثلا برای اینکه وقتی کاربر به یه نقشه پویای گوگل در صفحه ما می‌رسه، اسکرول شدن باید متوقف بشه. پس touch event listener مزایایی هم داره و نمیشه ازش استفاده نکرد. اما معایبی هم داره و باعث ایجاد خطای Use passive listeners to improve scrolling performance میشه. اما خوشبختانه میشه با استفاده از passive event listener این ارور رو برطرف کرد.

چطور خطای Use passive listeners to improve scrolling performance را برطرف کنیم؟

در حال حاضر مرورگرها نمی‌تونند تشخیص بدن که آیا یک touch event listener قصد داره اسکرول شدن صفحه رو متوقف کنه یا نه؟ به همین دلیل مرورگر به‌خاطر این عدم آگاهیش چاره‌ای نداره جز اینکه صبر کنه تا listener کارش رو تموم کنه و اون وقت به کاربر اجازه اسکرول کردن بده.

در اینجا passive event listener ها برطرف کننده مشکل هستند و استفاده از اونها باعث رفع ارور Use passive listeners to improve scrolling performance میشه. استفاده از passive event listener این امکان رو به ما میده که یه Flag در پارامتر Options از addEventListener ایجاد کنیم که تعیین کننده این موضوعه که listener هرگز اسکرول کردن رو متوقف نمی‌کنه. در نتیجه مرورگر می‌تونه با خیال راحت اجازه اسکرول کردن رو به کاربر بده.

البته اگه شما متخصص برنامه نویسی نباشید، با این اصطلاحات آشنایی ندارید و الآن کمی نگران شدید که اینها چیه. هرچند سعی کردم این خطا رو به ساده‌ترین شکل ممکن بیان کنم. اما به‌هرحال اگه شما برنامه نویس نباشید یا متخصص برنامه نویسی برای سایتتون نداشته باشید، نمی‌تونید خطای Use passive listeners to improve scrolling performance رو برطرف کنید. اما می‌تونید لینک مقاله رو برای برنامه نویستون بفرستید تا بتونه این مشکل رو حل کنه.

با کلیک روی این خطا در گزارش Structure جی تی متریکس جدید می‌تونیم متوجه بشیم چنین مشکلی رو داریم یا نه. سپس برای هر کدوم از event listener هایی که GTmetrix در این ارور مشخص کرده، یه passive flag اضافه می‌کنیم. مثل نمونه زیر:

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

البته پشتیبانی مرورگر هم اینجا مهمه و اگه مرورگر از passive event listener پشتیبانی نکنه، کار کمی سخت میشه. روش حل این مشکل رو در این مقاله می‌تونید مطالعه کنید.

کار رو به تیم متخصص برنامه نویسی یا SEO بسپارید

اگه سایتتون متخصص برنامه نویسی نداره و خودتون هم تخصص ندارید، می‌تونید کار رو به یه تیم متخصص برنامه نویسی یا SEO بسپارید. اگه تیم خوب می‌شناسید که هیچ ولی اگه دنبال یک تیم حرفه‌ای و همینطور دنبال بهترین خدمات سئو می‌گردید، می‌تونید خدمات سئو سایت میزفا رو بررسی کنید. کلی خدمات متنوع از جمله بهینه سازی سرعت سایت برای خدمت رسانی به شما عزیزان آماده کردیم.

جمع بندی

در این مقاله میزفا درباره روش حل مشکل Use passive listeners to improve scrolling performance در GTmetrix صحبت کردیم. این خطا مربوط به اثر اسکرول شدن درست صفحه روی بهبود تجربه کاربری هست. ما دلیل ایجاد خطا و روش برطرف کردنش رو در این مقاله گفتیم. رفع این خطا نیاز به تخصص و تجربه بالا در برنامه نویسی داره. امیدوارم این آموزش برای شما مفید بوده باشه. تو جلسه بعدی درباره خطای Use video formats for animated content صحبت می‌کنیم.

اگه سوالی دارید در قسمت نظرات (پایین همین صفحه) بپرسید تا با کمال میل پاسخگوی شما عزیزان باشیم.