در مبحث وب ویتال و برای ارتقای سایت، یکی از معیار های مهم و کاربر محور، FID می باشد که مخففی از عبارت First Input Delay می باشد. که در آن میزان ریسپانسیو بودن سایت نسبت به میزان سرعت لود، مورد سنجش قرار می گیرد و تعاملات کاربران با سایت بررسی می شوند. برای مثال هنگامی که یک کاربر بر روی یک لینک در سایت شما کلیک می کند و یا دکمه ای از سایت شما را می فشارد از زمانی که این عمل را انجام می دهد تا زمانی که عمل انجام شده برای کاربر به نمایش در آورده شود مدت زمان را کاربر باید منتظر بماند که به آن FID می گویند. باید دانست که FID می تواند به صورت مستقیم بر تجربه ی کاربری تاثیر گذارد از این رو نمی توان آن را بی اهمیت شمرد.
FID در واقع زمان را از لحظه ی شروع تعامل کاربر در صفحه ای از سایت شما اندازه گیری می کند تا زمانی که کاربر به معنای واقعی به خواسته ی خود که حاصل از تعامل اولیه با سایت بوده است دسترسی پیدا کند. برای مثال اگر کاربر بر روی یکی از لینک های شما کلیک کرده باشد، از لحظه ی کلیک کردن تا هنگامی که صفحه ی حاصل از کلیک کردن برای کاربر به نمایش در آید، زمانی است که توسط FID مورد اندازه گیری قرار می گیرد.
تا حالا شده قرار مهمی داشته باشید و یا جلسه ی کاری با افرادی داشته باشید که تا به حال آنها را ندیده اید؟ حتما اگر شما هم این تجربه را داشته باشید تمام تلاش خود را می کنید تا بتوانید از لحاظ ظاهری و رفتاری تاثیر مثبتی برای دیدار اول بر آن افراد که با آنها قرار ملاقات دارید، گذارید. در سایت هم ما باید دقیقا همین کار را کنیم و تمام تلاش خود را داشته باشیم تا تاثیر مثبتی بر کاربرانی که برای بار اول وارد سایت ما شده اند گذاریم. چرا که با توجه به همین اصل می توانیم کاربران را نسبت به خودمان وفادار کنیم و باعث شویم تا به سرعت سایت ما را رها نکنند. حال سوال پیش می آید که چه فاکتور هایی می تواند بر دید اولیه ی کاربران تاثیر گذار باشد؟ در ادامه پاسخ سوال شما را خواهیم داد.
بدون شک فاکتورهای زیادی برای موفق بودن در تاثیر گذاری اولیه ی کاربر، دخیل هستند. سرعت سایت می تواند همان قدری برای کاربر مهم باشه که طراحی سایت و ظاهر اولیه سایت اهمیت دارد. پس شما به عنوان کسی که می خواهید حضوری ماندگار در فضای آنلاین داشته باشید لازم است که تمامی وجه های ممکن در این خصوص را در نظر گیرید. باید گفت که اطلاع از اینکه چه میزان از کاربران نسبت به طراحی سایت شما رضایت داشته اند کار دشواری است و این در حالی است که درک اینکه کاربران به نسبت سرعت سایت شما تا چه میزان رضایت داشته اند اصلا کار دشواری نیست.
امتیاز خوب برای FID چند است؟
برای اینکه تجربه ی کاربری مناسبی در سایت داشته باشیم، لازم است تا FID مدت زمانی کمتر از ۱۰۰ میلی ثانیه را نشان دهد و نشان دادن مدت زمانی در حدود ۳۰۰ میلی ثانیه نشان از ضعیف بودن سایت دارد در نتیجه شما لازم است تا هرچه سریع تر اقداماتی برای بهبود سایت بر روی سایت اعمال دارید. می توان گفت که نمایش ۷۵ درصدی سایت در صفحه ی دسکتاپ و یا موبایل کاربر در ۱۰۰ میلی ثانیه می تواند امتیاز خوبی در خصوص FID محسوب شود.
اگر شما یک توسعه دهنده ی وب باشید که کدهایی برای پاسخ به رویداد ها در سایت می نویسند معمولا انتظار دارید که کدها به محض اینکه رویداد در سایت رخ داد نقش خود را اجرا دارند و این انتظار برای شما زیاد آزار دهنده نخواهد بود، اما اگر یک کاربر معمولی باشید به طور معمول یک صفحه از وب را در صفحه نمایش خود بارگیری می کنید و اگر تعامل ناموفقی با صفحه داشته باشید از انتظار خسته می شوید، چون هیچ چیزی برای شما به نمایش گذاشته نمی شود.
چرا سرعت لود در صفحات آنطور که مد نظر ماست اتفاق نمی افتد؟
به طورکلی تاخیر در لود صفحات، به این دلیل اتفاق می افتد که مرورگر شما مشغول به انجام وظیفه ای دیگر می باشد. حال سوال پیش می آید که آیا می توان کنترلی بر این سرعت داشت یا خیر؟ در پاسخ باید گفت بله، شما تنها باید بدانید که کجای کار شما دارای مشکل می باشد و سبب کاهش سرعت لود نسبت به تعاملات کاربران شده است. برای مثال یکی از دلایل عمده این اتفاق این است که ممکن است مرورگر مشغول تجزیه و اجرای یک فایل بزرگ JavaScript باشد که توسط برنامه (اپ) شما بارگذاری شده است.
FID فقط “تأخیر” در پردازش رویداد را اندازه گیری می کند و نه زمان پردازش رویداد را اندازه گیری می کند و نه زمانی را که مرورگر برای به روزرسانی UI پس از اجرای برنامه های کنترل رویداد نیاز دارد و این در حالی است که این زمان بر تجربه کاربر تأثیر می گذارد. در صورتی که صفحات شما از چندین درخواست نت ورک به عنوان منبع مانند فایل های css و js استفاده کنند، هنگامی که دانلود کردن از این منابع به اتمام رسید تازه پردازش اصلی در شاخه های اصلی صورت می گیرد.
چرا تنها ورودی اولیه ی کاربر برای ما اهمیت دارد؟
مادامی که تاخیر در هر نوع ورودی می تواند تاثیر منفی بر روی تجربه ی کاربری گذارد، توصیه ی اولیه ی ما توجه به FID می باشد. موارد زیر می تواند از مهم ترین دلایل اصلی این توصیه باشد:
FID تنها معیاری برای اندازه گیری ریسپانسیو بودن یک صفحه در مدت زمان لودینگ است، پس تنها بر رویداد های صورت گرفته در قالب عملکرد هایی مانند کلیک کردن و فشردن دکمه ها تمرکز خواهد داشت و تعاملات دیگر مانند اسکرول کردن و زوم کردن که عمل هایی مدت دار هستند جزء این دسته قرار نمی گیرند.
نمی توان گفت که تمام کاربران به هنگام بازدید از سایت شما با آن تعاملی خواهند داشت و باید دانست که تمامی تعاملات نمی توانند در قالب FID باشند (قبلا به این قضیه به صورت کامل اشاره کردیم ) و تعامل اولیه ی برخی از کاربران در زمان نامناسب، به هنگامی که مرورگر مشغول انجام وظیفه ای دیگر است اتفاق می افتد و برای برخی دیگر از کاربران به هنگام مناسبی اتفاق می افتد و این بدان معناست که برخی از کاربران نمی توانند برای شما ارزش FID داشته باشند و برخی دیگر ارزش کمی دارند و برخی دیگر بسیار ارزشمند برای FID می باشند که ردیابی کردن آنها، تهیه ی گزارش و آنالیز آنها می تواند حائز اهمیت باشد.
سنجش FID در in the field
FID معیاری است که تنها در بخش in the field مورد ارزیابی قرار می گیرد چراکه نیازمند کاربران واقعی و تعامل آنها با صفحات شما می باشد. شما می توانید 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 به صورت دستی می توانید از 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 خود مشغول شویم هم مانند LCP، بهتر است تا Lighthouse را اجرا کرده و تمامی پیشنهادات آن در جهت ارتقا را انجام دهیم. باید دانست که FID معیاری field محور است و این در حالی است که Lighthouse بر روی محور lab عملکرد دارد از این رو راهنمایی هایی که در این خصوص به شما می شود تماما مطابق با بهبود در LAB می باشد ( Total Blocking Time (TBT)). برای اینکه بیشتر از بهبود FID اطلاع کسب کنید می توانید به Optimize FID مراجعه نمایید.
منبع: https://bit.ly/2FhwJzs
وبلاگ مجله تکنولوژی
