INP چیست و چه تاثیری بر تجربۀ کاربری دارد؟

INP یا Interaction to Next Paint چیست؟

الگوریتم Core Web Vital، یکی از الگوریتم های گوگل در سئو است که توسط گوگل معرفی شد و روی سئو سایت تمرکز دارد. این الگوریتم از چند فاکتور تشکیل شده که همه آن‌ها مسئول اندازه‌گیری میزان رضایت کاربر از سایت است. ولی هر فاکتور، مسئول محاسبه یک بخش از این ماموریت است.

محرک اصلی تعامل اغلب کدهای جاوا اسکریپت است. یعنی بخشی از سایت که باید با دستورات جاوا اسکریپت درخواست کاربر را پردازش کند و تحویل دهد. گوگل تعامل کاربر را ورودی‌ یا ‘Input’ می‌گوید که شامل لیست زیر می‌شود:

• کلیک کردن با ماوس
• ضربه زدن روی صفحه نمایش دستگاه‌های مجهز به صفحه لمسی
• فشار دادن یک کلید روی کیبورد فیزیکی یا کیبورد مجازی (همان Onscreen Keyboard سیستم‎‌عامل)

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

برخلاف پدربزرگ این فاکتور، یعنی FID یا ‘First Input Delay’، که فقط اولین ورودی را حساب می‌کرد، INP تمام تعاملات کاربر را ارائه می‌دهد. مجموع تعاملات همان کارهایی است که کاربر حین بارگذاری و نمایش صفحه انجام می‌دهد و میزان سرعت هاست ما در ارائه محتوای درخواست‌شده.

برای کاهش زمان تاخیر و بهبود INP سایت خود، انتخاب هاست مناسب ضروری است. هاست با سرعت بالا و پشتیبانی از فناوری‌های جدید می‌تواند تأثیر زیادی بر عملکرد سایت بگذارد. برای دستیابی به بهترین نتایج، خرید هاست با ویژگی‌های پیشرفته را در نظر بگیرید.”

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

INP فقط یک چیز از ما می‌خواهد: اگر قرار است کاربر منتظر بماند تا محتوای صفحه نمایش داده شود، با المان‌‌های تصویر به او بگویید که محتوا در حال بارگذاری است. انیمیشن زیر را ببینید:

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

حالا که این خلاصه را خواندیم، می‌توانیم پاسخ «INP چگونه کار می‌کند»، را بهتر درک کنیم:

1. کاربر با یک صفحه وب تعامل دارد، مثلا روی یک دکمه کلیک می‌کند یا روی صفحه می‌زند (همان Tap کردن در گوشی‌های هوشمند)؛
2. مرورگر درخواست تحویل محتوای صفحه را به هاست می‌فرستد؛
3. هاست محتوای جدید را به مرورگر ارسال می‌کند؛
4. مرورگر کاربر محتوای درخواست‌شده را روی صفحه نمایش می‌دهد.
5. مرورگر کاربر میزان زمانی که طول کشید تا هاست پاسخ بدهد را اندازه‌گیری می‌کند و آن را به‌عنوان امتیاز INP به گوگل گزارش می‌دهد.

هرچقدر عدد INP پایین‌تر باشد بهتر است؛ چون این معنی را برای گوگل دارد که زمان خیلی کمی طول کشید تا هاست جواب کاربر را بدهد؛ پس سایت به‌‌خوبی بهینه (سئو) شده است.

چرا INP مهم است؟

این بخش را به‌شکل دقیق به سوال «تاثیر INP بر سئو سایت چیست؟» اختصاص دادیم؛ یعنی اهمیت فاکتور INP روی سئو مطرح است که ما با سه دلیل، به شما می‌گوییم که ارتباط این دو چیست.

بهبود INP به این معنی است که وب‌سایت شما سریع‌تر بارگذاری می‌شود و واکنش نشان می‌دهد. در نتیجه کاربر راضی است و میزان User Experience بالا می‌رود.

همان‌طور که گفتیم، INP تاثیر مستقیمی روی سئو سایت می‌گذارد؛ اما سوال این‌جاست که این تاثیر چه اهمیتی دارد؟

۱. کاهش نرخ پرش کاربر

وقتی سایت شما با سرعت بالا پاسخ درخواست کاربران را می‌دهد، احتمال ترک سایت کمتر می‌شود. ترک سایت در سئو با فاکتور Bounce Rate نشان داده می‌شود. هرچه INP کمتر باشد، Bounce Rate هم پایین می‌آید و رتبه سایت شما در نتایج گوگل بالاتر می‌رود.

۲. عملکرد بهتر سایت در رتبه‌بندی نتایج جست‌وجو

INP به‌عنوان بخشی از Core Web Vitals Google بر نحوه ارزیابی رتبه‌بندی سایت شما توسط Google تاثیر مستقیم می‌گذارد. سایت‌هایی که INP پایین‌تری دارند، در رتبه‌بندی جست‌وجو بالاتر قرار می‌گیرند؛ دلیلش هم این است که تجربه کاربری روان‌تری را ارائه می‌دهند.

۳. افزایش نرخ تبدیل

هدف همه ما از فعالیت در فضای آنلاین، تبدیل مخاطبان به مشتری است. این معیار را نرخ تبدیل یا Conversion Rate می‌نامیم. وقتی INP یک سایت عدد بالایی باشد، یعنی تبدیل مخاطب به مشتری یا اصلا اتفاق نمی‌افتد، یا خیلی کم اتفاق می‌افتد. دلیل آن هم خیلی واضح است؛ وقتی سایت شما سرعت پایینی دارد و نمی‌تواند تصاویر محصولات و جزئیات آن را به‌خوبی بارگذاری کند، مخاطب هم در خرید دودل می‌شود یا هنگام ثبت‌نام و خرید خدمات، نسبت‌به کیفیت خدمات شما شک به دل‌شان راه پیدا می‌کند.

“برای افزایش عملکرد سایت و بهبود INP، باید به سرعت بارگذاری و کیفیت محتوای سایت توجه ویژه‌ای داشته باشید. با استفاده از chatgpt برای سئومی‌توانید محتوای خود را به‌سرعت و با کیفیت بالا تولید کرده و به این ترتیب سرعت بارگذاری سایت و تجربه کاربری را بهینه کنید.

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

به گفته گوگل

 عدد خوب برای INP ،۲۰۰ میلی ثانیه یا کمتر از این مقدار است. یعنی وقتی امتیاز INP سایت‌تان را بررسی می‌کنید، باید این عدد یا کمتر از آن را ببینید.

اگر عدد INP بین ۲۰۰ تا ۵۰۰ میلی ثانیه باشد، به این معنی است که وضعیت تعامل سایت شما نیاز به بهبود دارد. عدد ۵۰۰ میلی ثانیه یا بالاتر برای INP یک امتیاز ضعیف است که نشان می‌دهد سایت شما در پاسخ‌گویی به درخواست‌های کاربران کند است و باعث پرش سریع آن‌ها می‌شود.

تفاوت INP و FID چیست؟

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

در طرف دیگر ماجرا، INP را داریم که تمام تعاملات کاربر را در کل زمانی که در صفحه قرار دارد، ردیابی می‌کند.

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

حالا برای درک بهتر تفاوت INP با FID، به سناریو زیر که یک مثال واقعی است توجه کنید:

تصور کنید که یک بازدیدکننده به سایت‌تان آمده. اولین کاری که انجام می‌دهد این است که روی منوی سایت کلیک می‌کند تا بخش‌ها و خدمات آن را ببیند. میزان زمانی که طول می‌کشد تا منو بارگذاری و نمایش داده شود، ۱۰۰ میلی ثانیه است.

تعامل بعدی همین کاربر، کلیک روی لینک بلاگ در صفحه اصلی است که ۴۰۰ میلی ثانیه طول می‌کشد تا بارگذاری و نمایش داده شود.

FID فقط اولین تعامل، یعنی ۱۰۰ میلی ثانیه را اندازه‌ می‌گیرد؛ درحالی‌که INP همه تعاملات را در نظر می‌گیرد و مقدار ۴۰۰ میلی ثانیه را نگه می‌دارد.

روش‌ های اندازه‌ گیری INP

۱. Google PageSpeed ​​Insights

ابزار Google PageSpeed ​​Insights محبوب‌ترین انتخاب است که به‌شکل کاملا رایگان می‌توانید از آن استفاده کنید. این ابزار، Audit یا ارزیابی دقیق سایت را انجام می‌دهد و به شما می‌گوید که چه شیوه‌هایی را برای بهبود INP و دیگر فاکتورهای سئو پیاده کنید.

توسط این ابزار می‌توانید سرعت سایت خود را هنگام بارگذاری روی دستگاه‌های موبایل و دسکتاپ مشاهده کنید.

PageSpeed ​​Insights دو نوع نتیجه را نمایش می‌دهد. بخش اول که با عنوان ‘Discover what your real users are experiencing’ مشخص شده است، فاکتورهای Core Web Vitals یک سایت را از گزارش Chrome UX نشان می‌دهد. این بخش مجموعه‌ای از داده‌های عملکردی را از تعامل کاربران کروم با سایت شما مشخص می‌کند که نتیجه آن، چیزی مشابه تصویر زیر است:

بخش بعدی با عنوان ‘Diagnose performance issues’، دقیقا همان جایی است که INP و دیگر فاکتورهای Core Web Vital را می‌بینیم.

اگر بخش دوم داده‌های INP را نشان نداد و پیغامی مبنی بر این‌که داده‌های INP سایت در دسترس نیست را دیدید، باید زمان انسداد کل آن یا ‘TBT’ را بررسی کنید. این معیار نوع متفاوتی از پاسخ‌گویی را اندازه‌گیری می‌کند؛ اما تا حدی وضعیت INP را نشان می‌دهد. TBT روی مدت زمانی تمرکز دارد که یک صفحه سایت به ورودی‌های کاربر در حین Load شدن پاسخ نمی‌دهد.

TBR برای شبیه‌سازی تعاملات کاربر بر داده‌های آزمایشی متکی است؛ نه داده‌های واقعی.

بخش Opportunities و Diagnostics همان جایی است که می‌توانید تعدادی پیشنهاد برای بهبود وضعیت سئو سایت‌تان را ببینید و از آن‌ها استفاده کنید.

۲. SEMRUSH Site Audit

ابزار سئو Semrush که در بین متخصصان سئو و وب‌مسترها شهرت زیادی دارد، با امکان Audit سایت، وضعیت INP را نشان می‌دهد. این ابزار جالب، بیش از ۱۴۰ مشکل فنی را در سایت‌تان بررسی می‌کند که Core Web Vital یکی از آن‌ها است. تصویر زیر، یک ارزیابی کلی است که با این سایت دستگیرتان می‌شود.

همان‌طور که می‌بینید، این ابزار پس از انجام بررسی که معمولا فقط چند ثانیه طول می‌کشد، تب‌ها و بخش‌های مختلفی را نشان می‌دهد. در همین تصویر، بخش ‘Thematic Reports’ در وسط صفحه، قسمت ‘Core Web Vitals’ را داریم.

اگر روی دکمه ‘View details’ این بخش کلیک کنیم، می‌توانیم جزئیات را به‌شکل تصویر زیر ببینیم.

درست زیر همین نمودار دایره‌ای شکل، بخش ‘Top Improvements’ را داریم که پیشنهادهایی برای بهبود وضعیت صفحه ارائه می‌دهد.

۳. CrUX Dashboard

این ابزار، یک دستیار همه‌چی تمام در Looker Studio است. Looker Studio همان نسخه جدید Data Studio است که برای مصورسازی داده‌های کاربران سایت، توسط گوگل عرضه شد.

برای استفاده از CrUX Dashboard، باید آدرس سایت‌تان را در همین صفحه بنویسید و روی دکمه ‘Go’ کلیک کنید.

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

از منوی سمت چپ، روی ‘Interaction to Next Paint’ کلیک کنید و به صفحه اصلی در INP سایت بروید.

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

۴. Google Search Console

گزارش ‘Core Web Vitals’ در Google Search Console (GSC) سرچ کنسول از داده‌های واقعی و لحظه‌ای استفاده می‌کند تا بینش‌هایی را در مورد وضعیت سایت‌تان نشان دهد.

برای دسترسی به این گزارش، وارد اکانت GSC و سایت موردنظرتان بشوید و از منوی سمت چپ ‘Core web vitals’ را انتخاب کنید.

به‌محض کلیک روی این بخش، سرچ کنسول ‘Mobile’ و ‘Desktop’ را نشان می‌دهد؛ چون وضعیت INP را به تفکیک دستگاه‌های همراه و کامپیوترها نمایش می‌دهد. برای دیدن وضعیت INP روی هر کدام از دستگاه‌ها، باید روی دکمه ‘Open report’ روبه‌روی آن‌ها کلیک کنید.

سرچ کنسول مشکلات INP را در بخش ‘Why URLs aren’t considered good’ نشان می‌دهد. پس روی گزینه ‘INP issue’ در این بخش کلیک کنید.

۵. Screaming Frog

بی‌شک Screaming Frog، یکی از محبوب‌ترین ابزارهای سئو است که گزارش کاملی از INP را در اختیارتان قرار می‌دهد. برای استفاده از این قابلیت نرم‌افزار، باید ابتدا آن را به ابزار Google Page Speed وصل کنید.

برای انجام این کار، باید API ابزار PageSpeed را در Screaming Frog ادغام کنید. قبل از هر چیزی، باید یک کلید API از این ابزار بسازید که با مراجعه به سایت PageSpeed API و لاگین با اکانت گوگل، این کار انجام می‌شود.

کلید را کپی کنید و در نرم‌افزار Screaming Frog، به مسیر Configuration > API Access > PageSpeed Insights بروید. کلید را در کادر ‘Secret Key’ وارد کنید و دکمه ‘Connect’ روبه‌روی کادر را بزنید.

بعد از اتصال به PSI API، روی تب ‘Metrics’ کلیک کنید. در این کادر، وضعیت نمایش داده‌های INP را روی تلفن همراه یا دسکتاپ مشخص کنید.

حالا داده‌های دقیقی را که می‌خواهید از PageSpeed ​​Insights را انتخاب کنید. همان داده‌هایی که مایلید برای هر URL، یک گزارش داده شود. اگر نمی‌دانید تنظیمات این بخش را چطور انجام دهید، توصیه می‌کنیم که از گزینه‌های پیش‌فرض استفاده کنید. این گزینه‌ها داده‌های گزارش CrUX و داده‌های Lab از Google Lighthouse را پوشش می‌دهند. همچنین در انتهای گزارش‌گیری از Screaming Frog، بخشی را می‌بینید که برای بهبود INP پیشنهادهایی به شما ارائه داده است. در این کادر، می‌توانید بسته به نیازتان، هر معیار را انتخاب یا حذف کنید.

نکته: بعضی از متریک‌ها، مثل Core Web Vitals Assessment، فقط در نسخه ۱۴.۲ این نرم‌افزار و نسخه‌های بالاتر جا گرفته‌اند.

حالا باید آدرس کامل سایت مدنظرتان را در کادر ‘Enter URL to spider’ بنویسید و دکمه ‘Start’ را بزنید.

اگر هم می‌خواهید چند وب‌سایت را به‌طور هم‌زمان ارزیابی کنید، از مسیر Mode > List این کار را انجام دهید.

حالا باید به تب ‘PageSpeed’ در سمت راست بروید و داده‌هایی مربوط به سرعت URLها را در اختیارتان می‌گذارد.

ستون ‘Core Web Vitals Assessment’ همین تب، تمام گزارش‌ها و وضعیت صفحات را نشان می‌دهد.

اگر سرعت آدرس URL مناسب باشد، برچسب ‘Pass’ را در این ستون می‌بینید. در غیر این صورت، با برچسب ‘Fail’ متوجه می‌شویم که فاکتورهای مهم سئو، وضعیت خوبی در سایت‌مان ندارند.

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

آموزش کامل بهبود شاخص INP

برای بهبود شاخص INP، چند کار خیلی ساده باید انجام بدهیم که در ادامه، هر کدام را به‌شکل عملی و گام‌به‌گام توضیح می‌دهیم.

۱. کاهش سایز صفحه

کاهش اندازه صفحه تاثیر مستقیمی روی سرعت صفحه و افزایش نرخ تعامل کاربر دارد. گوگل توصیه می‌کند که اندازه هر صفحه سایت را کمتر از ۵۰۰ کیلوبایت نگه دارید.

برای این‌که بدانید اندازه صفحه سایت‌تان چقدر است، صفحه را در مرورگری مثل کروم یا فایرفاکس باز کنید.

روی صفحه کلیک راست کنید و از منوی بازشده، گزینه ‘Inspect’ را بزنید.

به تب ‘Network’ بروید و صفحه را دوباره Refresh کنید.

اندازه هر فایل Load شده توسط صفحه را در زیر ستون ‘Size’ مشاهده خواهید کرد. اندازه کل صفحه هم در پایین نمایش داده می‌شود که با برچسب ‘# MB transferred’ یا ‘# KB transferred’ مشخص شده است.

اولین قدم کارامد و بسیار ساده برای کاهش اندازه صفحه، فشرده کردن تصاویر آن است. از ابزارهای رایگانی مانند TinyPNG یا Compressor.io برای کاهش حجم فایل تصاویر استفاده کنید که کارشان را بدون افت کیفیت انجام می‌دهند.

راه‌حل دوم برای کاهش اندازه صفحه این است که از یک فونت برای همه سایت‌تان استفاده کنید. یعنی فونت دکمه‌ها، با متن و منوها یکسان باشد؛ چون استفاده از چند فونت، نیاز به دانلود بیشتر دارد که دانلود بیشتر مساوی است با افت سرعت.

۲. کاهش اندازه DOM

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

شما می‌توانید ساختار صفحه خود را با کاهش تعداد عناصر غیر ضروری HTML ساده کنید. مثلا از متن‌های بدون استایل استفاده کنید یا دکمه‌ها را به‌شکل ساده با CSS طراحی کنید.

شناسایی صفحاتی که اندازه DOM زیادی دارند، با ابزار Site Audit Semrush ممکن است که در بخش قبل آموزش داده‌ایم.

اگر از این ابزار استفاده کردید، به بخش گزارش ‘Core Web Vitals’ سایت‌تان بروید و روی ‘Total Blocking Time (TBT)’ تمرکز کنید. بعد از آن، روی عدد بخش ‘Avoid an Excessive DOM size’ کلیک کنید.

۳. کاهش زمان اجرای کدهای جاوا اسکریپت

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

به حداقل رساندن زمان اجرای جاوا اسکریپت به بهینه‌سازی Interaction در Next Paint کمک می‌کند؛ چون هرچقدر زمان اجرای جاوا اسکریپت بیشتر باشد، سرعت پاسخ‌گویی صفحه به درخواست‌های کاربر کندتر می‌شود.

برای پیدا کردن صفحاتی که به‌خاطر پردازش کدهای جاوا اسکریپت کند هستند، از همان گزارش Site Audit ابزار Semrush استفاده کنید. این گزارش هم در بخش ‘Core Web Vitals’ قرار دارد.

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

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

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

۵. محدود کردن اسکریپت‌ ابزارهای شخص ثالث

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

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

۶. اختصاص Web Workers به پردازش کارهای سنگین

Web workers سرویس‌هایی هستند که به جاوا اسکریپت اجازه می‌دهند تا به‌طور مستقل، از Thread اصلی اجرا شود و نیازی به سایر کدها و بخش‌های سایت نداشته باشد. این سرویس‎ها برای اجرای عملیات پیچیده در پس‌زمینه کارایی بالایی دارند.

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

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

// 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 است که وظایف این سرویس را شرح می‌دهد. کدهای زیر این ساختار را نشان می‌دهد:

// 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!');

}

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

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

۷. کوچک کردن وظایف طولانی

ما به این کار، اصطلاحا شکستن وظایف طولانی جاوا اسکریپت یا ‘Breaking up Long JavaScript Tasks’ می‌گوییم که از مسدود شدن رشته اصلی جلوگیری می‌کند.

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

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

۱. setTimeout: یک تابع جاوا اسکریپت داخلی که کار مشخصی را برای اجرا، پس از تاخیر معین در میلی ثانیه زمان‌بندی می‌کند. این تابع می‌تواند اجرا را به زمان دیگری موکول کند و از مسدود شدن رشته اصلی برای مدت طولانی جلوگیری کند.

۲. requestIdleCallback: این API رویکرد کارامدتری را نسبت به setTimeout ارائه می‌کند؛ چون توابع را در طول دوره‌های بیکاری‌شان اجرا می‌کند و نتیجه را نگه می‌دارد تا در اولین درخواست، تحویل دهد. این تابع یک پارامتر Deadline دارد که به شما امکان می‌دهد تا بدون اثرگذاری منفی روی فرایندهای مهم، مدت زمان انجام کار را کنترل کنید.

۸. اولویت دادن به Input Readiness

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

برای اولویت دادن به Input Readiness برای بهبود INP، کارهای زیر را انجام دهید:

• به تعویق انداختن فایل‌ها یا کدهای غیر ضروری جاوا اسکریپت
• Throttling: این تکنیک فرکانس اجرای یک تابع را کنترل می‌کند. به‌عنوان مثال، هنگامی که کاربران به پایین صفحه اسکرول می‌کنند، رویداد مدنظر می‌تواند همان کد را صدها بار در ثانیه فعال کند.
• Debouncing: این شیوه از اجرای مجدد یک تابع تا زمان سپری شدن مدتی مشخص جلوگیری می‌کند.
• Passive Event Listeners: این روش را به‌نام شنوندگان منفعل رویداد می‌شناسیم که یک‌سری Constructs برنامه‌نویسی هستند. مسئولیت اصلی این سازنده‌ها، این است که رویدادهای خاصی را تشخیص دهند. رویدادهای خاص همان اسکرول کردن و ضربه روی صفحه دستگاه هوشمند می‌شوند.

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

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

اینجاست که بازخورد فوری یا ‘Immediate Feedback’ وارد عمل و بهبود شاخص INP می‌شود. این تاکتیک به کاربران نشانه‌ای (Indicator) بصری می‌دهد که در واقع وب‌سایت مدنظرشان، از مرورگر دریافت کرده و درخواست آن‌ها را پردازش می‌کند.

این تکنیک ممکن است زمان پردازش را کاهش ندهد؛ اما می‌تواند عملکرد سریع‌تری را رقم بزند و سرعت بارگذاری را بالا ببرد.

جمع بندی

INP یک فاکتور در وضعیت سئوی سایت است که در دل Core Web Vital گوگل جا گرفته است. این فاکتور، زمان پاسخ‌گویی یک وب‌سایت به تعامل کاربر را اندازه‌گیری می‌کند. هر چه عدد INP کمتر باشد، سرعت پاسخ‌گویی بالای سایت را نشان می‌دهد. بهترین عدد برای INP، ۲۰۰ و کمتر است و عدد ۵۰۰ به بالا، وضعیت نامطلوبی را نشان می‌دهد. اقداماتی که برای کاهش INP می‌توانید انجام دهید خیلی ساده هستند؛ مثلا استفاده از Web Worker، کم کردن اسکریپت‌های شخص ثالث و کاهش سایز صفحه.

تجربه شما در کار با ابزارهای اندازه‌گیری INP و بهینه‌سازی آن چیست؟ ما در بخش نظرات همین پست، مشتاق خواندن نظر شما هستیم تا چیزهای جدیدی یاد بگیریم و به بهبود رتبه سئو سایت‌مان کمک کنیم.

سوالات متداولی که شما می‌پرسید

۱. INP چیست؟

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

۲. تفاوت بین INP و FID چیست؟

تفاوت این دو در این است که INP تمام تاخیرهای تعامل کاربر را در کل Session او اندازه می‌گیرد و نسخه به‌روزرسانی‌شده و جدید FID است؛ درحالی‌که FID تنها زمانی که وب‌سایت برای اولین بار باز می‌شود، زمان را اندازه می‌گیرد و ذخیره می‌کند.

۳. چه ابزارهایی برای اندازه‌گیری INP به‌کار می‌رود؟

سرچ کنسول گوگل، Looker Studio و Google PageSpeed، از ابزارهای رایگان و محبوب برای اندازه‌گیری INP هستند.

۴. تاثیر INP روی سئوی سایت چیست؟

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

۵. چگونه INP را بهبود بدهیم؟

۹ راه‌حل برای بهبود INP وجود دارد که سه مورد از مهم‌ترین و ساده‌ترین آن‌ها عبارتند از کاهش اندازه صفحه با کاهش حجم تصاویر و کدهای جاوا اسکریپت، کاهش اندازه DOM و کاهش زمان اجرای کدهای جاوا اسکریپت از طریق ابزارهای محبوب مثل SEMRUSH Site Audit.

منابع:

Google Developers

SEMRUSH

Hostinger