Interaction to Next Paint یا INP یکی از معیارهای Core Web Vitals گوگل است که میزان پاسخ‌گویی یک صفحه وب به تعاملات کاربر را اندازه‌گیری می‌کند. به زبان ساده، INP بررسی می‌کند وقتی کاربر روی یک دکمه کلیک می‌کند، روی یک گزینه ضربه می‌زند یا چیزی را با صفحه تعامل می‌دهد، چه مدت طول می‌کشد تا مرورگر واکنش بصری مناسب را نمایش دهد.
برای مثال، فرض کنید کاربر در یک فروشگاه اینترنتی روی دکمه «افزودن به سبد خرید» کلیک می‌کند. اگر دکمه بلافاصله واکنش نشان دهد و تغییر وضعیت سبد خرید سریع دیده شود، تجربه کاربر مطلوب است. اما اگر کاربر کلیک کند و برای چند ثانیه هیچ اتفاقی روی صفحه نیفتد، احتمالاً تصور می‌کند دکمه کار نکرده است و ممکن است چند بار روی آن کلیک کند.
INP دقیقاً برای بررسی همین سرعت پاسخ‌گویی صفحه به تعاملات کاربر طراحی شده است. این معیار همه تعاملات واجد شرایط در طول حضور کاربر در صفحه را در نظر می‌گیرد و یک مقدار نهایی برای میزان پاسخ‌گویی صفحه ارائه می‌کند.
چرا INP مهم است؟
سرعت یک سایت فقط به این معنا نیست که صفحه چقدر سریع برای اولین بار نمایش داده می‌شود. ممکن است یک صفحه در مدت کوتاهی بارگذاری شود، اما بعد از بارگذاری، هنگام کلیک روی دکمه‌ها، باز کردن منوها یا ارسال فرم‌ها واکنش کندی داشته باشد.
به همین دلیل، عملکرد سایت را باید در طول تعامل کاربر با صفحه نیز بررسی کرد.
گوگل INP را در کنار LCP و CLS به‌عنوان یکی از Core Web Vitals در نظر می‌گیرد. LCP بیشتر روی سرعت بارگذاری محتوای اصلی، INP روی پاسخ‌گویی و CLS روی ثبات بصری صفحه تمرکز دارد. گوگل توصیه می‌کند سایت‌ها برای ارائه تجربه کاربری مناسب، وضعیت این معیارها را بررسی و بهینه کنند.
نکته مهم این است که INP بالا فقط یک مشکل عددی در ابزارهای تست سرعت نیست؛ معمولاً نشانه این است که کاربر واقعاً در هنگام استفاده از سایت با تأخیر مواجه می‌شود.
معیار خوب برای INP چیست؟
مقدار INP بر اساس میلی‌ثانیه محاسبه می‌شود و هرچه کمتر باشد، پاسخ‌گویی صفحه بهتر است.
| مقدار INP | وضعیت |
|---|---|
| ۲۰۰ میلی‌ثانیه یا کمتر | خوب |
| بیشتر از ۲۰۰ تا ۵۰۰ میلی‌ثانیه | نیازمند بهبود |
| بیشتر از ۵۰۰ میلی‌ثانیه | ضعیف |
برای ارزیابی تجربه واقعی کاربران، گوگل توصیه می‌کند معیارها در صدک ۷۵ داده‌های واقعی کاربران و به تفکیک دستگاه‌های موبایل و دسکتاپ بررسی شوند.
بنابراین اگر در گزارش عملکرد سایت خود عددی مانند INP = 150ms مشاهده می‌کنید، وضعیت پاسخ‌گویی خوب است. اما اگر این عدد به 650ms برسد، یعنی کاربران در بخشی از تعاملات صفحه با تأخیر قابل توجهی مواجه می‌شوند.
INP چگونه محاسبه می‌شود؟
برای درک بهتر INP باید بدانیم یک تعامل کاربر معمولاً فقط به کلیک محدود نمی‌شود. مرورگر باید ورودی کاربر را دریافت کند، کدهای مربوط به آن را اجرا کند و سپس نتیجه را روی صفحه نمایش دهد.
به‌طور کلی، یک تعامل را می‌توان به سه بخش تقسیم کرد:
Input Delay: فاصله زمانی از شروع تعامل کاربر تا زمانی که مرورگر بتواند پردازش رویداد را آغاز کند.
Processing Duration: مدت زمانی که اجرای Event Handlerها و پردازش‌های مربوط به تعامل طول می‌کشد.
Presentation Delay: زمانی که بعد از پایان پردازش لازم است تا مرورگر فریم بعدی حاوی نتیجه تعامل را نمایش دهد.
مجموع این بخش‌ها روی زمان پاسخ‌گویی تعامل تأثیر می‌گذارند.
به همین دلیل ممکن است مشکل INP فقط به «کند بودن سرور» مربوط نباشد. در بسیاری از موارد، اجرای سنگین JavaScript یا عملیات پیچیده روی مرورگر عامل اصلی است.
تفاوت INP و FID چیست؟
اگر قبلاً درباره Core Web Vitals مطالعه کرده باشید، احتمالاً با FID یا First Input Delay برخورد کرده‌اید.
FID معیار قبلی برای بررسی پاسخ‌گویی صفحه بود، اما از مارس ۲۰۲۴، INP جایگزین FID به‌عنوان Core Web Vital مربوط به تعامل‌پذیری شد.
تفاوت مهم این دو در دامنه اندازه‌گیری آنهاست.
FID عمدتاً تأخیر اولین تعامل کاربر را بررسی می‌کرد، در حالی که INP پاسخ‌گویی تعاملات صفحه را در طول حضور کاربر بررسی می‌کند. بنابراین INP تصویر کامل‌تری از وضعیت پاسخ‌گویی صفحه ارائه می‌دهد.
برای مثال، ممکن است اولین کلیک کاربر در یک صفحه بسیار سریع باشد، اما زمانی که کاربر چند مرحله بعدی را انجام می‌دهد، یکی از دکمه‌ها یا فرم‌ها واکنش بسیار کندی داشته باشد. INP برای شناسایی چنین مشکلاتی طراحی شده است.
چه تعاملاتی روی INP تأثیر می‌گذارند؟
INP تعاملاتی مانند موارد زیر را بررسی می‌کند:
- کلیک با ماوس
- لمس صفحه در موبایل و تبلت
- فشردن کلیدهای صفحه‌کلید
در مقابل، مواردی مانند اسکرول، حرکت ماوس یا زوم به‌عنوان تعاملات مورد استفاده برای محاسبه INP در نظر گرفته نمی‌شوند.
بنابراین اگر یک صفحه هنگام اسکرول کمی سنگین باشد، الزاماً نمی‌توان نتیجه گرفت که INP آن نیز ضعیف است؛ باید تعاملات واجد شرایط و زمان پاسخ‌گویی آنها بررسی شود.
مهم‌ترین دلایل بالا بودن INP چیست؟
INP بالا معمولاً نتیجه انجام کار زیاد در مرورگر هنگام تعامل کاربر است. یکی از مهم‌ترین عوامل، اجرای JavaScriptهای سنگین روی Main Thread است.
اجرای JavaScriptهای سنگین
JavaScript می‌تواند در هنگام کلیک کاربر عملیات زیادی انجام دهد. اگر این عملیات طولانی باشد، مرورگر نمی‌تواند به‌سرعت نتیجه تعامل را نمایش دهد.
برای مثال، در یک فروشگاه زنجیره‌ای فرضی، کاربر روی گزینه «نمایش محصولات گیاهی» کلیک می‌کند. اگر مرورگر مجبور باشد هم‌زمان صدها محصول را فیلتر، مرتب و دوباره در صفحه ایجاد کند، واکنش دکمه ممکن است با تأخیر انجام شود.
Long Taskها
وقتی یک کار طولانی روی Main Thread اجرا می‌شود، سایر فعالیت‌ها ممکن است منتظر بمانند. در چنین شرایطی کاربر کلیک می‌کند، اما مرورگر هنوز مشغول اجرای عملیات قبلی است.
به همین دلیل، شناسایی و کاهش Long Taskها یکی از اقدامات مهم برای بهبود INP است.
حجم زیاد DOM
صفحه‌ای با ساختار بسیار بزرگ و پیچیده ممکن است هنگام تعامل نیازمند عملیات Rendering بیشتری باشد. هرچه تغییرات صفحه پیچیده‌تر باشد، مرورگر ممکن است زمان بیشتری برای نمایش فریم بعدی نیاز داشته باشد.
گوگل در راهنمای بهینه‌سازی INP نیز کاهش پیچیدگی و اندازه DOM را یکی از روش‌های مهم برای کاهش Presentation Delay معرفی می‌کند.
اجرای بیش از حد کد هنگام تعامل
گاهی لازم نیست تمام عملیات یک رویداد بلافاصله بعد از کلیک کاربر اجرا شود. اگر صفحه ابتدا نتیجه قابل مشاهده تعامل را نمایش دهد و عملیات غیرضروری را به زمان دیگری موکول کند، پاسخ‌گویی می‌تواند بهتر شود.
برای نمونه، اگر کاربر روی دکمه‌ای برای باز کردن یک پنجره اطلاعات کلیک می‌کند، بهتر است خود پنجره سریع نمایش داده شود و پردازش‌های غیرضروری در پس‌زمینه انجام شوند.
چگونه INP سایت را اندازه‌گیری کنیم؟
برای بررسی INP باید تا حد امکان از داده‌های واقعی کاربران و همچنین تست‌های آزمایشگاهی استفاده کرد.
Google Search Console
در Google Search Console می‌توانید گزارش Core Web Vitals را بررسی کنید. این گزارش به شما کمک می‌کند گروهی از URLها را که از نظر تجربه کاربری مشکل دارند شناسایی کنید.
نکته مهم این است که گزارش Search Console بیشتر برای مشاهده وضعیت کلی صفحات و داده‌های واقعی کاربران کاربرد دارد؛ بنابراین برای پیدا کردن علت دقیق مشکل، بهتر است از ابزارهای تشخیصی دیگر نیز استفاده شود. گوگل نیز بررسی گزارش Core Web Vitals در Search Console را برای پایش وضعیت صفحات توصیه می‌کند.
PageSpeed Insights
یکی از ساده‌ترین ابزارها برای بررسی INP، PageSpeed Insights است. این ابزار می‌تواند داده‌های واقعی کاربران را در صورت وجود داده کافی نشان دهد و در کنار آن، اطلاعات آزمایشگاهی و پیشنهادهای بهینه‌سازی ارائه کند.
در تحلیل INP بهتر است فقط به عدد نهایی نگاه نکنید؛ باید مشخص شود کدام تعامل یا کدام بخش از اجرای صفحه باعث ایجاد تأخیر شده است.
Chrome DevTools
برای بررسی تخصصی‌تر، می‌توان از Performance در Chrome DevTools استفاده کرد. این ابزار امکان بررسی تعاملات، Long Taskها، اجرای JavaScript و فعالیت‌های Rendering را فراهم می‌کند و برای پیدا کردن علت اصلی یک INP ضعیف بسیار مفید است.
چگونه INP را بهبود دهیم؟
بهبود Interaction to Next Paint یک راهکار واحد ندارد؛ ابتدا باید مشخص کنید تأخیر در کدام بخش اتفاق می‌افتد.
۱. JavaScriptهای غیرضروری را کاهش دهید
کدهایی که واقعاً برای عملکرد صفحه ضروری نیستند، می‌توانند بار اضافی روی مرورگر ایجاد کنند. بررسی و حذف اسکریپت‌های غیرضروری، یکی از اقدامات مهم برای بهبود پاسخ‌گویی است.
در سایت‌های وردپرسی، افزونه‌ها و ابزارهای مختلف ممکن است JavaScriptهای زیادی به صفحات اضافه کنند. بنابراین اگر INP سایت ضعیف است، بررسی افزونه‌ها، اسکریپت‌های جانبی و ابزارهای متصل به سایت می‌تواند نقطه شروع خوبی باشد.
۲. Long Taskها را شناسایی کنید
اگر اجرای یک اسکریپت مدت زیادی Main Thread را درگیر کند، تعامل کاربر ممکن است منتظر بماند.
بنابراین به جای اینکه صرفاً فایل‌های JavaScript را فشرده کنیم، باید بررسی شود کدام کد واقعاً زمان زیادی برای اجرا مصرف می‌کند و آیا می‌توان آن را سبک‌تر یا به بخش‌های کوچک‌تر تقسیم کرد.
۳. کارهای غیرضروری را به بعد موکول کنید
همه پردازش‌ها لازم نیست قبل از نمایش اولین واکنش بصری انجام شوند.
برای مثال، فرض کنید کاربر در یک برنامه آشپزی روی دکمه «ذخیره دستور غذا» کلیک می‌کند. تغییر وضعیت دکمه و نمایش پیام «ذخیره شد» می‌تواند سریع انجام شود، در حالی که بعضی پردازش‌های غیرضروری بعد از آن اجرا شوند.
این رویکرد می‌تواند زمان لازم برای ارائه بازخورد بصری اولیه را کاهش دهد.
۴. اندازه و پیچیدگی DOM را کنترل کنید
اگر ساختار HTML صفحه بیش از حد بزرگ و پیچیده باشد، تغییرات ناشی از یک تعامل ممکن است عملیات Rendering بیشتری ایجاد کند.
کاهش عناصر غیرضروری، ساده‌تر کردن ساختارهای پیچیده و جلوگیری از ایجاد حجم زیادی از HTML با JavaScript می‌تواند به کاهش هزینه Rendering کمک کند.
۵. افزونه‌ها و اسکریپت‌های اضافی وردپرس را بررسی کنید
در سایت‌های وردپرسی، ممکن است یک افزونه حتی در صفحاتی که به آن نیاز ندارید، فایل‌های JavaScript یا CSS خود را بارگذاری کند.
بنابراین در زمان بررسی INP، فقط قالب سایت را مقصر ندانید. افزونه‌ها، ابزارهای چت، سیستم‌های آمارگیری، اسکریپت‌های تبلیغاتی و سایر کدهای شخص ثالث نیز می‌توانند روی عملکرد صفحه اثر بگذارند.
گوگل نیز در راهنمای بهینه‌سازی Core Web Vitals به بررسی و حذف افزونه‌ها و اسکریپت‌های غیرضروری به‌عنوان یکی از اقدامات مفید برای بهبود عملکرد اشاره می‌کند.
آیا INP روی سئو تأثیر دارد؟
بله، اما باید این موضوع را دقیق بیان کرد.
INP یکی از Core Web Vitals است و Core Web Vitals بخشی از مجموعه سیگنال‌های مرتبط با تجربه صفحه محسوب می‌شوند. گوگل توصیه می‌کند سایت‌ها برای ارائه تجربه کاربری مناسب، وضعیت Core Web Vitals را بهبود دهند.
اما نباید تصور کرد که مثلاً کاهش INP از ۳۰۰ به ۱۵۰ میلی‌ثانیه به‌تنهایی باعث جهش رتبه سایت در نتایج جستجو می‌شود.
هدف اصلی بهینه‌سازی INP، بهبود پاسخ‌گویی و تجربه واقعی کاربر است و این موضوع در کنار سایر عوامل مورد استفاده سیستم‌های رتبه‌بندی گوگل قرار می‌گیرد.
بنابراین رویکرد صحیح این است که INP را صرفاً برای گرفتن یک امتیاز سبز در PageSpeed Insights بهینه نکنیم؛ بلکه سایت را طوری بهینه کنیم که کاربران هنگام کلیک، لمس و کار با عناصر تعاملی، پاسخ سریع و قابل پیش‌بینی دریافت کنند.
INP در موبایل اهمیت بیشتری دارد؟
INP باید برای کاربران موبایل و دسکتاپ به‌صورت جداگانه بررسی شود، زیرا توان پردازشی دستگاه‌ها یکسان نیست و تجربه واقعی کاربران می‌تواند تفاوت زیادی داشته باشد.
یک JavaScript که روی یک کامپیوتر قدرتمند تقریباً بدون تأخیر اجرا می‌شود، ممکن است روی یک تلفن همراه ضعیف‌تر زمان بیشتری مصرف کند.
به همین دلیل گوگل برای ارزیابی Core Web Vitals در داده‌های واقعی، صدک ۷۵ را به تفکیک موبایل و دسکتاپ در نظر می‌گیرد.
اگر بخش قابل توجهی از کاربران سایت شما با موبایل وارد می‌شوند، بهینه‌سازی INP موبایل را جدی بگیرید و فقط به نتیجه تست دسکتاپ اکتفا نکنید.
آیا INP ضعیف همیشه به معنای کند بودن سرور است؟
خیر. این یکی از مهم‌ترین نکاتی است که هنگام عیب‌یابی INP باید به آن توجه کرد.
ممکن است سرور سایت بسیار سریع پاسخ دهد، اما مرورگر کاربر به دلیل اجرای JavaScript سنگین یا Rendering پیچیده نتواند به‌سرعت به کلیک واکنش نشان دهد.
از طرف دیگر، مشکلات مربوط به شبکه یا دریافت داده نیز می‌توانند در تجربه کلی تعامل نقش داشته باشند، اما INP مستقیماً همه زمان‌های مربوط به عملیات شبکه و تمام اثرات نهایی یک تعامل را اندازه‌گیری نمی‌کند؛ تمرکز آن روی زمانی است که تا ارائه فریم بعدی و بازخورد بصری تعامل طول می‌کشد.
بنابراین برای حل INP ضعیف، نباید بدون بررسی فنی سراغ ارتقای هاست یا افزایش منابع سرور رفت.
چک‌لیست عملی برای بهبود INP
اگر گزارش Core Web Vitals نشان می‌دهد INP سایت شما ضعیف است، این مسیر می‌تواند برای شروع مناسب باشد:
- صفحات دارای INP ضعیف را در Search Console شناسایی کنید.
- همان صفحات را در PageSpeed Insights بررسی کنید.
- مشخص کنید مشکل بیشتر در موبایل است یا دسکتاپ.
- تعامل کند را در Chrome DevTools بازتولید کنید.
- Long Taskها و اجرای JavaScript را بررسی کنید.
- افزونه‌ها و اسکریپت‌های غیرضروری را شناسایی کنید.
- عملیات سنگین Event Handlerها را کاهش دهید.
- Rendering و اندازه DOM را بررسی کنید.
- بعد از اعمال تغییرات، دوباره تست بگیرید.
- در نهایت داده‌های واقعی کاربران را برای ارزیابی نتیجه زیر نظر داشته باشید.
نکته مهم این است که ابتدا علت را پیدا کنید و سپس راهکار را انتخاب کنید. صرفاً نصب یک افزونه کش یا فعال کردن چند گزینه بهینه‌سازی، تضمینی برای حل INP نیست.
جمع‌بندی
Interaction to Next Paint یا INP معیاری برای سنجش پاسخ‌گویی صفحات وب در برابر تعاملات کاربر است و اکنون یکی از Core Web Vitals محسوب می‌شود. INP برخلاف FID فقط به اولین تعامل توجه نمی‌کند، بلکه پاسخ‌گویی تعاملات واجد شرایط در طول حضور کاربر در صفحه را بررسی می‌کند.
مقدار ۲۰۰ میلی‌ثانیه یا کمتر وضعیت خوبی دارد، بازه بیشتر از ۲۰۰ تا ۵۰۰ میلی‌ثانیه نیازمند بهبود است و مقدار بالاتر از ۵۰۰ میلی‌ثانیه ضعیف محسوب می‌شود.
اگر INP سایت بالا باشد، باید عواملی مانند JavaScriptهای سنگین، Long Taskها، افزونه‌ها و اسکریپت‌های غیرضروری، DOM بزرگ و عملیات Rendering پیچیده بررسی شوند.
در نهایت، هدف از بهینه‌سازی INP فقط رسیدن به یک عدد سبز در ابزارهای تست نیست؛ هدف اصلی این است که کاربر هنگام کلیک، لمس یا استفاده از امکانات سایت، واکنش سریع و قابل پیش‌بینی دریافت کند. همین رویکرد باعث می‌شود بهینه‌سازی Core Web Vitals از یک کار صرفاً فنی به بخشی واقعی از بهبود تجربه کاربری و کیفیت سایت تبدیل شود.
