یاد بگیرید چگونه تعامل تا نقاشی بعدی (INP) را بررسی کنید و مشکلات بحرانی را در وبسایت خود با مثالهای واقعی برطرف کنید.
این پست با حمایت DebugBear تهیه شده است. نظرات بیان شده در این مقاله متعلق به حامی است.
حفظ سرعت وبسایت شما برای تجربه کاربری و سئو بسیار مهم است. ابتکار «حیاتیترین شاخصهای وب» (Core Web Vitals) از گوگل مجموعهای از معیارها را فراهم میکند تا به شما در درک عملکرد وبسایتتان کمک کند.
سه معیار حیاتیترین شاخصهای وب عبارتند از:
- بزرگترین رنگآمیزی محتوای دیداری (LCP)
- تغییر تجمعی طرحبندی (CLS)
- تعامل تا نقاشی بعدی (INP)
این پست بر روی معیار تازه معرفی شده INP و آنچه که میتوانید برای بهبود آن انجام دهید، تمرکز دارد.
در این راهنما
- تعامل تا نقاشی بعدی چگونه اندازهگیری میشود؟
- چگونه زمانهای کند INP را شناسایی و برطرف کنیم
- چگونه تأخیر بالای ورودی را بررسی کنیم
- چگونه تأخیر بالای نمایش را بررسی کنیم
- دادههای مورد نیاز برای بهبود تعامل تا نقاشی بعدی را دریافت کنید
تعامل تا نقاشی بعدی چگونه اندازهگیری میشود؟
INP مدت زمانی را که وبسایت شما به تعاملات کاربری پاسخ میدهد – برای مثال کلیک روی یک دکمه – اندازهگیری میکند. به طور خاصتر، INP زمان بر حسب میلیثانیه بین ورودی کاربر و زمانی که مرورگر پردازش تعامل را تمام کرده و آماده نمایش هر گونه بهروزرسانی دیداری در صفحه است را اندازهگیری میکند.
وبسایت شما باید این فرآیند را در کمتر از 200 میلیثانیه تکمیل کند تا امتیاز “خوب” بگیرد. مقادیر بیش از نیم ثانیه به عنوان “ضعیف” در نظر گرفته میشوند. امتیاز ضعیف در یک معیار حیاتیترین شاخصهای وب میتواند به طور منفی رتبهبندی موتور جستجوی شما را تحت تأثیر قرار دهد.
گوگل دادههای INP را از بازدیدکنندگان واقعی وبسایت شما به عنوان بخشی از گزارش تجربه کاربری کروم (CrUX) جمعآوری میکند. این داده CrUX همان چیزی است که در نهایت رتبهبندیها را تحت تأثیر قرار میدهد.
چگونه زمانهای کند INP را شناسایی و برطرف کنیم
عوامل مؤثر بر تعامل کند تا نقاشی بعدی اغلب میتوانند پیچیده و دشوار برای شناسایی باشند. این راهنمای گام به گام را دنبال کنید تا تعاملات کند در وبسایت خود را درک کرده و بهینهسازیهای ممکن را پیدا کنید.
1- چگونه یک صفحه با زمانهای کند INP را شناسایی کنیم
صفحات مختلف در وبسایت شما امتیازات متفاوتی در حیاتیترین شاخصهای وب خواهند داشت. بنابراین، باید یک صفحه کند را شناسایی کنید و سپس بررسی کنید چه چیزی باعث کندی آن شده است.
استفاده از کنسول جستجوی گوگل
یک راه آسان برای بررسی امتیازات INP استفاده از بخش حیاتیترین شاخصهای وب در کنسول جستجوی گوگل است که دادهها را بر اساس دادههای CrUX گوگل که قبلاً مورد بحث قرار گرفته است، گزارش میدهد.
به طور پیشفرض، آدرسهای صفحه در گروههای آدرس URL که بسیاری از صفحات مختلف را پوشش میدهند، گروهبندی میشوند. در اینجا مراقب باشید – ممکن است همه صفحات مشکلی که گوگل گزارش میدهد را نداشته باشند. به جای آن، بر روی هر گروه URL کلیک کنید تا ببینید آیا دادههای خاصی برای برخی از صفحات موجود است و سپس روی آنها تمرکز کنید.
استفاده از سرویس مانیتورینگ واقعی کاربران (RUM)
گوگل دادههای حیاتیترین شاخصهای وب را برای هر صفحه در وبسایت شما گزارش نخواهد کرد و فقط اندازهگیریهای خام بدون هیچگونه جزئیاتی برای کمک به شما در درک و رفع مشکلات ارائه میدهد. برای دستیابی به این امر، میتوانید از ابزاری برای مانیتورینگ واقعی کاربران مانند DebugBear استفاده کنید.
مانیتورینگ واقعی کاربران با نصب یک قطعه کد تجزیه و تحلیل در وبسایت شما که سرعت وبسایتتان را برای بازدیدکنندگان شما اندازهگیری میکند، کار میکند. وقتی این تنظیمات انجام شد، به داشبورد تعامل تا نقاشی بعدی دسترسی خواهید داشت که به این شکل است:
میتوانید صفحات مورد نظر برای بهینهسازی را در لیست شناسایی کنید، نشانگر ماوس را بر روی URL قرار دهید و برای مشاهده دادههای خاص آن صفحه روی آیکون قیف کلیک کنید.
2- بررسی کنید کدام تعاملات المانی کند هستند
بازدیدکنندگان مختلف در همان صفحه تجربههای متفاوتی خواهند داشت. بسیاری از آن بستگی به نحوه تعامل آنها با صفحه دارد: اگر آنها روی یک تصویر پسزمینه کلیک کنند، هیچ ریسکی برای یخزدگی ناگهانی صفحه وجود ندارد، اما اگر روی دکمهای کلیک کنند که پردازش سنگینی را آغاز میکند، این احتمال بیشتر است. و کاربران در این سناریو دوم تجربه INP بسیار بالاتری خواهند داشت.
برای کمک به این امر، دادههای RUM یک تجزیه و تحلیل از عناصری که کاربران با آنها تعامل داشتهاند و میزان تأخیر در تعامل را ارائه میدهد.
تصویر بالا تعاملات مختلف INP را نشان میدهد که بر اساس میزان تکرار این تعاملات کاربری مرتب شدهاند. برای سادهتر کردن بهینهسازیها، میخواهید روی یک تعامل کند که بسیاری از کاربران را تحت تأثیر قرار میدهد، تمرکز کنید.
در DebugBear میتوانید روی عنصر صفحه کلیک کنید تا آن را به فیلترهای خود اضافه کرده و به تحقیقات خود ادامه دهید.
3- شناسایی کنید که کدام مؤلفه INP بیشترین سهم را در تعاملات کند دارد
تأخیر INP میتواند به سه مؤلفه مختلف تقسیم شود:
- تأخیر ورودی: کدی در پسزمینه که مانع پردازش تعامل میشود.
- زمان پردازش: زمان صرف شده برای مستقیم رسیدگی به تعامل.
- تأخیر نمایش: نمایش بهروزرسانیهای دیداری روی صفحه.
شما باید تمرکز خود را بر روی مؤلفه INP که بزرگترین سهم را در زمان کند INP دارد، قرار داده و در طول تحقیقات خود آن را در نظر داشته باشید.
در این سناریو، زمان پردازش بزرگترین سهم را در زمان کند INP برای مجموعهای از صفحات که بررسی میکنید دارد، اما باید بیشتر بررسی کنید تا بفهمید چرا.
زمان پردازش بالا نشان میدهد که کدی در تعامل کاربر دخالت دارد و کد با عملکرد کند اجرا میشود. اگر به جای آن تأخیر ورودی بالایی را مشاهده کردید، نشان میدهد که وظایف پسزمینهای وجود دارد که مانع از پردازش تعامل میشوند، به عنوان مثال به دلیل اسکریپتهای شخص ثالث.
4- بررسی کنید کدام اسکریپتها در INP کند نقش دارند
گاهی اوقات مرورگرها اسکریپتهای خاصی را که در تعامل کند نقش دارند گزارش میدهند. وبسایت شما احتمالاً شامل اسکریپتهای شخص اول و شخص ثالث است که هر دو میتوانند در زمانهای کند INP نقش داشته باشند.
یک ابزار RUM مانند DebugBear میتواند این دادهها را جمعآوری و نمایش دهد. چیزی که میخواهید بیشتر توجه کنید این است که آیا بیشتر کد وبسایت خودتان را میبینید یا کد از طرف ثالثها.
نکته: زمانی که یک اسکریپت یا تابع کد منبع به عنوان “N/A” علامتگذاری شده است، این میتواند نشان دهد که اسکریپت از یک مبدأ دیگر آمده است و محدودیتهای امنیتی اضافی دارد که مانع از جمعآوری اطلاعات دقیقتر توسط ابزارهای RUM میشود.
این حالا شروع به تعریف یک داستان میکند: به نظر میرسد که اسکریپتهای تجزیه و تحلیل/شخص ثالث بزرگترین نقش را در زمانهای کند INP دارند.
5- شناسایی کنید که چرا این اسکریپتها در حال اجرا هستند
در این مرحله شما اکنون شک قوی دارید که بیشتر تأخیر INP حداقل در صفحات و عناصری که در حال بررسی هستید به دلیل اسکریپتهای شخص ثالث است. اما چگونه میتوانید بفهمید که آیا اینها اسکریپتهای ردیابی عمومی هستند یا واقعاً نقشی در رسیدگی به تعامل دارند؟
DebugBear یک تجزیه و تحلیل ارائه میدهد که کمک میکند ببینید چرا کد در حال اجرا است، به نام تجزیه و تحلیل اسکریپت اولیه INP. این نام کمی طولانی است – چندین اسکریپت مختلف میتوانند در کند کردن یک تعامل دخالت داشته باشند و اینجا فقط بزرگترین مشارکتکننده را میبینید. “محرک” فقط مقداری است که مرورگر گزارش میدهد درباره اینکه چه چیزی باعث شده این کد اجرا شود.
نامهای محرک زیر مثالهایی از کنترلکنندههای رویداد در سطح صفحه هستند:
- onclick
- onmousedown
- onpointerup
اینها را در تصویر بالا زیاد میبینید که به شما میگوید که اسکریپت تجزیه و تحلیل کلیکها را در هر جایی از صفحه ردیابی میکند.
در مقابل، اگر نامهای محرک مانند اینها را مشاهده کنید، نشاندهنده کنترلکنندههای رویداد برای یک عنصر خاص در صفحه است:
- .load_more.onclick
- #logo.onclick
6- مرور مشاهدههای خاص صفحه
بسیاری از دادههایی که تاکنون دیدهاید، تجمعی هستند. اکنون وقت آن است که به رویدادهای INP فردی نگاهی بیندازید تا نتیجهگیری قطعی درباره علت کند بودن INP در این مثال داشته باشید.
ابزارهای مانیتورینگ واقعی کاربران مانند DebugBear معمولاً راهی برای مرور تجربههای کاربری خاص ارائه میدهند. برای مثال، میتوانید ببینید که از چه مرورگری استفاده کردهاند، اندازه صفحه نمایش آنها چقدر است و چه عنصری منجر به کندترین تعامل شده است.
همانطور که قبلاً گفته شد، چندین اسکریپت میتوانند به کلی کندی INP کمک کنند. بخش اسکریپتهای INP به شما نشان میدهد که چه اسکریپتهایی در طول تعامل INP اجرا شدهاند:
میتوانید هر یک از این اسکریپتها را با جزئیات بیشتری مرور کنید تا بفهمید چرا اجرا شدهاند و چه چیزی باعث شده که زمان بیشتری برای تکمیل نیاز داشته باشند.
7- از پروفایلر DevTools برای اطلاعات بیشتر استفاده کنید
ابزارهای مانیتورینگ واقعی کاربران به حجم زیادی از دادهها دسترسی دارند، اما به دلایل عملکردی و امنیتی نمیتوانند به تمامی دادههای موجود دسترسی پیدا کنند. به همین دلیل، ایده خوبی است که همچنین از DevTools کروم برای اندازهگیری عملکرد صفحه خود استفاده کنید.
برای اشکالزدایی INP در DevTools میتوانید اندازهگیری کنید که مرورگر چگونه یکی از تعاملات کندی را که قبلاً شناسایی کردهاید پردازش میکند. سپس DevTools به شما نشان میدهد که مرورگر دقیقاً چگونه زمان خود را صرف رسیدگی به تعامل میکند.
چگونه ممکن است این مشکل را حل کنید
در این مثال، شما یا تیم توسعهتان میتوانید این مشکل را با انجام موارد زیر حل کنید:
- همکاری با ارائهدهنده اسکریپت شخص ثالث برای بهینهسازی اسکریپت آنها.
- حذف اسکریپت اگر برای وبسایت ضروری نیست یا پیدا کردن یک ارائهدهنده جایگزین.
- تنظیم نحوه تعامل کد خودتان با اسکریپت.
چگونه تأخیر ورودی بالا را بررسی کنیم
در مثال قبلی، بیشتر زمان INP صرف اجرای کد در پاسخ به تعامل شد. اما اغلب مرورگر در حال اجرای کدهای دیگری است هنگامی که یک تعامل کاربری اتفاق میافتد. هنگام بررسی مؤلفههای INP، سپس یک مقدار تأخیر ورودی بالا مشاهده خواهید کرد.
این ممکن است به دلایل مختلفی اتفاق بیفتد، برای مثال:
- کاربر با وبسایت تعامل داشته در حالی که هنوز در حال بارگذاری بوده است.
- یک کار برنامهریزی شده در حال اجرا روی صفحه است، مثلاً یک انیمیشن در حال اجرا.
- صفحه در حال بارگذاری و رندر محتوای جدید است.
برای درک آنچه اتفاق میافتد، میتوانید نام محرک و بخش اسکریپتهای INP در تجربههای کاربری خاص را مرور کنید.
در این تصویر میتوانید ببینید که یک تایمر در حال اجرای کد است که با شروع یک تعامل کاربری همزمان است.
اسکریپت میتواند باز شود تا کد دقیقی که اجرا میشود را نشان دهد:
کد منبع نمایش داده شده در تصویر قبلی از یک اسکریپت ردیابی کاربر شخص ثالث آمده است که در صفحه اجرا میشود.
در این مرحله، شما و تیم توسعهتان میتوانید با فرآیند کاری INP که قبلاً در این مقاله ارائه شده است ادامه دهید. به عنوان مثال، اشکالزدایی با DevTools مرورگر یا تماس با ارائهدهنده شخص ثالث برای پشتیبانی.
چگونه تأخیر نمایش بالا را بررسی کنیم
تأخیر نمایش به طور معمول دشوارتر از تأخیر ورودی یا زمان پردازش برای اشکالزدایی است. اغلب این ناشی از رفتار مرورگر است تا یک اسکریپت خاص. اما مانند قبل، شما همچنان با شناسایی یک صفحه خاص و یک تعامل خاص شروع میکنید.
شما میتوانید یک نمونه تعامل با تأخیر نمایش بالا را اینجا ببینید:
میبینید که این اتفاق زمانی رخ میدهد که کاربر متنی را در یک فیلد فرم وارد میکند. در این مثال، بسیاری از بازدیدکنندگان مقدار زیادی متن را چسباندهاند که مرورگر باید پردازش کند.
در اینجا راه حل این بود که پردازش را به تأخیر بیندازیم، پیغام “در حال انتظار…” را به کاربر نمایش دهیم و سپس پردازش را بعداً تکمیل کنیم. میتوانید ببینید که امتیاز INP از 3 مه بهبود مییابد:
دادههای مورد نیاز برای بهبود تعامل تا نقاشی بعدی را دریافت کنید
راهاندازی مانیتورینگ واقعی کاربران به شما کمک میکند تا درک کنید که کاربران چگونه وبسایت شما را تجربه میکنند و چه کاری میتوانید برای بهبود آن انجام دهید. اکنون DebugBear را با ثبت نام برای یک دوره آزمایشی رایگان 14 روزه امتحان کنید.
دادههای CrUX گوگل در یک دوره 28 روزه جمعآوری میشوند، به این معنی که مدتی طول میکشد تا متوجه تغییرات شوید. با مانیتورینگ واقعی کاربران، میتوانید تاثیر تغییرات وبسایت را بلافاصله مشاهده کنید و به صورت خودکار هنگامی که تغییر بزرگی رخ میدهد، هشدار دریافت کنید.
DebugBear دادههای آزمایشگاهی، دادههای CrUX و دادههای واقعی کاربران را مانیتور میکند. به این ترتیب، شما تمام دادههایی که برای بهینهسازی حیاتیترین شاخصهای وب خود نیاز دارید را در یک مکان دارید.
منبع: https://www.searchenginejournal.com/optimize-interaction-next-paint-debugbear-spa/515600/
