معیار INP گوگل چیست و چگونه محاسبه میشود؟
معیار Interaction to Next Paint (INP)، معیار جدیدی است که گوگل از آن برای اندازهگیری سرعت واکنش وب سایت شما به تعاملات کاربر استفاده میکند. این معیار به یکی از معیارهای Core Web Vitals تبدیل خواهد شد که از ماه مارچ 2024 بر رتبهبندی Google تأثیر میگذارد. به همین دلیل ما در این مقاله از رسانه مدیاتی نگاهی به آنچه INP اندازهگیری میکند و چه کارهایی میتوانید برای بهینهسازی آن انجام دهید، میاندازیم.
آشنایی با Interaction to Next Paint
معیار Interaction to Next Paint (INP)، یک معیار عملکرد وب است که میزان پاسخگویی رابط کاربری، یعنی سرعت واکنش وبسایت به تعاملات کاربر مانند پاسخدهی به کلیکها یا فشار دادن کلیدها را اندازهگیری میکند. این معیار، به طور خاص، میزان زمان سپری شدن بین تعامل کاربر مانند کلیک یا فشار دادن کلید و مشاهده مجدد بهروزرسانی بصری توسط کاربر در صفحه را اندازهگیری میکند.
تعامل با INP چگونه اندازهگیری میشود؟
معیار INP مدت زمان سپری شدن بین ورودی کاربر، مانند کلیکها و فشار دادن کلیدها و بهروزرسانی بعدی رابط کاربری را اندازهگیری میکند. تأخیر ورودی زمانی است که فرد در پسزمینه سیستم در حال انجام کارهای متفرقه است و این تاخیر در فاصله زمانی معیار INP اندازهگیری میشود.
این نمودار یک جدول زمانی نمونه از وظایف مختلف CPU و نحوه اضافه شدن آنها به فعالیت INP را نشان میدهد. Interaction to Next Paint کل فریم زمانی را از ورودی ماوس، صفحه تاچ یا صفحه کلید تا زمانی که فریم بعدی توسط مرورگر رندر میشود را در بر میگیرد. زمان پردازش را میتواند از چندین کنترلکننده رویداد مثل رویدادهای keydown و keyup تشکیل شده باشد.
معیار Interaction to Next Paint چه اهمیتی دارد؟
یک INP خوب کمتر از 200 میلی ثانیه است. INP که بیش از 500 میلی ثانیه باشد، ضعیف محسوب میشود. معیار Interaction to Next Paint از ماه مارچ 2024 به یکی از معیارهای اصلی Web Vitals تبدیل میشود و بنابراین یک عامل رتبهبندی Google خواهد بود. از این نظر وبسایتها برای افزایش تعامل و بازدید خود باید با این معیار آشنا باشند. تبدیل شدن به معیار Core Web Vitals به این معنی است که تعامل ضعیف با Next Paint میتواند بر رتبهبندی Google شما تأثیر بگذارد.
گوگل به طور مداوم نحوه تعریف معیارهای Core Web Vitals خود را اصلاح میکند. اگر تغییرات غیرقابل توضیحی در معیارهای خود مشاهده کردید، ممکن است به دلیل تغییر در نحوه اندازهگیری INP باشد. برای مشاهده تغییراتی که در نسخههای مختلف Chrome ایجاد شده است، تغییر INP را بررسی کنید.
نحوه بهینهسازی Interaction to Next Paint
بهترین راه برای کاهش INP، کاهش میزان پردازش CPU است که در صفحه شما اتفاق میافتد. همچنین میتوانید تعداد بیشتری از کدهای خود را به صورت غیر همزمان اجرا کنید تا کاربر بهروزرسانی فوری UI را دریافت کند.
نمایهساز عملکرد DevTools ابزاری عالی برای یافتن آنچه در رشته اصلی صفحه اتفاق میافتد و چگونگی بهینهسازی آن است. با استفاده از این ابزار تعاملات متداول هر کاربر را در صفحه خود شناسایی کنید و فعالیت CPU در صفحه را که در طول تعامل رخ میدهد، ضبط کنید. سپس میتوانید تعاملاتی که بیشترین تاخیر را داشتهاند بیابید.
مولفه تاخیر ورودی را کاهش دهید.
برای کاهش مؤلفه تأخیر ورودی INP، باید فعالیت CPU پسزمینه را در رشته اصلی کاهش داده و جدا کنید. هنگام بررسی دادههای آزمایشگاهی، میتوانید به معیار زمان تاخیر کل نگاه کنید تا ببینید آیا فعالیت پسزمینهای وجود دارد که تعاملات کاربر را مسدود کند یا خیر.
مولفه پردازش را کاهش دهید.
نحوه بهینهسازی فعالیت CPU به شدت به برنامه شما بستگی دارد. شما باید بررسی کنید که مرورگر بیشتر وقت خود را در کجا میگذراند و آن قسمتها را بهینه کنید. با استفاده از برنامه React ممکن است بتوانید از بازپردازی غیرضروری اجزای خود برای افزایش سرعت وبسایت خود اجتناب کنید. اگر نیاز به پردازش سنگین جاوا اسکریپت در پاسخ به ورودی کاربر دارید، قبل از شروع کار CPU، رابط کاربری را بهروز کنید.
از هشدار بومی، تأیید و گفتوگوهای سریع خودداری کنید.
روشهای جاوا اسکریپت مانند هشدار، راه آسانی برای نشان دادن پیام به کاربر یا درخواست از او برای تأیید یک عمل است. با این حال، آنها به طور همزمان اجرا میشوند و رشته اصلی صفحه را مسدود میکنند، به این معنی که تمام زمانی که آن هشدارها و پیامها برای کاربر قابل مشاهده هستند، به عنوان تاخیر کلی تعامل محاسبه میشود. برنامههایی برای بازنگری در این مورد قبل از عرضه کامل INP به عنوان معیار اصلی Web Vitals وجود دارد.
تاخیر ارائه را کاهش دهید.
میزان تاخیر ارائه به پیچیدگی صفحه و میزان بهروزرسانی صفحه بستگی دارد. اگر رندر کردن محتویات صفحه کند است، ابتدا فقط محتوای مهم «در بالای صفحه» را در نظر بگیرید تا فریم بعدی را سریعتر تحویل دهید.
معیار Interaction to Next Paint چه تفاوتی با First Input Delay دارد؟
دو تفاوت بین FID و INP وجود دارد: FID فقط تأخیر پردازش اولیه را اندازهگیری میکند در حالی که INP کل زمان بین ورودی کاربر و بهروزرسانی رابط کاربری را اندازهگیری میکند. FID als فقط اولین تعامل کاربر در یک صفحه را محاسبه میکند، در حالی که INP (تقریبا) بیشترین تاخیر را بررسی میکند.
در اولین تأخیر ورودی، اینکه چه مدت طول میکشد تا مرورگر ورودی کاربر را پردازش کند، اندازهگیری میشود. زمان واقعی صرف شده برای پاسخ دادن به رویداد یا بهروزرسانی رابط کاربری شامل این معیار نمیشود. همانطور که از نام آن پیداست، FID تنها اولین باری که کاربر با صفحه ارتباط برقرار میکند را در نظر میگیرد. به خصوص برای صفحاتی که برای مدت طولانی باز میمانند، مانند برنامههای تک صفحهای، این اولین تعامل نمیتواند نماینده تجربه کلی کاربر نباشد.
معیار Interaction to Next Paint معمولاً بیشترین تاخیر ورودی را در صفحه اندازهگیری میکند. با این حال، موارد پرت نادیده گرفته میشوند و Google 98 درصد تاخیر تعامل را اندازهگیری میکند. بنابراین اگر INP در یک صفحه 250 میلی ثانیه باشد، 2٪ از تعاملات کاربر دارای تاخیر بیش از 250 میلی ثانیه است.
چرا INP یک متریک میدانی است؟
متریک تعامل با INP برای اندازهگیری به ورودی کاربر نیاز دارد، بنابراین معمولاً در دادههای میدانی جمعآوریشده از کاربران واقعی موجود است. گوگل دادههای واقعی کاربر را در INP به عنوان بخشی از گزارش تجربه کاربر Chrome (CrUX) جمعآوری میکند.
شما میتوانید یک تعامل کاربر را در یک محیط آزمایشگاهی برای جمعآوری دادههای آزمایشگاهی برای INP اسکریپت کنید. به خاطر داشته باشید که هر تعامل صفحه، بسته به اینکه کاربر با چه عنصر UI تعامل دارد و چه زمانی آن تعامل اتفاق میافتد، میتواند ویژگیهای عملکرد متفاوتی داشته باشد.
معیار INP چگونه کندترین تعامل را اندازهگیری میکند؟
هنگامی که یک کاربر از یک صفحه بازدید میکند، ممکن است روی چندین عنصر مختلف UI کلیک کند. اگر آنها فرمی را پر میکنند، کلیدهای زیادی را روی صفحه کلید خود فشار میدهند. پس INP چگونه آن را محاسبه میکند؟
معیار INP حداقل 2% از پاسخهای UI را گزارش میکند. معمولاً این بدان معناست که بدترین تأخیر گزارش میشود، اما اگر صفحهای تعاملات زیادی دریافت کند، تنها یکی از کندترینها گزارش میشود. به عنوان مثال، اگر یک صفحه 50 میلی ثانیه طول بکشد تا به 100 تعامل پاسخ دهد، و سپس یک تعامل با 300 میلی ثانیه تاخیر وجود داشته باشد، INP به صورت 50 میلی ثانیه گزارش میشود. با این حال، اگر سه تاخیر 300 میلی ثانیهای وجود داشته باشد، صدک 98 300 میلی ثانیه خواهد بود و این به عنوان INP گزارش میشود.
معیار INP چه تعاملاتی از کاربر را در نظر میگیرد؟
تعاملات زیر برای INP شمارش میشود:
- کلیک ماوس
- ضربه زدن (روی صفحه لمسی)
- فشار دادن کلید
تعاملات زیر به حساب نمیآیند:
- Hovering
- Scrolling
نحوه اندازهگیری تعامل با INP
میتوانید از تعدادی ابزار برای اندازهگیری Interaction to Next Paint استفاده کنید. روشهایی که در ادامه آوردهایم، نمونهای از این روشها هستند.
اندازهگیری تعامل INP با DebugBear
تست سرعت وبسایت رایگان توسط DebugBear میتواند به شما نشان دهد که Interaction to Next Paint برای کاربران واقعی وبسایت شما چگونه است. کافی است URL خود را وارد کنید، آزمایش را اجرا کنید و برگه Web Vitals را باز کنید. در آنجا میتوانید Interaction to Next Paint را تحت عنوان Additional Web Vitals پیدا کنید.
علاوه بر مشاهده دادههای CrUX در 28 روز گذشته، میتوانید سابقه تغییر INP در 25 هفته گذشته را نیز مشاهده کنید.
برای جابهجایی بین دادههای مربوط به نشانی وب آزمایشی خاص و کل وبسایت، از دکمه «URL» و «Origin» در نزدیکی بالای صفحه استفاده کنید. همچنین میتوانید با استفاده از مانیتورینگ کاربر واقعی DebugBear، Interaction to Next Paint را بهطور مداوم نظارت کنید.
اندازهگیری تعامل با Next Paint در PageSpeed Insights
بخش کاربر واقعی در Google PageSpeed Insights، معیار INP را به این صورت نشان میدهد که صفحه با چه سرعتی به تعاملات کاربر پاسخ میدهد.
مشاهده معیار INP را با افزونه Site Speed Chrome
برای مشاهده Core Web Vitals و INP، همچنین میتوانید «Site Speed Chrome Extension» را نصب کنید. این مقدار فقط زمانی در دسترس خواهد بود که با صفحه تعامل داشته باشید، برای مثال با کلیک کردن روی آن یا تایپ کردن در یک فیلد متنی.
معیار INP در کنسول جستجوی گوگل
برگه Core Web Vitals در Google Search Console اکنون شامل «آماده شدن برای تغییراتی که در مارچ 2024 میآیند» در پایین است.
پس از کلیک بر روی قسمت Poor or Needs Improvement میتوانید ببینید که چه تعداد URL تحت تأثیر قرار گرفتهاند و چه گروههای URL را باید بهینه کنید.
اندازهگیری معیار INP را با کتابخانه web-vitals
اگر میخواهید INP را به صورت برنامهنویسی با جاوا اسکریپت اندازهگیری کنید، میتوانید از کتابخانه web-vitals استفاده کنید. این فضا به شما امکان میدهد اندازهگیریها را از کاربران واقعی دریافت کنید و آنها را به ارائهدهنده تجزیه و تحلیل خود ارسال کنید.
