سئو و بهینه سازی

FID چیست و چه کاربردی در گوگل دارد؟

FID چیست و چه کاربردی در گوگل دارد؟

FID چیست؟

FID مخفف First Input Delay است و پارامتری است که برای اندازه گیری Load responsiveness است. از Load responsiveness برای اندازه گیری سرعت لود صفحه و اجرای جاوااسکریپت های لازم برای پاسخ گویی به تعامل کاربر استفاده می شود. هر چه کاربر بتواند سریعتر با صفحه تعامل داشته باشد، تجربه کاربری بهتری خواهد داشت.

به عبارت دیگر FID فاصله زمانی بین تعامل کاربر با صفحه (مانند کلیک روی یک لینک یا دکمه و یا tap کردن روی یک المان تعاملی) و زمانی است که مرورگر به تعامل کاربر پاسخ می دهد.

First Input Delay

چه امتیاز FID خوب است؟

همان طور که در تصویر بالا نیز مشاهده می کنید، در صورتی که FID صفحه کمتر از 100 میلی ثانیه باشد، صفحه از نظر First Input Delay در وضعیت مطلوبی است و اگر بین 100 تا 300 میلی ثانیه باشد، نیاز به انجام اصلاحات وجود دارد و در نهایت اگر FID بیشتر از 300 میلی ثانیه باشد، صفحه در وضعیت نامطلوبی قرار دارد و بهتر است که هر چه زودتر بررسی و اصلاح گردد.

اهمیت FID :

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

توجه به سرعت در سایت ها:

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

انتظار در سایت برای توسعه دهندگان و کاربران

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

نحوه اندازه گیری FID :

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

گزارش تجربه کاربر از مرورگر کروم Chrome User Experience Report
PageSpeed Insights
گزارش وایتال های وب از کنسول جستجو Search Console (Core Web Vitals report)
مانیتورینگ عملکرد Firebase (بتا) Firebase Performance Monitoring (beta)

جزئیات بیشتر در مورد FID

برنامه نویس وقتی یه برنامه می نویسه فک می کنه برنامه اش رو جوری نوشته که موقع اجرا، تا کاربر یه دستوری میده یا یه تعاملی باهاش داره، اون هم سریع اجرا میشه و جواب میده. اما اگه نظر کاربرا رو بپرسین چی؟! کاربرا معمولاً برعکسش رو میگن! میگن ما یه برنامه واسه گوشیمون نصب کردیم اما هرچی زدیم روش باز نشد و دیگه بیخیالش شدیم. این میشه تجربه کاربری بد!

به طور کلی، تأخیر ورودی وقتی اتفاق میفته که مرورگر داره یه کار دیگه انجام میده و کاربر یه تعاملی داره باهاش. مثلاً یهو می زنه رو یه دکمه یا صفحه رو اسکرول می کنه. اما چون مرورگر سرش شلوغه، فعلاً جواب کاربر رو نمیده و کاربر معطل میمونه. یکی از سرشلوغی های مرورگر معمولاً سر و کله زدن و اجرای یه فایل جاوااسکریپت JavaScript بزرگه که قبلاً توسط برنامه شما بارگذاری شده. وقتی مرورگر داره اون فایل رو اجرا میکنه نمیتونه به هیچکدوم از تعامل های دیگه کاربر جواب بده. چون اول باید کارش با اون فایل جاوااسکریپت تموم بشه، شاید وسط اجرای اون فایل، کدهای جاوااسکریپت بهش بگن مثلاً یه کار دیگه هم باید انجام بدی.تأخیرهای ورودی طولانی اول معمولاً بین First Contentful Paint (FCP) و Time to Interactive (TTI) اتفاق می افتن. چون صفحه ای که داره باز میشه، یه سری از مطالب رو ارائه داده اما هنوز جا داره که کاملاً تعاملی بشه.

محدودیت های FID :

FID فقط “تأخیر” در پردازش رویداد را اندازه گیری می کند و نه زمان پردازش رویداد را اندازه گیری می کند و نه زمانی را که مرورگر برای به روزرسانی UI پس از اجرای برنامه های کنترل رویداد نیاز دارد و این در حالی است که این زمان بر تجربه کاربر تأثیر می گذارد. در صورتی که صفحات شما از چندین درخواست نت ورک به عنوان منبع مانند فایل های css و js استفاده کنند، هنگامی که دانلود کردن از این منابع به اتمام رسید تازه پردازش اصلی در شاخه های اصلی صورت می گیرد.

اگر تعامل Event Listener نداشت؟

FID دلتای بین زمان دریافت یک رویداد ورودی و زمانی که مرورگر بیکاره رو اندازه گیری می کند. این یعنی FID حتی در مواردی که شنونده رویداد یا Event Listener ثبت نشده باشه هم اندازه گیری میشه. دلیل این اندازه گیری هم اینه که خیلی از تعامل‌های کاربر به شنونده رویداد یا Event Listener احتیاج ندارن بلکه فقط لازمه که مرورگر بیکار باشه تا بتونه اون تعامل رو جواب بده.

مثلاً، تمام عناصر HTML ذیل زیر باید صبر کنن تا مرورگر کارش تموم بشه و بعد به درخواست های اونا پاسخ بده:

قسمت های متنی
Checkbox
دکمه های رادیویی Radio Buttons
انتخاب های دراپ داون Dropdown
لینک ها
تگ های معادل اونا میشه: ,

چرا تنها ورودی اولیه ی کاربر برای ما اهمیت دارد؟

مادامی که تاخیر در هر نوع ورودی می تواند تاثیر منفی بر روی تجربه ی کاربری گذارد، توصیه ی اولیه ی ما توجه به FID می باشد. موارد زیر می تواند از مهم ترین دلایل اصلی این توصیه باشد:

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

چه عملکرد هایی جز تعاملات اولیه ی کاربر دسته بندی می شوند؟

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

اگر یک کاربر هیچ تعاملی با سایت شما نداشته باشد چه اتفاقی خواهد افتاد ؟
نمی توان گفت که تمام کاربران به هنگام بازدید از سایت شما با آن تعاملی خواهند داشت و باید دانست که تمامی تعاملات نمی توانند در قالب FID باشند (قبلا به این قضیه به صورت کامل اشاره کردیم ) و تعامل اولیه ی برخی از کاربران در زمان نامناسب، به هنگامی که مرورگر مشغول انجام وظیفه ای دیگر است اتفاق می افتد و برای برخی دیگر از کاربران به هنگام مناسبی اتفاق می افتد و این بدان معناست که برخی از کاربران نمی توانند برای شما ارزش FID داشته باشند و برخی دیگر ارزش کمی دارند و برخی دیگر بسیار ارزشمند برای FID می باشند که ردیابی کردن آنها، تهیه ی گزارش و آنالیز آنها می تواند حائز اهمیت باشد.

سنجش FID در in the field

FID معیاری است که تنها در بخش in the field مورد ارزیابی قرار می گیرد چراکه نیازمند کاربران واقعی و تعامل آنها با صفحات شما می باشد. شما می توانید FID را با ابزار های زیر بسنجید:

Chrome User Experience Report
PageSpeed Insights
Search Console (Core Web Vitals report)
Firebase Performance Monitoring (beta)

ارزیابی FID در جاوا اسکریپت »

import {getFID} from ‘web-vitals’;

// Measure and log the current FID value,
// any time it’s ready to be reported.
getFID(console.log);

آسان ترین راه برای ارزیابی FID با استفاده از کتابخانه ی جاوا اسکریپت در وب ویتال می باشد که تمامی مشقت ارزیابی دستی را با تغییر آن در قالب یک عملکرد کلی به شکل زیر آسان داشته است:

ارزیابی FID به صورت دستی :

برای ارزیابی FID به صورت دستی می توانید از Event Timing API. استفاده نمایید مثال زیر نشان می دهد که چگونه یک PerformanceObserver برای تعامل اولیه وارد شده FID را محاسبه می نماید

// Keep track of whether (and when) the page was first hidden, see:
// https://github.com/w3c/page-visibility/issues/29
// NOTE: ideally this check would be performed in the document
// to avoid cases where the visibility state changes before this code runs.

let firstHiddenTime = document.visibilityState === ‘hidden’ ? 0 : Infinity;

document.addEventListener(‘visibilitychange’, (event) => {

firstHiddenTime = Math.min(firstHiddenTime, event.timeStamp);

}, {once: true});

// Sends the passed data to an analytics endpoint. This code
// uses `/analytics`; you can replace it with your own URL.
function sendToAnalytics(data) {
const body = JSON.stringify(data);
// Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
(navigator.sendBeacon && navigator.sendBeacon(‘/analytics’, body)) ||
fetch(‘/analytics’, {body, method: ‘POST’, keepalive: true});
}

// Use a try/catch instead of feature detecting `first-input`
// support, since some browsers throw when using the new `type` option.
// https://bugs.webkit.org/show_bug.cgi?id=209216
try {
function onFirstInputEntry(entry, po) {
// Only report FID if the page wasn’t hidden prior to
// the entry being dispatched. This typically happens when a
// page is loaded in a background tab.
if (entry.startTime < firstHiddenTime) { const fid = entry.processingStart – entry.startTime; // Disconnect the observer. po.disconnect(); // Report the FID value to an analytics endpoint. sendToAnalytics({fid}); } } // Create a PerformanceObserver that calls `onFirstInputEntry` for each entry. const po = new PerformanceObserver((entryList, po) => {
entryList.getEntries().forEach((entry) => onFirstInputEntry(entry, po));
});

// Observe entries of type `first-input`, including buffered entries,
// i.e. entries that occurred before calling `observe()` below.
po.observe({
type: ‘first-input’,
buffered: true,
});
} catch (e) {
// Do nothing if the browser doesn’t support this API.
}

چگونه FID وب سایت خود را ارتقا دهیم؟

برای آموزش از اینکه چگونه می توانیم به ارتقای FID خود مشغول شویم هم مانند LCP، بهتر است تا Lighthouse را اجرا کرده و تمامی پیشنهادات آن در جهت ارتقا را انجام دهیم. باید دانست که FID معیاری field محور است و این در حالی است که Lighthouse بر روی محور lab عملکرد دارد از این رو راهنمایی هایی که در این خصوص به شما می شود تماما مطابق با بهبود در LAB می باشد ( Total Blocking Time (TBT)). برای اینکه بیشتر از بهبود FID اطلاع کسب کنید می توانید به Optimize FID مراجعه نمایید.

نوشته های مشابه

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *