FID بخشی مهم در وب ویتال ها

وقتی صحبت از تجربه کاربری در سئو وب سایت ها در میان است، مباحث Core Web Vital گوگل همه چیز را برای ما روشن می کنند. کور وب ویتال مجموعه ای از مفاهیم و معیارهایی است که در حوزه UX برای گوگل اهمیت دارد. FID نیز یکی از اعضای این مجموعه و فاکتوری برای سنجش میزان تعاملی بودن وب سایت هاست. اما اگر مشتاقید دقیق تر بدانید که FID چیست و با راه های ارتقای آن نیز آشنا شوید، تا انتهای این راهنما همراه ما باشید.

FID چیست؟

FID مخفف عبارت First Input Delay است که به آن “زمان تأخیر ورودی اول” می گوییم. این فاکتور به “میزان ریسپانسیو بودن وب سایت نسبت به سرعت لود” اشاره دارد. برای مثال وقتی که یک کاربر روی یک لینک در سایت شما کلیک می کند، زمانی طول می کشد تا کاری که کاربر خواسته (مثلاً باز شدن صفحه جدید) انجام شود و کاربر بتواند با هدفی که داشته تعامل برقرار کند. به این زمان FID می گویند. بدیهی است که FID کمتر، به معنی تجربه کاربری بهتر وب سایت است.

دلیل اهمیت FID چیست؟

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

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

گوگل کار را برایمان راحت کرده و مهم ترین فاکتورهای UX را در Core Web Vitals خود جمع کرده است. FID هم که یکی از فاکتورهای کور وب ویتال است، ازجمله شاخص هایی است که می تواند وضعیت تجربه کاربری سایت شما را تعیین کند.

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

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

نکته: اگر با Core Web Vital گوگل آشنا نیستید، می توانید سری به مقاله “کور وب ویتال چیست و چه اهمیتی در بهینه سازی وب سایت ها دارد؟” بزنید.

امتیاز خوب برای FID چند است؟

حالا که می دانیم FID چیست، مشتاقیم بدانیم که FID ایدئال چه قدر است؟ یعنی کاربر چه قدر صبر می کند تا نتیجه اقدامی که کرده (مثل کلیک روی یک لینک) را ببیند؟

طبق استانداردهای گوگل، FID ایدئال باید کمتر از ۱۰۰ میلی ثانیه باشد. در نگاهی دقیق تر، اگر ۷۵% سایتتان در صفحه دسکتاپ یا موبایل، در ۱۰۰ میلی ثانیه نشان داده شود، این عدد می تواند ایدئال باشد. اما اگر FID سایتتان در حد ۳۰۰ میلی ثانیه است، این یک نشانه از ضعیف بودن سایتتان است. بنابراین باید هر چه سریع تر فکری برای ارتقای آن کنید.

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

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

منظور از تعامل ناموفق باز نشدن سایت نیست! بلکه منظور این است که سایت بتواند در زمانی در حد صُدم ثانیه با کاربر تعامل داشته باشد. حالا این تعامل می تواند نمایش 25% از سایت باشد یا 75% از آن یا حتی بیشتر. اما اگر زمان از 100 میلی ثانیه بگذرد و چیزی از سایت دستگیر کاربر نشود، او احساس تعامل نخواهد داشت. بنابراین “انتظار بیش از حد” همان چیزی است که می تواند یک سایت هرچند جذاب را زمین بزند.

چرا سرعت لود در صفحات آنطور که مد نظر ماست اتفاق نمی افتد؟

گاهی سایتمان را بررسی می کنیم و می بینیم که به ظاهر مشکلی برای تعامل با سرعت بالا نداریم؛ اما در عمل FID پایینی داریم. خب دلیل اصلی تأخیر در لود صفحات این است که مرورگر مشغول انجام کار دیگری است! حالا این سؤال پیش می آید که آیا می توان کنترلی بر این سرعت داشت یا خیر؟ در پاسخ باید گفت بله، کافی است جایی را که مرورگر را درگیر کرده پیدا کنید.

برای مثال گاهی ممکن است مرورگر مشغول تجزیه و اجرای یک فایل بزرگ JavaScript باشد که توسط اپلیکیشن شما بارگذاری شده است. در این صورت زمان کافی برای اجرای سریع صفحات و FID بالا را نخواهد داشت.

محدودیت های FID چیست؟

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

وقتی صفحات شما از چندین درخواست شبکه به عنوان منبع مانند فایل های CSS  و JS استفاده کنند، هنگامی که دانلود کردن از این منابع به اتمام برسد، تازه پردازش اصلی در شاخه های اصلی صورت می گیرد. این که زمان این فرآیندها چه قدر باشد هم فاکتوری است که نقش مهمی در ارزیابی UX سایت ها دارد. اما FID کاری به این زمان ها نداشته و فقط میزان تأخیر را اندازه گیری می کند.

چرا فقط ورودی اولیه کاربر برای ما اهمیت دارد؟

FID همانطور که از نامش پیداست (First Input Delay) به اولین تأخیر در ورودی اشاره دارد. یعنی FID می گوید وقتی کاربر “اولین” فعالیت را انجام داد (مثل کلیک روی لینک)، اجرای این درخواست چه قدر تأخیر داشت. پس FID با تأخیر در اجرای درخواست های بعدی کاری ندارد. اما دلیل این امر چیست؟

بدون شک تأخیر در اجرای تمام ورودی ها (چه ورودی اول و چه ورودی های بعدی) تأثیری منفی در UX دارد؛ اما طبق استانداردهای گوگل این اولین تأخیر است که می تواند کاربر را برای ادامه پیمایش مشتاق یا دلسرد کند.

به عبارت دیگر، تأخیر اولیه در تعاملات، درواقع یک دید اولیه از سایت را به کاربر می دهد. اگر این تأخیر کم باشد، کاربر اینطور تصور می کند که این یک سایت سریع است که ممکن است گاهی هم کُند شود. اما اگر اولین تأخیر زیاد باشد، کاربر به این نتیجه می رسد که این سایت کُند است که شاید گاهی هم سریع اجرا شود. پس “اولین دید” کاربر، بسیار مهم تر از سایر تجربیاتی است که در وب سایت کسب می کند.

نکته:

راه حل هایی که برای کاهش تأخیر در تعامل اولیه کاربر یا همان FID وجود دارد) مانند تقسیم کد، بارگیری کمتر جاوا اسکریپت از قبل و …) لزوماً باعث کاهش تأخیر لود صفحات در مراحل بعدی نمی شوند.  یعنی شاید سایت شما FID ایدئالی داشته باشد و اولین درخواست کاربر را سریع اجرا کند؛ اما در لود کردن صفحات بعدی یا اجرای درخواست های بعدی کُند باشد. در چنین شرایطی باید با تفکیک معیارها، به هر یک از صفحات و مشکلات احتمالی آنها رسیدگی کنیم.

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

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

اگر یک کاربر هیچ تعاملی با سایت نداشته باشد چه اتفاقی می افتد؟

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

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

روش های سنجش FID چیست؟

برای سنجش FID روش های مختلفی داریم. در ادامه رایج ترین راه های ارزیابی FID را باهم مرور می کنیم.

سنجش FID در in the field

بسیاری از فاکتورهای سئو، مثل LCP (که یکی دیگر از فاکتورهای کور وب ویتال است)، در دو حالت In The Field و In the Lab قابل ارزیابی هستند.  در روش In The Field، معیار مربوطه را دقیقاً در محیط واقعی خود سایت اندازه می گیریم. اما در روش In the Lab، این معیار را در یک محیط شبیه سازی شده ارزیابی می کنیم.

حالا نکته مهم این است که FID معیاری است که اغلب در حالت In The Field ارزیابی می شود. چراکه این فاکتور نیازمند کاربران واقعی و تعامل آنها با صفحات است.

ابزارهای اندازه گیری FID در حالت In The Field شامل موارد زیر هستند:

• گزارش Chrome User Experience
• ابزار Pagespeed Insights
• گزارش Core Web Vitals report در ابزار Google Search Console
• سرویس Firebase Performance Monitoring (Beta)

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

آسان ترین راه برای ارزیابی 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 چیست، چطور این پارامتر را تا جای ممکن ارتقا دهیم؟ در ادامه 6 روش را می بینیم که به کاهش زمان تأخیر ورودی اول کمک می کنند.

1/  کدهای CSS و جاوا اسکریپت را بهینه کنید

فایل های CSS و JS بخش اعظمی از وب سایت ها را به خود اختصاص داده اند. به همین دلیل هم مهم ترین راه بهینه سازی FID، کوچک کردن فایل های CSS و JS است.

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

اگر سایتتان وردپرسی است، می توانید از افزونه های فشرده سازی HTML، CSS و جاوا اسکریپت استفاده کنید. این افزونه با چند کلیک کل مسیر را برایتان طی می کنند.

2/ فرآیندهای طولانی جاوا اسکریپت را به کارهای کوچک تر تقسیم کنید

اگر می خواهید بدانید که یکی از بزرگ ترین موانع FID چیست، باید به فرآیندهای طولانی JS اشاره کنیم. کارهای طولانی جاوا اسکریپت، رشته اصلی لودینگ سایت را اشغال کرده و به ریسپانسیو بودن سایتتان آسیب هایی جدی می زنند. بنابراین شکستن کارهای بزرگ جاوا اسکریپت، می تواند راهکاری عالی برای آزاد کردن رشته اصلی و تسریع اجرای درخواست های کاربر باشد.

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

3/ تأثیر کدهای شخص ثالث و اسکریپت های غیر ضروری را کاهش دهید

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

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

4/ محتواها را به صورت استاتیک و سمت سرور ایجاد کنید

هدف اصلی ما در ارتقایFID  چیست؟ این که این است که میزان داده ای را که باید در سمت کاربر پردازش شود را به حداقل برسانیم. پس می توانیم محتواهای وب سایت را تا جای ممکن به صورت استاتیک و سمت سرور ایجاد کنیم. با این کار مقدار کاری را که باید توسط مرورگر انجام شود را کاهش می دهیم.

5/ از Web Workerها استفاده کنید

به کمک Web Workerها می توانید بعضی از کارهای رشته اصلی را به این دستیارها محول کنید تا بار کاری که روی این رشته است کم شود. وب ورکرها این امکان را به شما می دهند که بعضی از کدهای جاوا اسکریپت را برای اجرا به Worker Thread بسپارید تا رد پس زمینه و در یک رشته مجزا انجام شوند. در این صورت کاری که روی دوش رشته اصلی است کم شده و FID نیز کاهش پیدا می کند.

بر فعال کردن وب ورکرها در وب سایت خود می توانید از کتابخانه های زیر استفاده کنید:

• Comlink
• Workway
• Workerize

6/ اتکا بر واکشی داده های آبشاری را کاهش دهید

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

در آخر

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

اگر برای سنجش یا ارتقای FID وب سایت خود به کمک و راهنمایی نیاز دارید، می توانید از خدمات مشاوره سئو ریراکو استفاده کنید. مشاورین سئوی ما منتظرند تا با تکیه بر تجربیات خود، وب سایت شما را کاربرپسندتر و جذاب تر از هر زمان دیگری کنند.

منبع: web