سبد خرید

هیچ محصولی در سبد خرید وجود ندارد.

خانه نمونه کارها دموها

INP چیست؟ راهنمای بهبود Interaction to Next Paint در سایت

کاربر روی دکمه «افزودن به سبد» می‌زند و … هیچ اتفاقی نمی‌افتد. نیم ثانیه بعد دوباره می‌زند. اگر سایت شما این حس را به بازدیدکننده بدهد، مشکل معمولاً از سرعت دانلود صفحه نیست؛ از سرعت واکنش صفحه است. معیار INP دقیقاً برای اندازه‌گیری همین تجربه ساخته شده است. در این مقاله توضیح می‌دهیم INP چیست، چه عددی خوب حساب می‌شود، چطور آن را اندازه بگیرید و برای سایت وردپرسی یا فروشگاهی چه کارهایی باید انجام دهید.

INP چیست؟

INP مخفف Interaction to Next Paint است؛ یعنی فاصله‌ی زمانی بین یک تعامل کاربر (کلیک، تپ روی موبایل یا فشردن یک کلید) تا لحظه‌ای که مرورگر نتیجه‌ی آن را روی صفحه نشان می‌دهد. INP یکی از سه معیار اصلی Core Web Vitals گوگل است و از مارس ۲۰۲۴ جای معیار قدیمی FID (تاخیر در اولین تعامل) را گرفته است.

تفاوت مهم این است که FID فقط اولین تعامل را می‌سنجید و آن هم فقط تا شروع پردازش، اما INP تعامل‌های کل بازدید را بررسی می‌کند و گزارش می‌دهد که صفحه در بدترین حالت (با کمی تعدیل برای صفحه‌های پرتعامل) چقدر کند پاسخ داده است. به همین دلیل سایت‌هایی که قبلاً در FID نمره‌ی خوبی داشتند، ممکن است در INP ضعیف باشند.

عدد خوب برای INP چقدر است؟

طبق مستندات web.dev، آستانه‌ها بر اساس صدک ۷۵ بازدیدهای واقعی کاربران تعیین می‌شود، یعنی دست‌کم ۷۵ درصد بازدیدها باید در بازه‌ی مطلوب باشند:

وضعیتمقدار INP
خوب۲۰۰ میلی‌ثانیه یا کمتر
نیازمند بهبودبین ۲۰۰ تا ۵۰۰ میلی‌ثانیه
ضعیفبیش از ۵۰۰ میلی‌ثانیه

دو معیار دیگر Core Web Vitals هم این‌ها هستند: LCP (سرعت نمایش بزرگ‌ترین محتوای صفحه) با آستانه‌ی ۲٫۵ ثانیه و CLS (پایداری چیدمان) با آستانه‌ی ۰٫۱. اگر درباره‌ی سرعت بارگذاری هم نگرانی دارید، راهنمای بهینه‌سازی سرعت سایت را هم ببینید.

INP چه ربطی به سئو و فروش دارد؟

Core Web Vitals بخشی از سیگنال‌های «تجربه‌ی صفحه» در گوگل است. باید واقع‌بین باشیم: گوگل خودش می‌گوید مرتبط‌بودن محتوا همچنان مهم‌تر است و نمره‌ی خوب در این معیارها به‌تنهایی رتبه‌ی اول نمی‌آورد. اما در رقابت دو صفحه‌ی هم‌سطح، تجربه‌ی بهتر می‌تواند تفاوت بسازد. مهم‌تر از رتبه، اثر مستقیم روی رفتار کاربر است:

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

برای دیدن تصویر کامل‌تر از اثر تجربه‌ی کاربر بر رتبه‌بندی، مقاله‌ی بهینه‌سازی سایت برای موتورهای جستجو در ۱۴۰۵ را مطالعه کنید.

چرا INP سایت‌های وردپرسی بد می‌شود؟

در بیشتر سایت‌هایی که با آن‌ها کار می‌کنیم، علت اصلی کندی INP «کار زیاد روی رشته‌ی اصلی (Main Thread) مرورگر» است. وقتی مرورگر مشغول اجرای یک جاوااسکریپت سنگین است، نمی‌تواند به کلیک شما جواب بدهد. دلایل رایج:

  • اسکریپت‌های شخص ثالث: چت آنلاین، پیکسل‌های تبلیغاتی، ابزارهای تحلیلی و ویجت‌های نظرسنجی.
  • افزونه‌ها و پیج‌بیلدرهای سنگین: هر افزونه‌ای که جاوااسکریپت اضافه بارگذاری می‌کند، سهمی از زمان پردازش را می‌گیرد.
  • DOM بزرگ: صفحه‌هایی با هزاران عنصر، هر تغییر کوچک را پرهزینه می‌کنند.
  • اسلایدرها و انیمیشن‌های پیچیده: به‌ویژه روی موبایل‌های ضعیف‌تر.
  • هاست ضعیف: اگرچه INP بیشتر مسئله‌ی سمت مرورگر است، هاست کند ریشه‌ی بسیاری از مشکلات دیگر سرعت است؛ برای انتخاب درست به راهنمای انتخاب هاست مناسب نگاه کنید.

INP را چطور اندازه بگیریم؟

دو نوع داده وجود دارد و باید هر دو را بشناسید:

  • داده‌ی میدانی (Field): از کاربران واقعی جمع می‌شود. گزارش Core Web Vitals در Google Search Console و بخش «تجربه‌ی کاربران واقعی» در PageSpeed Insights (برگرفته از CrUX) این داده را نشان می‌دهند. برای تصمیم‌گیری، همین داده معتبر است.
  • داده‌ی آزمایشگاهی (Lab): در محیط کنترل‌شده با ابزارهایی مثل پنل Performance در Chrome DevTools یا کتابخانه‌ی web-vitals به‌دست می‌آید و برای پیدا کردن علت دقیق مشکل مناسب است.

روش پیشنهادی ما: اول در Search Console صفحه‌های مشکل‌دار را پیدا کنید، بعد همان صفحه را در DevTools با تعامل واقعی (کلیک روی منو، فیلتر، دکمه‌ی خرید) ضبط کنید و ببینید کدام تسک طولانی مانع پاسخ شده است. اگر از گزارش‌های سرچ کنسول برای تحلیل استفاده می‌کنید، این راهنما درباره‌ی خواندن گزارش‌ها هم کمک می‌کند.

۸ راهکار عملی برای بهبود INP

  1. اسکریپت‌های غیرضروری را حذف کنید. هر پیکسل، ویجت یا افزونه‌ای که ارزش مشخصی ندارد، اول از همه باید برود. این ساده‌ترین و مؤثرترین کار است.
  2. اسکریپت‌های شخص ثالث را دیرتر بارگذاری کنید. چت و ابزارهای تحلیلی لازم نیست همان ثانیه‌ی اول اجرا شوند. بارگذاری با تاخیر (Delay JS) یا بعد از اولین تعامل کاربر را در نظر بگیرید.
  3. تسک‌های طولانی را بشکنید. هر تسک جاوااسکریپتی بیش از ۵۰ میلی‌ثانیه، «تسک طولانی» حساب می‌شود. کار را به تکه‌های کوچک تقسیم کنید و بین آن‌ها اجازه بدهید مرورگر به کاربر جواب دهد.
  4. اول بازخورد بصری، بعد کار سنگین. وقتی کاربر روی دکمه می‌زند، ابتدا حالت «در حال ارسال» یا تغییر ظاهر دکمه را نشان دهید و کار سنگین‌تر را بعد انجام دهید. INP تا اولین تغییر بصری را می‌سنجد.
  5. اندازه‌ی DOM را کم کنید. بخش‌های تو در توی غیرضروری، المان‌های مخفی و ساختارهای پیچیده‌ی پیج‌بیلدر را ساده کنید.
  6. رویدادهای پرتکرار را کنترل کنید. برای جستجوی زنده و اسکرول از debounce یا throttle استفاده کنید تا با هر کلید هزاران محاسبه اجرا نشود.
  7. افزونه‌ها را بازبینی کنید. افزونه‌های مشابه را ادغام کنید و موردهای سنگین را با نمونه‌ی سبک‌تر جایگزین کنید. فهرست افزونه‌های بهینه‌سازی سرعت وردپرس نقطه‌ی شروع خوبی است.
  8. روی موبایل تست کنید. بیشتر مشکلات INP روی گوشی‌های متوسط دیده می‌شود، نه لپ‌تاپ توسعه‌دهنده. تنظیم CPU Throttling در DevTools این شرایط را شبیه‌سازی می‌کند.

طراحی واکنش‌گرای اصولی هم اینجا نقش دارد: منوی موبایل و فرم‌ها باید سبک و سریع باشند. نکته‌هایش را در راهنمای طراحی سایت واکنش‌گرا مرور کرده‌ایم.

چک‌لیست سریع قبل از شروع

  • گزارش Core Web Vitals در Search Console را برای موبایل بررسی کردم.
  • صفحه‌های پرفروش و صفحه‌ی اصلی را با PageSpeed Insights تست کردم.
  • فهرست اسکریپت‌های شخص ثالث را تهیه و موارد بی‌مصرف را حذف کردم.
  • تعامل‌های کلیدی (منو، جستجو، افزودن به سبد، ارسال فرم) را در DevTools ضبط کردم.
  • بعد از هر تغییر، حداقل چند هفته منتظر به‌روز شدن داده‌ی میدانی ماندم.

نکته‌ی آخر مهم است: داده‌ی میدانی CrUX میانگین یک بازه‌ی زمانی حدود ۲۸ روزه است، پس نتیجه‌ی اصلاحات بلافاصله در گزارش دیده نمی‌شود.

سوالات متداول درباره INP

INP با FID چه فرقی دارد؟

FID فقط تاخیر اولین تعامل را می‌سنجید، ولی INP همه‌ی تعامل‌های بازدید را در نظر می‌گیرد و زمان تا نمایش نتیجه را اندازه می‌گیرد، نه فقط شروع پردازش. از مارس ۲۰۲۴ INP رسماً جایگزین FID شد.

INP خوب برای سایت فروشگاهی چقدر است؟

آستانه برای همه‌ی سایت‌ها یکسان است: ۲۰۰ میلی‌ثانیه یا کمتر در صدک ۷۵ بازدیدها. برای فروشگاه‌ها چون تعامل زیاد است، رسیدن به این عدد اهمیت بیشتری دارد.

آیا INP بد باعث افت رتبه می‌شود؟

Core Web Vitals یکی از سیگنال‌های تجربه‌ی صفحه است، نه تنها عامل رتبه‌بندی. INP ضعیف لزوماً سقوط رتبه نمی‌آورد، ولی می‌تواند هم رتبه و هم نرخ تبدیل را تحت تاثیر بگذارد.

بعد از بهبود، چقدر باید برای دیدن نتیجه صبر کنم؟

چون گزارش‌های میدانی بر پایه‌ی داده‌ی حدود ۲۸ روز گذشته هستند، معمولاً چند هفته طول می‌کشد تا بهبود در Search Console دیده شود.

جمع‌بندی

INP نشان می‌دهد سایت شما در لحظه‌ی کلیک چقدر «زنده» است. هدف روشن است: زیر ۲۰۰ میلی‌ثانیه در صدک ۷۵ بازدیدهای واقعی. مسیر رسیدن هم مشخص است: اندازه‌گیری میدانی، پیدا کردن تسک‌های طولانی، حذف یا تاخیر اسکریپت‌های اضافی و تست روی موبایل. اگر سایت وردپرسی یا فروشگاهی دارید و نمی‌دانید از کجا شروع کنید، تیم کیاهاست می‌تواند وضعیت Core Web Vitals سایت شما را بررسی کند و نقشه‌ی بهینه‌سازی دقیق ارائه دهد.

شهریار
شهریار

شهریار هستم ، من از سال 85 مشغول دنیای اینترنت و طراحی هستم ، خلاصه اینکه به این رشته علاقه دارم و میخوام ادامه بدم ، دوس داشتین پیج اینستاگرام منم فالو کنید رفقا @ronin.power
ارادت

مقالات: 70

دیدگاهتان را بنویسید