تجربۀ کاربری خوب یکی از پارامترهای مهم برای جلب رضایت گوگل است! چراکه وقتی کاربر زمان خوشی را روی سایتتان سپری کند، این سیگنال به گوگل فرستاده میشود که آن صفحۀ بهخصوص، شایستگی حضور در رتبههای برتر گوگل را دارد.
INP یکی از متریکهایی است که عددش روی تجربۀ کاربری بازدیدکنندگان اثر میگذارد. در این مقاله، میخواهیم ببینیم INP چیست و چطور آن را بسنجیم؛ در آخر هم نحوۀ بهینهسازی آن را آموزش میدهیم.
ابتدا بیایید با خود INP آشنا شویم و ببینیم چه چیزی را اندازهگیری و نشان میدهد.
INP چیست؟
INP مخفف Interaction to Next Paint است. یک متریک Core Web Vitals که به سرعت صفحه مربوط است!
حالا Core Web Vitals چیست؟
Core Web Vitals در واقع مجموعهای از متریکها هستند که تمرکزشان روی سرعت بارگذاری صفحات اینترنتی، تعاملپذیری و پایداری تصویری است. گوگل از Core Web Vitals برای سنجش تجربۀ کلی کاربر از یک صفحه استفاده میکند.
و اما INP!
به زبان خیلی ساده، INP زمان بین برقراری تعامل توسط کاربر با سایت تا بازسازی صفحه توسط مرورگر را اندازهگیری میکند. اجازه دهید مثال بزنیم.
فرض کنید در یک سایت فروشگاهی، روی دکمۀ افزودن به سبد خرید کلیک میکنید؛ این کار شما نوعی تعامل است که در پاسخ آن، صفحه (هرچند در قسمتی کوچک) تغییر میکند؛ مشخصاً، عدد یک کنار آیکون سبد خرید قرار میگیرد. این همان لود کردن فریم بعدی از صفحه است که INP به آن اهمیت میدهد.
از انواع دیگر تعامل میتوان به کلیک روی منوی همبرگری، تایپ کردن نامتان در فیلد مخصوص، باز کردن و پرکردن یک فرم و… اشاره کرد.
یک نکتۀ بسیار جالب راجعبه این متریک وجود دارد و آن هم اینکه هنوز وارد گود نشده است؛ یعنی هنوز گوگل در Core Web Vitals آن را لحاظ نمیکند.
گوگل چند وقتی است که تصمیم دارد دو پارامتر TTFB و INP را به متریکهای مهم برای امتیاز Core Web Vitals اضافه کند. چندی پیش این اتفاق برای مورد اول افتاد و ما هم آن را در مقالهای با نام TTFB چیست زیر ذرهبین بردیم؛ ولی INP هنوز توسط Core Web Vitals لحاظ نمیشود.
این متریک قرار است از ماه مارچ ۲۰۲۴ جایگزین پارامتر FID شود که کارش ارزیابی پاسخدهی صفحات به تعاملهای کاربران بود! در اصل، INP با هدف اصلاح مشکلات مربوط به FID طراحی شده است و قرار است محدودیتهای آن را از بین ببرد.
جلوتر و موقع بررسی تفاوتهای این دو متریک، با FID بیشتر آشنا خواهید شد.
همانطور که گفتیم، هر تعامل گرفتنی، پاسخی تصویری دارد. مهم است که کاربر در کمترین زمان ممکن پس از برقراری تعامل، تغییر در تصویر را مشاهده کند. هرقدر این زمان کوتاهتر باشد، کاربر تجربۀ بهتری خواهد داشت؛ بنابراین،خوشایند گوگل هم جلب میشود.
پاسخدهی خوب زمانی رخ میدهد که صفحه بهسرعت به تعاملی که برقرارشده جواب دهد؛ یعنی مرورگر در سریعترین زمان ممکن صفحه را بازسازی کند.
خب فهمیدیم که INP شاخصی است که توسط یک عدد مشخص میشود و خوب یا بد بودن پاسخدهی به تعامل کاربر را بررسی میکند. حالا چه عددی بیانگر INP مناسب است؟
عدد خوب برای INP چند است؟
اجازه دهید اول بگوییم که برخی از تعاملها ذاتاً پیچیدهتر و سنگینتر هستند و پاسخدهی به آنها بیشتر طول میکشد؛ اما برای جلب رضایت کاربر و گوگل، مهم است که صفحه حتی پاسخ آن تعاملهای پیچیده را هم در سریعترین زمان ممکن بدهد!
یک نکتۀ بسیار مهم در رابطه INP که خوب است بدانید:
برای INP، تکمیل بازسازی صفحه و نمایش شکل نهایی مهم نیست؛ این متریک، به اولین تغییری که در صفحه اعمال میشود اهمیت میدهد. ممکن است لود شدن کامل یک صفحه، مقداری زمان ببرد؛ اما برای دستیابی به عدد INP خوب، باید اولین نشانههای تغییر در کوتاهترین زمان ممکن نمایان شوند.
اگر کاربر پس از کلیک روی یک لینک یا فشردن یکی از دکمههای کیبورد، تغییری در صفحه نبیند، احتمالاً فکر میکند دکمه مشکل دارد یا بهطور کلی، سایت درست کار نمیکند؛ پس حداقل باید شروع تغییر را ببیند تا مطمئن شود بیهوده انتظار نمیکشد!
پیشنهاد خواندنی: ۵ نکته ضروری درباره تاثیر سرعت لود بر سئو سایت وردپرسی که نمیدانستید!
برای به دست آوردن عدد INP ، نسبت زمان پاسخدهی مرورگر (شروع به تغییر صفحه و لود کردن فریم بعدی) به تمام تعاملهای کاربر محاسبه میشود. بالاترین عدد به دست آمده، یعنی بدترین و کندترین پاسخ، بهعنوان عدد INP در نظر گرفته میشود.
ضمناً واحد اندازهگیری این متریک هم میلیثانیه است!
حالا چه عددی مناسب است و چه عددی نشاندهندۀ سرعت پایین لود شدن صفحات است؟
بهطور کلی، INP پایینتر از ۲۰۰ میلیثانیه یعنی صفحه پاسخدهی خوبی دارد و بهسرعت به تعامل کاربران جواب میدهد.
INP بین ۲۰۰ میلیثانیه تا ۵۰۰ میلیثانیه، با ارفاق قابلقبول است، اما خب بدون شک، جا برای بهتر شدن وجود دارد.
و در آخر، INP بالاتر از ۵۰۰ میلیثانیه یعنی وضعیت افتضاح است و صفحه در پاسخدهی به تعامل کاربر بسیار ضعیف عمل میکند.
بالاتر گفتیم که INP قرار است جایگزین FID شود و مشکلات مربوط به آن را برطرف کند. بیایید فرق بین این دو پارامتر را بررسی کنیم.
تفاوت INP و FID چیست؟
FID مخفف First Input Delay است و وظیفۀ سنجش پاسخدهی صفحه را برعهده دارد. البته خب تا مارچ ۲۰۲۴ این پارامتر در Core Web Vitals وجود خواهد داشت و پس از آن، وظایفش بر دوش INP قرار میگیرد.
FID زمان بین تعامل کاربر با صفحه و ارائۀ پاسخ کامل توسط مرورگر را محاسبه میکند. اگر دوست دارید با این متریک بیشتر آشنا شوید، مقالۀ FID چیست را در وبلاگمان بخوانید.
ضمناً، عدد مناسب FID را میتوانید در تصویر زیر بببینید:
اولین و مهمترین تفاوت INP و FID در این است که INP زمان بین تعامل و اولین قسمت از پاسخ مرورگر برای تمام تعاملهای کاربر را در نظر میگیرد؛ در حالی که FID فقط به اولین تعاملی که برقرار میشود اهمیت میدهد و همان را معیار اصلی قرار میدهد.
پس میتوان گفت INP کاملاً مخالف گزینهای که قرار است جایگزینش شود، یعنی FID، عمل میکند.
بهخاطر همین تفاوت بزرگ، میتوان با اطمینان گفت که ارزیابی INP جامعتر است و کلاً این متریک، پایدارتر و قابلاعتمادتر از FID نشان میدهد.
نکتۀ بسیار مهم دیگر در رابطه با تفاوت FID و INP، این است که ازرشیابی FID ممکن است از عوامل خارج از صفحه تأثیر بگیرد؛ عواملی مثل کیفیت اتصال اینترنت و حتی نوع دستگاه کاربر.
اما خب، در رابطه با INP باید بدانید که کمتر تحت تأثیر عوامل خارج از صفحه قرار میگیرد؛ به خاطر همین دلایل است که INP قرار است جایگزین FID شود؛ چون همانطور که بالاتر هم گفتیم، هدف از ایجاد این متریک، برطرف کردن مشکلات و محدودیتهای FID بود.
پیشنهاد خواندنی: آموزش افزایش سرعت وردپرس با ۱۲ تکنیک فوق کاربردی!
احتمالاً سؤالی در ذهنتان شکل گرفته است. اینکه INP چگونه محاسبه میشود؛ در بخش بعدی پاسختان را خواهیم داد.
نحوۀ اندازهگیری شاخص INP
هنوز چند ماهی تا مارچ مانده است! اما میتوانید همین حالا هم عدد INP صفحاتتان را به دست آورید. در حالی که روشهای بسیاری برای این کار وجود دارند، سادهترین راه استفاده از Lighthouse است!
صحبت از یک افزونه در مرورگر Google Chrome است. وقتی افزونۀ Lighthouse را در حالت timespan قرار دهید، خواهید دید که در هنگام لود شدن یک صفحه چه اتفاقاتی رخ میدهد؛ بنابراین، هم میتوانید عدد INP را به دست آورید و هم میتوانید مشکلات مربوط به پاسخدهی صفحه را پیدا کنید.
البته ابزارهای حرفهایتری هم برای محاسبۀ INP وجود دارند. مثل:
- ماژول npm در افزونۀ Lighthouse؛
- User Flows در افزونۀ Lighthouse؛
- افزونۀ Chrome Web Vitals در مرورگر کروم.
اما چطور باید مشکلات مربوط به INP در سایت را پیدا کنیم؟
چطور مشکلات INP را در سایتمان شناسایی کنیم؟
گفتیم که INP میزان سریع بودن صفحه در پاسخدهی به تعامل کاربر را نشان میدهد؛ هرچقدر عدد آن پایینتر باشد، نشاندهندۀ بهتر بودن وضعیت است.
بهعلاوه، گفتیم که برای سنجش عدد INP میتوان از افزونهای مثل Lighthouse استفاده کرد؛ اما اگر میخواهید اطلاعات دقیقتری از وضعیت داشته باشید، مسلماً نمیتوان به اعداد حاصلشده برای تعامل یک کاربر اکتفا کرد.
برای شناسایی مشکلات مربوط به INP در سایت باید پا را فراتر بگذاریم؛ اما قبل از شروع، لازم است با دو مفهوم دادههای آزمایشگاهی (Lab Data) و دادههای میدانی (Field Data) آشنا شوید.
منظور از دادههای آزمایشگاهی (Lab Data) چیست؟
در دنیای فیزیک مفهومی داریم با نام شرایط آزمایشگاهی! اجازه دهید مثال بزنیم.
مثلاً فیزیکدانان میگویند صفر کلوین که برابر با ۲۷۳- درجه سانتیگراد است، فقط در شرایط آزمایشگاهی حاصل میشود؛ یعنی هیچجایی در طبیعت پیدا نمیکنید که دمایش برابر با صفر کلوین باشد!
دادههای آزمایشگاهی هم شرایطی مشابه دارند؛ به دادههایی که در محیط آزمایشگاه و با کنترل دقیق عوامل تأثیرگذار به دست میآیند، دادههای آزمایشگاهی یا Lab Data میگویند. مجموعهای از قوانین تعیین میشوند، قوانینی که مربوط به شرایط اتصال اینترنت و دستگاه مورد استفاده هستند و دادههای آزمایشگاهی حاصل میشوند.
منظور از دادههای میدانی (Field Data) چیست؟
همانطور که در دنیای فیزیک، شرایط در طبیعت متفاوت از شرایط در آزمایشگاه است، محاسبۀ INP با دادههای واقعی به دست آمده از کاربر واقعی هم به نتایج متفاوتی منجر میشود!
این نوع دادهها که به آنها RUM یا Real User Monitoring هم میگویند، از رصد کردن کاربران حاضر در صفحه حاصل میشوند.
این نوع دادهها از تعاملهای واقعی انجام گرفته توسط هر کاربر به دست میآید؛ در واقع، وضعیت حقیقی صفحات و وبسایت توسط این دادهها مشخص میشود؛ چراکه عواملی مثل دستگاه کاربر، موقعیت مکانی و صدالبته کیفیت اتصال به اینترنت، روی نتایج اثر میگذارند؛ هرچند بسیار کمتر از تأثیری است که روی FID میگذارند.
نکته: دادههای میدانی علاوهبر عدد INP، اطلاعات کاملی در رابطه با نوع تعاملی که به آن عدد INP منجرشده، شکل تعامل (کلیک یا فشردن دکمهای روی کیبورد) و… ارائه میکند.
میتوان توسط ابزارهای گوگل کروم که وظیفۀ بررسی Core Web Vitals را دارند، به دادههای میدانی دست پیدا کرد. مثلاً گزارش CrUX این نوع دادهها را در اختیارتان میگذارد.
اما خب، این گزارش فقط گوشهای از ماجرا است و حتماً باید خودتان دادههای لازم را جمعآوری کنید.
اتکای محض به این CrUX عاقلانه نیست؛ چراکه بهتنهایی نمیتواند اطلاعات لازم برای اعمال تغییرات تأثیرگذار روی سایت را ارائه کند. توجه داشته باشید که اطلاعات حاصلشده توسط دادههای میدانی، فقط یک عدد نیست؛ بلکه مجموعهای از اعداد است!
ساده بگوییم؛ ممکن است صفحه برای تعدادی از کاربران بسیار سریع لود شود، در حالی که عدهای دیگر زمان بیشتری برای لود شدن صفحه منتظر میمانند.
به همین خاطر، توصیه میشود خودتان شروع به جمعآوری دادههای میدانی کنید تا اطلاعات دقیقتری کسب کنید.
پس میتوان گفت دادههای میدانی، مجموعهای از دادههای مربوط به عملکرد برای تمام کاربران صفحه هستند.
حالا وقت آن است که بهینه سازی فاکتور INP سایت را یاد بگیریم.
آموزش کامل بهبود شاخص INP
سایت با سایت فرق دارد. ممکن است طراحی برخی صفحات طوری باشد که هیچگونه تعاملی با آنها برقرار نشود. مثل صفحهای که تمام آن با متن پر شده است؛ بدون هیچ دکمه و لینکی!
در حالی که برخی دیگر از صفحات، مثل صفحات بازی یا ویرایشگرهای متن، شاهد صدها و حتی هزاران تعامل در هر بازدید باشند.
در هر صورت، INP بالا میتواند به تجربۀ بد کاربری منجر شود و این چیزی نیست که صاحبان سایتها میخواهند!
گرچه بهینه سازی فاکتور INP سایت میتواند زمانبر باشد و تلاش زیادی بطلبد، اما پاداش آن خلق تجربۀ کاربری مناسب برای بازدیدکنندگان است.
اگر میخواهید وضعیت را بهبود ببخشید، به نکاتی که در ادامه میآوریم عمل کنید.
دلیل INP ضعیف را شناسایی کنید
اگر متوجه شدید که عدد INP در وضعیتی است که نشان میدهد این پارامتر ضعیف است یا نیاز به بهبود دارد، باید قبل از هر کاری دلیل آن را پیدا کنید.
باید تعاملهایی که دیر پاسخ میگیرند را با دادههای میدانی پیدا کنید و آنها را در آزمایشگاه زیر ذرهبین ببرید! گیج شدید؟ نگران نباشید، بیشتر توضیح میدهیم.
همانطور که گفتیم، دادههای میدانی علاوهبر عدد INP، اطلاعاتی راجعبه تعاملها و چگونگی ایجاد آنها در اختیارتان قرار میدهند. هم میتوانید از ابزارهایی مثل CrUX استفاده کنید و هم خودتان با کمک برخی از ابزارها مثل هاتجر، روی تعاملهای کاربران دقیق شوید و آنهایی که کند هستند را شناسایی کنید.
مثلاً ممکن است متوجه شوید کاربر پس از کلیک روی دکمۀ تکمیل خرید، باید بیشتر از ۵۰۰ میلیثانیه برای دریافت فریم بعدی روی نمایشگرش منتظر بماند. خب این یعنی وضعیت خیلی بد است!
حتی اگر دادههای میدانی هم در اختیارتان نباشند، راهکارهایی وجود دارند که در شناسایی تعاملهای کند در آزمایشگاه کمکتان میکنند؛ اما خب، حالت ایدئال به دست آوردن دادههای میدانی و استفاده از آنها است.
حالا میتوانید دلیل تعاملهای کند را پیدا کنید. ممکن است مشکل از کدی در صفحه باشد یا هر چیز دیگری.
تعاملها را بهینهسازی کنید
بعد از شناسایی تعامل کند، باید آن را بهینه کنید تا INP کاهش یابد. کل فرایند تعامل را میتوان به ۳ قسمت زیر تقسیم کرد:
- تاخیر در ورودی (Input): زمان بین برقراری تعامل توسط کاربر و فرستادن دستور برای اجرای تعامل.
- زمان پردازش (Processing Time): اشاره به فاصلۀ زمانی بین ارسال دستور برای اجرای تعامل و اجرای کامل آن دارد.
- تاخیر در ارائه (Presentation): پس از کامل شدن تعامل، مدتزمانی طول میکشد تا مرورگر فریم بعدی را نمایش دهد؛ منظور از تاخیر در ارائه، آن مدتزمان است.
مجموع این زمانها، تاخیر در پاسخدهی به تعامل را شکل میدهد. برای کاهش مقدار INP، لازم است هر کدام از این ۳ بخش را تا جای ممکن بهینه و زمان آنها را پایین بیاورید.
در اولین قدم، باید سراغ تأخیر در ورودی بروید. بسته به اتفاقات دیگری که روی صفحه در جریان است، این مدتزمان میتوان بهمقدار قابلتوجهی طولانی شود!
فارغ از اینکه دلیل این تأخیر چیست، باید نهایت تلاشتان را برای کاهش آن انجام دهید.
یکی از دلایل میتواند تعامل گرفتن با صفحه قبل از لود شدن کاملش باشد. ممکن است صفحهای کامل رندر شده باشد، اما فرایند لود شدن به اتمام نرسیده باشد! توجه داشته باشید که فقط بعد از لود شدن کامل صفحه میتوان با آن تعامل برقرار کرد.
برای برطرف کردن این مشکل، تا جایی که برایتان مقدور است، فرایندهای زمانبر را تسریع کنید؛ به این ترتیب، صفحه سریعتر لود خواهد شد. بهینهسازی کدها و اسکریپتهای صفحه در این مسیر کمکتان خواهند کرد.
زمان پردازش را بهینهسازی کنید
علاوهبر کاهش زمان تأخیر در ورودی، باید زمان پردازش را هم به حداقل برسانید؛ زمان بین دریافت تعامل و دستور برای اجرای آن.
میتوانید وظایف (Tasks) مربوط به این قسمت را به قسمتهای کوچکتر تقسیم کنید؛ با این کار، به جای داشتن یک تسک بزرگ که انجام آن زمانبر است، با قسمتهای کوچکتری مواجه هستیم که سریعتر کار را پیش میبرند.
بهعلاوه، میتوانید کدها را طوری بهینه کنید که از انجام کارهای اضافی خودداری کنند و یکراست، سراغ رسالت اصلی خود بروند. هرگونه تسک اضافی که انجام آن ضرورت نداشته باشد، به افزایش زمان پردازش منجر میشود!
عامل دیگری که میتواند باعث زیاد شدن این زمان شود، Layout Thrashing است. یک مشکل مربوط به عمکلرد در رندرینگ! این اتفاق زمانی رخ میدهد که لیاوتهای مختلف بخواهند بهصورت همزمان بارگذاری شوند.
این موضوع از آن جهت در عملکرد اختلال ایجاد میکند که با هر دفعه بهروزرسانی استایلها و درخواست مقادیر برای استایلهای جدید، مرورگر مجبور است همزمان با رسیدگی به تعامل کاربر، امور مربوط به لیاوت را هم انجام دهد. در حالی که میتوان با اعمال برخی تغییرات، کاری کرد که این فرایند پس از پاسخ به تعامل انجام شود.
زمان ارائۀ پاسخ را بهینه کنید
همانطور که گفتیم، سومین بخش از INP، به زمان بین تکمیل اجرای تکامل و نمایش اولین فریم از تصویر بعدی توسط مرورگر اختصاص دارد؛ خب همانطور که حدس میزنید، مدتزمان این بخش هم باید تا حد ممکن کاهش پیدا کند.
اجازه دهید یک مفهوم دیگر را در این قسمت به شما معرفی کنیم: DOM!
این عبارت مخفف Document Object Model است و به سادهترین تعریف، ساختار HTML صفحه را نشان میدهد! هرچقدر سایز DOM بزرگتر باشد، رندر کردن صفحه هم بیشتر طول میکشد؛ در نقطۀ مقابل، کوچک بودن سایز DOM، باعث افزایش سرعت رندر صفحه خواهد شد.
راهکارهایی وجود دارند که میتوان با استفاده از آنها سایز DOM را تا جای ممکن کم کنید؛ کاری که زمان ارائۀ پاسخ را بهینه میکند.
راهکار دیگر، استفاده از content-visibility
در CSS است که باعث کاهش زمان رندر صفحه میشود.
ضمناً، متخصصان امر توصیه میکنند تا جای ممکن از رندر کردن HTML در طرف کلاینت خودداری کنید تا سرعت رندر افزایش پیدا کند.
نکته: امکان ندارد که استفاده از HTML به صفر برسد؛ اما هرچقدر میزان استفاده از آن (در طرف کاربر) کاهش پیدا کند، سرعت رندر هم بالاتر میرود.
خب این هم از آموزش بهینه سازی فاکتور INP سایت.
کاهش INP = تجربۀ کاربری خوشایند!
در این مقاله بررسی کردیم که INP چیست و چطور میتواند روی تجربۀ کاربری تأثیر بگذارد.
فهمیدیم که با یک متریک Core Web Vitals طرف هستیم که قرار است در مارچ ۲۰۲۴ جایگزین FID شود و وظیفۀ سنجش پاسخدهی به تعامل کاربر را بر عهده بگیرد.
همچنین عدد مناسب INP، تفاوت آن با FID، چگونگی پیدا کردن مشکلات مربوط به آن و بهینه سازیاش را بررسی کردیم.
امیدواریم با خواندن این مقاله، اطلاعات لازم دربارۀ این پارمتر را کسب کرده باشید. اگر همچنان سؤالی در این رابطه دارید، در قسمت نظرات آن را برایمان بنویسید.
سؤالات متداول
- INP مخفف چیست؟
INP مخفف Interaction to Next Paint است و زمان بین تعامل گرفتن توسط کاربر و نمایش فریم بعدی از تصویر توسط مرورگر را محاسبه میکند.
- عدد ایدئال INP چقدر است؟
INP هرچه پایینتر باشد بهتر است. وقتی INP یک صفحه کمتر از ۲۰۰ میلیثانیه باشد، یعنی وضعیت ایدئالی دارد.
- چطور میتوان INP را محاسبه کرد؟
یکی از سادهترین روشها برای محاسبۀ INP هر صفحه، استفاده از افزونۀ Lighthouse در مرورگر گوگل کروم است.
منابع: web.dev | Search Engine Journal
دیدگاه ها
اولین نفری باشید که دیدگاه خود را ثبت می کنید