ببینید تاخیر ورودی چیست و تکنیکهایی را برای کاهش آن برای تعامل سریعتر بیاموزید.
فعل و انفعالات در وب چیزهای پیچیده ای هستند و انواع فعالیت ها در مرورگر برای هدایت آنها انجام می شود. با این حال، وجه مشترک همه آنها این است که قبل از شروع تماس های رویدادشان، با تاخیر ورودی مواجه می شوند. در این راهنما، خواهید آموخت که تاخیر ورودی چیست و چه کاری می توانید انجام دهید تا آن را به حداقل برسانید تا تعاملات وب سایت شما سریعتر انجام شود.
تاخیر ورودی چیست؟
تأخیر ورودی دوره زمانی است که از زمانی که کاربر برای اولین بار با یک صفحه تعامل برقرار می کند - مانند ضربه زدن روی صفحه، کلیک کردن با ماوس یا فشار دادن یک کلید - تا زمانی که تماس های رویداد برای تعامل شروع به اجرا می کند. هر تعاملی با مقداری تاخیر ورودی آغاز می شود.
بخشی از تأخیر ورودی اجتناب ناپذیر است: همیشه مقداری زمان طول می کشد تا سیستم عامل یک رویداد ورودی را تشخیص دهد و آن را به مرورگر ارسال کند. با این حال، این بخش از تاخیر ورودی اغلب حتی قابل توجه نیست، و موارد دیگری نیز در خود صفحه اتفاق می افتد که می تواند تاخیر ورودی را به اندازه کافی طولانی کند تا مشکل ایجاد کند.
چگونه به تأخیر ورودی فکر کنیم
به طور کلی، شما میخواهید هر بخش از تعامل را تا حد امکان کوتاه نگه دارید تا وبسایت شما بدون در نظر گرفتن دستگاه کاربر، بهترین شانس برای رسیدن به آستانه «خوب» معیار Interaction to Next Paint (INP) را داشته باشد. بررسی تأخیر ورودی تنها بخشی از این آستانه است.
ممکن است وسوسه شوید که آستانههای تأخیر ورودی اول (FID) را برای تعیین محدودیتی برای تأخیرهای ورودی بررسی کنید - اما آستانه «خوب» برای FID 100 میلیثانیه یا کمتر است. اگر از این آستانه عبور کنید، نیمی از بودجه خود را به INP تنها به تاخیر ورودی اختصاص می دهید. زمانی که فکر میکنید که یک تعامل برای اجرای تماسهای رویداد و اینکه مرورگر فریم بعدی را نقاشی کند به زمان نیاز دارد، توصیه نمیشود.
برای رسیدن به آستانه "خوب" INP، باید کوتاه ترین تاخیر ورودی ممکن را هدف قرار دهید، اما نباید انتظار داشته باشید که آن را به طور کامل حذف کنید، زیرا غیرممکن است. تا زمانی که از کار بیش از حد با موضوع اصلی اجتناب می کنید، در حالی که کاربران سعی می کنند با صفحه شما تعامل داشته باشند، تاخیر ورودی شما باید به اندازه کافی کم باشد تا مشکلی ایجاد نشود.
چگونه تاخیر ورودی را به حداقل برسانیم
همانطور که قبلاً گفته شد، برخی از تاخیرهای ورودی اجتناب ناپذیر است، اما از سوی دیگر، برخی از تاخیرهای ورودی قابل اجتناب هستند . در اینجا مواردی وجود دارد که باید در نظر بگیرید اگر با تاخیرهای ورودی طولانی دست و پنجه نرم می کنید.
از تایمرهای تکرار شونده که باعث شروع بیش از حد کار نخ اصلی می شود، خودداری کنید
دو تابع تایمر متداول در جاوا اسکریپت وجود دارد که می تواند به تاخیر ورودی کمک کند: setTimeout
و setInterval
. تفاوت بین این دو در این است که setTimeout
یک تماس برگشتی را برای اجرا پس از یک زمان مشخص برنامه ریزی می کند. از سوی دیگر، setInterval
یک تماس برگشتی را به گونهای برنامهریزی میکند که هر n میلیثانیه بهطور دائم اجرا شود، یا تا زمانی که تایمر با clearInterval
متوقف شود.
setTimeout
به خودی خود مشکل ساز نیست - در واقع، می تواند برای اجتناب از کارهای طولانی مفید باشد. با این حال، این بستگی به زمانی دارد که مهلت زمانی رخ میدهد، و اینکه آیا کاربر تلاش میکند با صفحه در هنگام اجرای بازخوانی مهلت زمانی انجام شود یا خیر.
علاوه بر این، setTimeout
میتواند در یک حلقه یا به صورت بازگشتی اجرا شود، جایی که بیشتر شبیه setInterval
عمل میکند، اگرچه ترجیحاً تکرار بعدی را تا تکمیل قبلی برنامهریزی نمیکند. در حالی که این بدان معناست که هر بار که setTimeout
فراخوانی میشود، حلقه به رشته اصلی تسلیم میشود، باید مراقب باشید که تماس برگشتی آن در نهایت کار بیش از حد انجام ندهد.
setInterval
در یک بازه زمانی یک تماس برگشتی را اجرا میکند و بنابراین احتمال بیشتری دارد که در مسیر تعامل قرار بگیرد. این به این دلیل است که - بر خلاف یک نمونه از یک تماس setTimeout
، که یک تماس برگشتی است که ممکن است مانع تعامل کاربر شود - ماهیت تکرارشونده setInterval
باعث میشود که این احتمال بسیار بیشتر شود که در مسیر یک تماس قرار گیرد . تعامل، بنابراین تاخیر ورودی تعامل افزایش می یابد.
اگر تایمرها در کدهای شخص اول وجود داشته باشند، شما روی آنها کنترل دارید. ارزیابی کنید که آیا به آنها نیاز دارید یا خیر، یا تمام تلاش خود را برای کاهش کار در آنها تا حد امکان انجام دهید. با این حال، تایمرها در اسکریپت های شخص ثالث داستان متفاوتی هستند. شما اغلب کنترلی بر کاری که یک اسکریپت شخص ثالث انجام می دهد ندارید، و رفع مشکلات عملکرد در کد شخص ثالث اغلب مستلزم کار با ذینفعان برای تعیین اینکه آیا یک اسکریپت شخص ثالث معین ضروری است یا خیر، و در این صورت، با یک اسکریپت شخص ثالث ارتباط برقرار کنید. فروشنده اسکریپت شخص ثالث برای تعیین اینکه چه کاری می تواند برای رفع مشکلات عملکردی که ممکن است در وب سایت شما ایجاد کند انجام دهد.
از کارهای طولانی دوری کنید
یکی از راههای کاهش تاخیرهای ورودی طولانی، اجتناب از کارهای طولانی است. هنگامی که کار بیش از حد رشته اصلی دارید که رشته اصلی را در طول تعاملات مسدود می کند، قبل از اینکه کارهای طولانی فرصتی برای اتمام پیدا کنند، به تاخیر ورودی برای آنها اضافه می شود.
علاوه بر به حداقل رساندن میزان کاری که در یک کار انجام میدهید - و همیشه باید تلاش کنید تا کمترین کار ممکن را روی موضوع اصلی انجام دهید - میتوانید با جدا کردن کارهای طولانی ، پاسخگویی به ورودی کاربر را بهبود ببخشید.
مراقب همپوشانی تعامل باشید
بخش چالش برانگیز بهینه سازی INP می تواند در صورت داشتن تعاملاتی باشد که همپوشانی دارند. همپوشانی تعامل به این معنی است که پس از تعامل با یک عنصر، قبل از اینکه تعامل اولیه فرصتی برای ارائه فریم بعدی داشته باشد، تعامل دیگری با صفحه ایجاد کنید.
منابع تعامل ممکن است به همین سادگی باشد که کاربران در مدت زمان کوتاهی تعاملات زیادی را انجام دهند. این می تواند زمانی رخ دهد که کاربران در فیلدهای فرم تایپ کنند، جایی که بسیاری از تعاملات صفحه کلید می تواند در مدت زمان بسیار کوتاهی رخ دهد. اگر کار روی یک رویداد کلیدی به ویژه گران است - مانند مورد رایج فیلدهای تکمیل خودکار که در آن درخواستهای شبکه به یک صفحه پشتی ارسال میشود - چند گزینه دارید:
- برای محدود کردن تعداد دفعاتی که یک رویداد در یک بازه زمانی معین اجرا میشود، ورودیهای برگشتی را در نظر بگیرید.
- از
AbortController
برای لغو درخواستهایfetch
خروجی استفاده کنید تا رشته اصلی در رسیدگی به تماسهایfetch
شلوغ نشود. توجه: ویژگیsignal
یک نمونهAbortController
همچنین می تواند برای لغو رویدادها استفاده شود.
یکی دیگر از منابع افزایش تاخیر ورودی به دلیل تعاملات همپوشانی می تواند انیمیشن های گران قیمت باشد. به طور خاص، انیمیشنهای جاوا اسکریپت ممکن است بسیاری از درخواستهای requestAnimationFrame
را اجرا کنند، که ممکن است مانع تعامل کاربر شود. برای دور زدن این موضوع، تا حد امکان از انیمیشنهای CSS استفاده کنید تا از قرار گرفتن فریمهای انیمیشن گرانقیمت بالقوه در صف بپرهیزید – اما اگر این کار را انجام میدهید، مطمئن شوید که از انیمیشنهای غیر ترکیبی اجتناب میکنید تا انیمیشنها عمدتاً روی رشتههای گرافیکی و کامپوزیتور اجرا شوند و نه روی رشته اصلی. .
نتیجه
در حالی که تاخیرهای ورودی ممکن است نشان دهنده اکثریت زمان اجرای تعاملات شما نباشد، مهم است که درک کنید که هر بخش از یک تعامل زمان زیادی را می گیرد که می توانید آن را کاهش دهید. اگر تاخیر ورودی طولانی را مشاهده می کنید، فرصت هایی برای کاهش آن دارید. اجتناب از تماسهای مکرر تایمر، شکستن وظایف طولانی، و آگاهی از همپوشانی تعامل احتمالی، همگی میتوانند به شما کمک کنند تا تاخیر ورودی را کاهش دهید و منجر به تعامل سریعتر برای کاربران وبسایت شما شود.
تصویر قهرمان از Unsplash , اثر اریک مکلین .