INP چیست؟

اگر می‌خواهید رتبه‌بندی سایت خود را در موتورهای جستجو بهبود ببخشید، درک اینکه INP چیست و چگونه باید سایت را برای آن بهینه‌کنید، بسیار مهم است. در غیر این صورت، صفحات شما ممکن است در نتایج جستجو رتبه پایین تری داشته باشند.

این مقاله با جزئیات بیشتری به INP می پردازد، از جمله تفاوت آن با سایر معیارهای Core Web Vitals و نحوه اندازه گیری آن برای بهبود امتیاز فعلی. توصیه می کنم اگر بهبود امتیاز Core Web Vitals یکی از چالش های شما است، این مقاله را تا پایان بخوانید. 

پیشنهاد ویژه: استعلام قیمت سئو ماهانه

INP چیست؟

Interaction to Next Paint (INP) یک معیار اصلی Web Vitals است که زمان پاسخگویی صفحه سایت را اندازه گیری می کند. تعیین می‌کند که یک صفحه سایت با چه سرعتی پس از تعامل کاربر با آن، مانند کلیک کردن بر روی یک لینک یا فشار دادن یک دکمه، به آن درخواست پاسخ می دهد.

(INP) چگونه کار می کند؟

به عنوان یک معیار پاسخگویی، INP بر تأخیر تعامل کاربر تمرکز دارد. این نشان می دهد که یک عنصر از صفحه سایت با چه سرعتی پس از انجام یک عمل خاص روی آن پاسخ می دهد.

در اینجا نحوه عملکرد INP آمده است:

• کاربر با یک صفحه وب تعامل دارد، مانند کلیک کردن بر روی یک دکمه.
• مرورگر درخواستی را برای محتوای جدید به سرور ارسال می کند.
• وب سرور محتوای جدید را به مرورگر ارسال می کند.
• مرورگر محتوای جدید را در صفحه نمایش می دهد.
• مرورگر زمان لازم برای ارائه محتوای جدید را اندازه گیری می کند و آن را به عنوان امتیاز INP گزارش می دهد.

مقدار INP پایین به این معنی است که صفحه نسبت به تعامل کاربر بسیار پاسخگو است.

دلیل اهمیت INP

INP به عنوان بخشی از Core Web Vitals، به دلایل زیر مهم است:

• بهبود تجربه کاربری: مقدار بالای INP به این معنی است که کاربران باید مدت زیادی منتظر باشند تا صفحه وب به تعاملات آنها واکنش نشان دهد، که می تواند برای کاربر خسته کننده باشد.
• بهینه سازی موتور جستجو (SEO): INP و دیگر Core Web Vitals بخشی از سیگنال های تجربه کاربری سایت هستند که از عوامل موثر در رتبه سایت در نتایج گوگل است.
• نرخ پرش پایین تر: زمان بالای بارگذاری، می تواند باعث شود کاربران صفحه را رها کنند و از سایت شما خارج شوند که این برای سئوی سایت شما مناسب نیست.

تفاوت INP و FID

INP در مارس 2024 جایگزین متریک تاخیر ورودی (FID) شد. INP و FID مشابه هستند، اما متفاوت عمل می‌کنند.

FID مدت زمان بین اولین تعامل کاربر و پاسخ سرور و سایت را اندازه گیری می کند. یعنی اگر بعد از لود صفحه، کاربر روی یک دکمه کلیک کند و بلافاصله دکمه عمل کند و بعد از چند لحظه بخواهد بر روی دکمه ای دیگر کلیک کند و این دکمه با تاحیر عمل کند، FID تاخیر را گزارش نمی دهد. چرا؟ چون فقط به اولین تعامل کاربر توجه می کند که در این مثال بدون تاخیر انجام شد. در مقابل INP برای تمام تاخیرهای تعامل کاربر در کل یک بازدید پس از بارگیری صفحه، محاسبه می‌شود.

طبق داده های گوگل، بیشتر زمانی که کاربر در یک وب سایت صرف می کند، پس از بارگذاری آن است. به این ترتیب، INP می تواند تعامل صفحه را بسیار موثرتر از FID اندازه گیری کند.

INP همچنین با دیگر فاکتورهای Core Web Vitals مانند تغییر چیدمان تجمعی (CLS) و Large Contentful Paint (LCP) متفاوت است. CLS میزان تغییرات غیرمنتظره سایت را ارزیابی می کند، در حالی که LCP تعیین می کند که صفحه وب با چه سرعتی بزرگترین عناصر خود را نمایش می دهد.

پیشنهاد مطالعه: سئوی سایت فروشگاهی

نحوه اندازه گیری (INP)

قبل از شروع اندازه‌گیری Interaction to Next Paint، بیایید ببینیم مقادیر INP به چه معناست.

INP بر حسب میلی ثانیه (ms) اندازه گیری می شود. یک معیار خوب زیر 200 میلی‌ثانیه است و هر چیزی بین آن تا 500 میلی‌ثانیه به‌عنوان اینکه آن صفحه نیاز به بهبود دارد، شناخته می‌شود. 500 میلی‌ثانیه یا بالاتر، به عنوان ضعیف در نظر گرفته می‌شود.

عوامل مختلفی مانند اندازه و پیچیدگی یک صفحه وب و همچنین تعداد فایل های جاوا اسکریپت و CSS بارگذاری شده می توانند بر مقدار INP تأثیر بگذارند.

شما می توانید مقدار INP یک سایت را با استفاده از ابزارهای تست سرعت سایت اندازه گیری کنید. این نوع ابزارها می‌توانند یک نقشه مسیر، درباره نحوه عملکرد معیارهای Core Web Vitals سایت شما و نحوه بهینه‌سازی آن‌ها ارائه دهند.

Google PageSpeed Insights یک گزینه محبوب برای اندازه گیری INP و عملکرد سایت است. این سایت یک سایت را ممیزی می کند و جزئیاتی را در مورد بهترین شیوه های پیاده سازی ارائه می دهد. همچنین می توانید سرعت سایت خود را هنگام بارگذاری روی دستگاه های موبایل و دسکتاپ مشاهده کنید.

PageSpeed Insights دو نوع نتیجه را نمایش می دهد. بخش بالایی معیارهای Core Web Vitals یک سایت را از گزارش Chrome UX نشان می‌دهد، مجموعه‌ای از داده‌های عملکرد دنیای واقعی از کاربران Chrome.
اگر داده‌های INP سایت در دسترس نیست، زمان انسداد کل آن (TBT) را بررسی کنید. این متریک نوع متفاوتی از پاسخگویی را اندازه گیری می کند. یعنی زمانی که اولین المان صفحه لود می شود تا زمانی که صفحه قابل تعامل می شود.

نحوه بهینه سازی inp

بیایید روش های انجام بهینه سازی INP در سایت را بررسی کنیم: 

نکته: اکثر این روش ها به دانش فنی جاوا اسکریپت نیاز دارند. قبل از ایجاد تغییرات در وب سایت خود، مطمئن شوید که در صورت بروز خطا از آن نسخه پشتیبان تهیه کنید.

اجرای جاوا اسکریپت را بهینه کنید

جاوا اسکریپت جزء اصلی بسیاری از صفحات سایت است. عناصر تعاملی مختلفی را اضافه می کند اما همچنین می تواند عملکرد سایت را کاهش دهد.

هنگامی که اجرا می شود، جاوا اسکریپت روی رشته اصلی اجرا می شود. رشته ای که مسئول ارائه یک صفحه سایت است. اگر کد ناکارآمد باشد، می تواند موضوع را مسدود کند و از پاسخ دادن صفحه به تعامل کاربر جلوگیری کند.

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

• کوچک کردن فایل های جاوا اسکریپت، اندازه جاوا اسکریپت را کاهش می دهد و باعث می شود آنها سریعتر بارگذاری شوند.
• فعال کردن فشرده سازی GZip یکی دیگر از روش های محبوب برای کوچکتر کردن فایل ها و داده های سایت.
• استفاده از چارچوب جاوا اسکریپت ابزارهایی مانند AngularJS و jQuery می تواند به سازماندهی کد جاوا اسکریپت شما کمک کند تا کارآمدتر شود.
• استفاده از CDN، فایل های جاوا اسکریپت شما را از سرورهای نزدیک به مخاطبان هدف شما تحویل می دهد و زمان بارگذاری را بهبود می بخشد. 

پیشنهاد مطالعه: چک لیست سئوی تکنیکال

از Web Workers استفاده کنید

Web Workers سرویسی است که به جاوا اسکریپت اجازه می‌دهد به‌طور مستقل از رشته اصلی اجرا شود. آنها برای اجرای عملیات پیچیده در پس زمینه مفید هستند.

فرض کنید یک وب سایت وردپرسی پر از تصاویر، فیلم ها و داده ها دارید. Web Workers می توانند این محاسبات سنگین جاوا اسکریپت را در یک رشته پس زمینه بارگذاری کنند تا از تاخیر در سرعت بارگزاری و تعامل صفحه جلوگیری کنند.

برای استفاده از Web Workers، باید دو فایل جاوا اسکریپت ایجاد کنید. یکی از آنها main.js برای شروع وظایف اسکریپت Web Workers است:

// main.js
if (window.Worker) {
 // Create a new worker instance
 const myWorker = new Worker('worker-script.js');
 // Send a message to the worker
 myWorker.postMessage('Hello Worker!');
 // Listen for messages from the worker
 myWorker.onmessage = function(e) {
 console.log('Message received from worker', e.data);
 };
} else {
 console.log('Your browser does not support Web Workers.');
}

دیگری worker.js است که شامل وظایف Web Workers است. در اینجا یک مثال ساده آورده شده است:

// worker.js
onmessage = function(e) {
 console.log('Message received from main script', e.data);
 // Perform heavy computation or data processing here
 // Then send a message back to the main script
 postMessage('Hello Main Script!');
}

برای کاربران وردپرس، از تابع wp_enqueue_script برای گنجاندن اسکریپت های Web Workers در فایل functions.php قالب خود استفاده کنید.

پیشنهاد مطالعه: لیست بک لینک رایگان

شکستن وظایف طولانی

شکستن وظایف طولانی جاوا اسکریپت راه دیگری برای جلوگیری از مسدود شدن رشته اصلی است. بدون شکستن وظایف طولانی، رشته اصلی نیاز به واکشی، پردازش و ارائه مقادیر زیادی از داده ها و تصاویر محصول به طور همزمان دارد، که زمان و منابع زیادی را مصرف می کند.

در حالی که این فرآیند در حال انجام است، موضوع اصلی اشغال شده است. این باعث می شود وب سایت به کندی بارگذاری شود و نتواند به تعامل بعدی کاربر پاسخ دهد.

شکستن کارهای طولانی به مرورگر اجازه می دهد تا تکه های کوچکتر را در یک زمان مدیریت کند. در نتیجه، رشته اصلی برای انجام کارهای ضروری تر آزاد است.

شما می توانید از دو نوع کد برای جداسازی وظایف طولانی استفاده کنید:

• setTimeout. یک تابع جاوا اسکریپت داخلی که یک کار مشخص را برای اجرا پس از تاخیر معین در میلی ثانیه زمان بندی می کند. می تواند اجرا را به زمان دیگری موکول کند و از مسدود شدن رشته اصلی برای مدت طولانی جلوگیری کند.
• requestIdleCallback. این API رویکرد کارآمدتری را ارائه می‌کند زیرا تضمین می‌کند که توابع در طول دوره‌های بیکاری اجرا می‌شوند. همچنین یک پارامتر ضرب الاجل ارائه می دهد که به شما امکان می دهد بدون تأثیر بر فرآیندهای مهم، مدت زمان انجام کار را کنترل کنید.

آمادگی ورودی را اولویت بندی کنید

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

در ادامه نحوه اولویت بندی آمادگی ورودی برای بهبود INP آمده است:

به تعویق انداختن جاوا اسکریپت غیر ضروری: برخی از جاوا اسکریپت ها برای بارگذاری اولیه صفحه ضروری نیست و می تواند بعد از محتوای اصلی اجرا شوند. این به موضوع اصلی اجازه می دهد تا تعاملات کاربر را اولویت بندی کند و پاسخگویی کلی صفحه را بهبود بخشد.

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

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

Passive event listeners: سازه های برنامه نویسی هستند که رویدادهای خاصی را تشخیص می دهند. غیرفعال کردن آنها به مرورگر می‌گوید که منتظر نماند تا اجرای عملکرد خاصی به پایان برسد و در این مدت به کارهای دیگر ادامه دهد.

پیشنهاد ویژه: تهیه دوره سئوی جامع مبتدی تا پیشرفته

ارائه بازخورد فوری

برخی از تعاملات می تواند منجر به تأخیر قابل توجه در پاسخ شود، مانند ارسال فرمی با ورودی داده های متعدد.

اینجاست که بازخورد فوری وارد می‌شود. این تاکتیک به کاربران نشانه‌ای بصری می‌دهد که وب‌سایت دریافت کرده و درخواست آنها را پردازش می‌کند.

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

چند نمونه از نشانه های بازخورد فوری 

در حال بارگذاری نشانگرها، هنگامی که فرآیندی در حال انجام است، به ویژه هنگام نمایش داده ها یا انتقال به صفحه جدید، اسپینر یا نوار پیشرفت را نشان دهید.

پاپ آپ های قدردانی برای اقداماتی مانند افزودن یک مورد به سبد خرید، خوب است پیامی نمایش داده شود که تأیید کند عملکرد موفقیت آمیز بوده است.

اعتبار سنجی فیلد فرم برای مثال، اگر کاربری یک آدرس ایمیل با فرمت نادرست وارد کرده است، به جای اینکه منتظر بمانید تا فرم را ارسال کند، فوراً یک پیام خطا نشان دهید.

معنای (INP) برای صاحبان سایت چیست؟

INP و رتبه سایت شما در نتایج گوگل، ارتباط نزدیکی دارند. عدم موفقیت در بهینه سازی آن می تواند منجر به کاهش سرعت وب سایت، تجربه کاربری و به نوبه خود کاهش ورودی ارگانیک سایت شود.

در واقع، Economic Times ثابت کرده است که بهبود INP مزایای قابل توجهی دارد. آنها نرخ پرش خود را تا 50 درصد کاهش داده اند، به این معنی که بازدیدکنندگان احتمالاً می توانند بمانند و محتوای آنها را کشف کنند.

برای بهینه‌سازی INP، شناسایی عواملی که سرعت پاسخ‌گویی وب‌سایت شما را کند می‌کند، کلیدی است. تست های تولید را انجام دهید، بررسی کنید که وب سایت شما چگونه ورودی های کاربر را مدیریت می کند و در صورت نیاز با یک توسعه دهنده وب مشورت کنید.
نتیجه
مخفف Interaction to Next Paint، INP یک معیار Core Web Vitals است که جایگزین FID شده است. زمان پاسخگویی یک وب سایت به تعامل کاربر را اندازه گیری می کند. هر چه امتیاز کمتر باشد، سرعت پاسخگویی سایت شما بیشتر می شود.

تفاوت بین INP و FID این است که اولی تمام تاخیرهای تعامل کاربر را در کل حضور کاربر در سایت را اندازه گیری می کند. معیار دوم تنها تاخیر اولین تعامل!!! کاربر بعد از لود صفحه را اندازه گیری می کند و تعامل های بعدی را اصلا زیر نظر نمی گیرد.

از PageSpeed Insights برای اندازه گیری INP وب سایت خود استفاده کنید. اگر داده ها در دسترس نیستند، می توانید به متریک TBT سایت خود نیز مراجعه کنید.

بهینه سازی برای INP شامل چندین روش است. از کارآمدتر کردن اجرای جاوا اسکریپت و استفاده از Web Workers گرفته تا اولویت بندی آمادگی ورودی. صرف نظر از فرآیند، از وب سایت خود نسخه پشتیبان تهیه کنید تا هنگام ایجاد تغییرات، خطاها را پیش بینی کنید.