نحوه اندازه گیری تعامل با رنگ بعدی (INP)

برای چندین سال، INP یک معیار آزمایشی و بعداً یک معیار معلق بود.

برخی آن را آشنا می دانستند، برخی دیگر آن را نادیده می گرفتند، و تعدادی فعالانه با پیش بینی تغییرات در معیارهای Core Web Vitals به آن پرداختند.

از 12 مارس، INP به یک Core Web Vital پایدار تبدیل شده است که اکنون یکی از فاکتورهای رتبه بندی است.

اگر در حال خواندن این مقاله هستید، احتمالاً به یکی از دو گروه اولی که قبلاً ذکر کردم تعلق دارید.

هنوز در مورد نحوه اندازه گیری INP مطمئن نیستید؟

نگران نباشید - من شما را تحت پوشش قرار داده ام!

به هر حال، اگر هنوز در مورد اینکه INP چیست و چگونه محاسبه می شود مطمئن نیستید، توصیه می کنم از پست ما دیدن کنید که توضیح می دهد Interaction to Next Paint در مورد چیست.

نحوه اندازه گیری متریک INP

دو روش اصلی برای جمع آوری اطلاعات در مورد INP وجود دارد:

1. داده های آزمایشگاهی: داده های جمع آوری شده در یک محیط از پیش تعیین شده با استفاده از دستگاه های خاص و سرعت اینترنت (مانیتورینگ مصنوعی). حدس خوبی از عملکرد یک وب سایت می دهد، اما به طور کامل تجربه کاربران واقعی را نشان نمی دهد. زمانی که اطلاعاتی از کاربران واقعی ندارید، برای تشخیص مشکلات احتمالی مفید است.
2. داده های فیلد (یا مانیتورینگ کاربر واقعی – RUM): این روش تجربیات واقعی مرورگر را از کاربران جمع آوری می کند و مشکلاتی را نشان می دهد که آزمایش های آزمایشگاهی ممکن است متوجه آن ها نشوند. از آنجایی که به دستگاه ها و سرعت اینترنت کاربران بستگی دارد، نگاهی به نحوه عملکرد وب سایت در دنیای واقعی ارائه می دهد.

در اینجا می توانید اطلاعات بیشتری در مورد داده های آزمایشگاهی و میدانی بخوانید.

نکته مهم توجه: داده های آزمایشگاهی و میدانی را می توان متمایز کرد. این به این دلیل است که بازدیدکنندگان وب سایت ممکن است از اتصالات یا دستگاه های اینترنتی کاملاً متفاوتی نسبت به شما یا تیم توسعه دهنده شما استفاده کنند.

برای کسانی که داده های آزمایشگاهی را اندازه گیری می کنند، موارد زیر را توصیه می کنم:

• Chrome Dev Tools – این ابزارها به صورت پیش فرض در مرورگر کروم تعبیه شده اند. می توانید با فشار دادن "Cmd+Left Shift+I" روی صفحه کلید (Mac) به آنها دسترسی داشته باشید. "Ctrl + Shift چپ + I" (ویندوز)، یا با کلیک راست بر روی یک صفحه و سپس کلیک بر روی "Inspect" کلیک کنید.
• "وب حیاتی" برنامه افزودنی کروم - در فروشگاه وب کروم موجود است.

برای اندازه گیری در میدان، می توانید از موارد زیر استفاده کنید:

• کنسول جستجوی گوگل یا داشبورد CrUX - برای ممیزی وب سایت شما مفید است. آنها تصویر گسترده تری از اینکه آیا وب سایت شما نیاز به بهبود دارد ارائه می دهند.
• کتابخانه جاوا اسکریپت Web-Vitals یا قالب Core Web Vitals - یک روش رایگان برای اندازه گیری تجربه کاربر. این به شما بینشی می دهد که کدام صفحات و عناصر دارای تعامل ضعیف هستند (توجه داشته باشید که اجرای آن به دانش فنی نیاز دارد).
• رام ویژن، DebugBear، یا Coralogix - تعدادی از تعداد زیادی موجود پرداخت شده است ارائه دهندگان RUM (نظارت کاربر واقعی) در بازار که اندازه گیری INP و سایر معیارهای عملکرد را بسیار آسان تر می کنند.

اکنون، بیایید به هسته مقاله برویم، و اجازه دهید شما را از طریق ابزارها راهنمایی کنم و به شما کمک کنم بهترین را برای خود انتخاب کنید!

ابزارهایی که می توانند INP را اندازه گیری/ممیزی کنند

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

علاوه بر این، راه حل های پولی وجود دارند که نصب آن ها ساده و بصری است.

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

اندازه گیری های آزمایشگاهی

[Tool 1] ابزار توسعه کروم

کاربران مرورگر کروم می توانند با استفاده از ابزارهای توسعه دهنده، Interaction to Next Paint را در یک محیط کنترل شده آزمایش یا ارزیابی کنند. با انتخاب «زمان زمانی» و «عملکرد» در تب Lighthouse، کاربران می توانند گزارشی با جزئیات معیارهای INP تولید کنند.

فقط تعاملات خود را ضبط کنید، و voila!

[Tool 2] افزونه Web Vitals

را افزونه Web Vitals کروم از جمله امتیاز INP را پس از تعامل با یک صفحه نمایش می دهد.

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

اندازه گیری های میدانی

[Tool 1] – کنسول جستجوی گوگل (حسابرسی)

کنسول جستجوی گوگل (GSC) که به طور گسترده مورد استفاده قرار می گیرد، که برای هر صاحب وب سایت قابل دسترسی است، می تواند به تشخیص اینکه آیا وب سایت شما دارای مشکلات تعامل کند است یا خیر، کمک می کند.

به سادگی به داشبورد GSC، روی برگه Core Web Vitals، و بسته به آنچه می خواهید بررسی کنید، پانل موبایل یا دسکتاپ را انتخاب کنید.

توجه: معیارهای Core Web Vitals به طور جداگانه برای دستگاه های مختلف محاسبه می شود.

وقتی آنجا هستید، ردیفی را در جدول پیدا کنید و روی آن کلیک کنید که امتیاز INP با عنوان \'نیاز به بهبود دارد\' یا "فقیر". این به شما نشان می دهد که کدام URL ها با INP کند مشکل دارند.

با این حال، به خاطر داشته باشید که GSC محدودیت های خود را دارد. همه زمان های INP را برای هر URL در یک گروه گزارش نمی کند، همچنین مشخص نمی کند کدام عنصر باعث امتیاز ضعیف شده است. با وجود این، این یک نقطه شروع مفید برای شناسایی مشکلات احتمالی INP در سایت شما است.

[Tool 2] – گزارش قالب CrUX (حسابرسی)

ریک ویسکومی منتشر کرد راه انداز داشبورد CrUX چند وقت پیش این ابزار تا حد زیادی فرآیند تایید CrUX را ساده می کند.

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

فقط از لینک پاراگراف اول استفاده کنید، دامنه را در کادر قرار داده و enter را فشار دهید.

به خاطر داشته باشید که همه دامنه ها در مجموعه داده ظاهر نمی شوند.

این ممکن است به این دلیل باشد که دامنه به صورت عمومی قابل کشف نیست یا بازدیدکنندگان کافی را جذب نمی کند.

اگر وب سایت شما در مجموعه داده گنجانده شده است، باید داشبوردی مشابه آنچه در زیر توضیح داده شده است ببینید.

داشبورد CrUX یک ابزار عالی برای به اشتراک گذاری امتیازات عملکرد وب سایت با همکاران یا مشتریان و مقایسه دامنه شما با رقبا است. بسیار شبیه GSC، پایه محکمی برای ارزیابی اینکه آیا یک وب سایت نیاز به بهبود دارد یا خیر، ارائه می دهد.

[Tool 3] – کتابخانه جاوا اسکریپت web-vitals

کارمندان Google یک کتابخانه JS منتشر کرده اند که برای جمع آوری داده های مربوط به INP و ارسال آن به یک ارائه دهنده نظارت بر کاربر واقعی (RUM) طراحی شده است. من به شدت پیشنهاد می کنم آن را بررسی کنید - شما می توانید آن را در اینجا انجام دهید.

با این حال، این راه حل یک نکته دارد:

شما باید مهارت های کدنویسی داشته باشید یا به توسعه دهنده ای دسترسی داشته باشید که بتواند در اجرای آن کمک کند.

اگر می خواهید از GA4 برای آن استفاده کنید، کد زیر را در وب سایت خود پیاده کنید (منبع: web.dev) و تعاملات آهسته را در این زمینه پیدا کنید.

// Be sure to import from the attribution build:
import {onINP} from \'web-vitals/attribution\';

function sendToGoogleAnalytics ({name, value, id, attribution}) {
\xa0 // Destructure the attribution object:
\xa0 const {eventEntry, eventTarget, eventType, loadState} = attribution;

\xa0 // Get timings from the event timing entry:
\xa0 const {startTime, processingStart, processingEnd, duration, interactionId} = eventEntry;

\xa0 const eventParams = {
\xa0 \xa0 // The page\'s INP value:
\xa0 \xa0 metric_inp_value: value,
\xa0 \xa0 // A unique ID for the page session, which is useful
\xa0 \xa0 // for computing totals when you group by the ID.
\xa0 \xa0 metric_id: id,
\xa0 \xa0 // The event target (a CSS selector string pointing
\xa0 \xa0 // to the element responsible for the interaction):
\xa0 \xa0 metric_inp_event_target: eventTarget,
\xa0 \xa0 // The type of event that triggered the interaction:
\xa0 \xa0 metric_inp_event_type: eventType,
\xa0 \xa0 // Whether the page was loaded when the interaction
\xa0 \xa0 // took place. Useful for identifying startup versus
\xa0 \xa0 // post-load interactions:
\xa0 \xa0 metric_inp_load_state: loadState,
\xa0 \xa0 // The time (in milliseconds) after page load when
\xa0 \xa0 // the interaction took place:
\xa0 \xa0 metric_inp_start_time: startTime,
\xa0 \xa0 // When processing of the event callbacks in the
\xa0 \xa0 // interaction started to run:
\xa0 \xa0 metric_inp_processing_start: processingStart,
\xa0 \xa0 // When processing of the event callbacks in the
\xa0 \xa0 // interaction finished:
\xa0 \xa0 metric_inp_processing_end: processingEnd,
\xa0 \xa0 // The total duration of the interaction. Note: this
\xa0 \xa0 // value is rounded to 8 milliseconds of granularity:
\xa0 \xa0 metric_inp_duration: duration,
\xa0 \xa0 // The interaction ID assigned to the interaction by
\xa0 \xa0 // the Event Timing API. This could be useful in cases
\xa0 \xa0 // where you might want to aggregate related events:
\xa0 \xa0 metric_inp_interaction_id: interactionId
\xa0 };

\xa0 // Send to Google Analytics
\xa0 gtag(\'event\', name, eventParams);
}

// Pass the reporting function to the web-vitals INP reporter:
onINP(sendToGoogleAnalytics);

پیاده سازی این کد در وب سایت همچنین مستلزم ایجاد معیارهای سفارشی در GA4 پس از تحویل پارامترها به ویژگی است.

[Tool 4] – قالب Core Web Vitals برای GTM

چند سال پیش، سیمو آهاوا یک راهنما ایجاد کرد و یک الگو برای GTM که معیارهای CWV \u200b\u200bرا از تجربیات بازدیدکنندگان جمع آوری کرده و به Google Analytics ارسال می کند. این یک راه عالی برای پیاده سازی اندازه گیری CWV \u200b\u200bدر صفحه شما بدون داشتن دانش توسعه دهنده است.

[Tool 5] - ابزارهای پولی - ارائه دهندگان RUM

ابزارهای پولی زیادی وجود دارد که می توانند معیار INP را بر اساس تجربه واقعی کاربر اندازه گیری کنند.

فهرست کاملی از ارائه دهندگان RUM طولانی خواهد بود، بنابراین برای اینکه به شما ایده بدهیم، در اینجا چند نمونه از ارائه دهندگان RUM وجود دارد که می توانند INP را اندازه گیری کنند:

مزایای استفاده از ابزارهای پولی، از جمله:

• سهولت نصب،
• ارائه داده ها،
• پشتیبانی از ارائه دهنده RUM

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

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

بعد از شروع یک پروژه جدید، مجبور شدم اضافه کنم یک کد کوچک به وب سایت.

پس از دریافت آن بیت کد، می توانم امتیازات INP را مستقیماً از برگه INP با تمام جزئیات لازم برای یافتن اینکه کدام تعاملات کند هستند، بررسی کنم.

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

کدام را انتخاب کنیم؟ مزایا و معایب

ممکن است این سوال برای شما پیش بیاید که "از کدام روش برای اندازه گیری INP استفاده کنم؟"

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

چرا استفاده از هر دو روش مفید است؟

ابتدا، داده های میدانی به شما امکان می دهد تشخیص دهید که آیا و در کجا بازدیدکنندگان شما تعاملات کندی را تجربه می کنند یا خیر. دوم، داده های آزمایشگاهی به شما کمک می کند تا اندازه گیری کنید که آیا تلاش های شما برای بهبود تعامل موثر است یا خیر.

در زیر جدولی وجود دارد که مزایا و معایب کلیدی هر روش برای جمع آوری داده های INP را نشان می دهد.

افکار نهایی

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

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

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

آخرین توصیه:

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

من وارد هستم! بیایید با هم کار کنیم

مقالات دیگر ما را در مورد INP بخوانید: