Какво е FID - First Input Delay

Q: Какво е FID - First Input Delay?

FID (First Input Delay), измepвa вpeмeтo oт мoмeнтa, в ĸoйтo пoтpeбитeлят зa пъpви път взaимoдeйcтвa cъc cтpaницa, дo мoмeнтa, в ĸoйтo бpayзъpът e в cъcтoяниe дa зaпoчнe дa oбpaбoтвa тoвa събитие. Една от метриките за скорост в Core Web Vitals инструмента на Google. Вижте повече в сайта на Ganbox.

UPDATE от 10 май 2023 г: Google обявиха, че през месец март 2024 година, този показател FID ще бъде заменен с нов показател INP - Interaction to Next Paint, за който може да очаквате отделна публикация в блога на Ganbox.

FID (First Input Delay) e чacт oт Соrе Wеb Vіtаlѕ - нaбop oт cпeцифични мeтpиĸи, cвъpзaни cъc скоростта и визуалната стабилност нa yeб cтpaницитe. Gооglе ги cчитa зa изключително съществени зa цялостното потребителско изживяване нa дaдeн yeб caйт и oт мaй 2021 г ca вaжeн paнĸинг фaĸтop.

Соrе Wеb Vіtаlѕ cъдъpжa тpи вaжни мeтpиĸи: Lаrgеѕt Соntеntful Раіnt (LСР), Fіrѕt Іnрut Dеlау (FІD) и Сumulаtіvе Lауоut Ѕhіft (СLЅ), ĸoитo щe разгледаме в пopeдицa oт пyблиĸaции. B тaзи cтaтия подробно щe разглеждаме FID.

Щe нayчитe ĸaĸвo e FID, ĸaĸ се измерва и ĸaĸ дa гo пoдoбpитe, зa дa cтaнe вaшият бизнес caйт пo-бъpз.

First Input Delay (FID) е важна, ориентирана към потребителя метрика за измерване на отзивчивостта на сайта по време на зареждане, тъй като измерва затрудненията, които потребителите изпитват, когато се опитват да взаимодействат със страници, които не реагират. Ниският FID помага да се гарантира, че страницата е достатъчно бърза и използваема.

Всички знаем колко е важно да направим добро първо впечатление. Важно е както при срещи с нови хора, така и първото влизане на потребител във вашия сайт.

В онлайн пространството доброто първо впечатление може да направи разликата между това някой да стане лоялен потребител или да си тръгне и никога повече да не стъпи на сайта ви.

Въпросът е как се създава добро първо впечатление и как да го измервате?

В онлайн пространството първите впечатления могат да са от различен характер - имаме първи впечатления от дизайна и визуалната привлекателност на сайта, така и впечатления за неговата скорост и отзивчивост (responsiveness).

Първите впечатления, които потребителите получават относно скоростта на зареждане на сайта, може да се измери чрез First Contentful Paint (FCP).

Скоростта, с която сайта ви рендира пикселите на екрана е само част от общата картина. Също толкова важно е до колко сайта е готов да отговаря (responsive), когато потребителите се опитват да взаимодействат с елементи от страницата.

FID метриката измерва първото впечатление на вашия потребител за интерактивността и отзивчивостта на вашия сайт.

Какво по-точно е FID?

FID измерва времето от момента, в който потребителят за първи път взаимодейства със страница (т.е. когато кликне върху връзка или натисне бутон), до момента, в който браузърът всъщност е в състояние да започне да обработва събития (event handlers - например натискане на бутон) в отговор на това взаимодействие.

Какво е добър FID резултат?

За да осигурят добро потребителско изживяване, сайтовете трябва да се стремят да имат First Input Delay от 100 милисекунди (една десета част от секундата) или по-малко. За да сте сигурни, че постигате тази цел за повечето от вашите потребители, добър праг за измерване е 95-ия процентил (това означава, че 95% от всички сайтове имат тази или по-добра стойност) от зареждането на страницата, сегментиран на мобилни и настолни устройства.

FID разгледан в детайли

Като разработчици, които пишат код “отговарящ” на събития (responds to events), често приемаме, че нашият код ще проработи незабавно - веднага щом се случи събитието.

Но като потребители, сме се сблъсквали с обратното - зареждаме страница през телефона си, опитваме да взаимодействаме с нея и след като тя не зарежда, оставаме разочаровани.

Като цяло, input delay (известно и като input latency) се случва тогава, когато основната нишка на браузъра (main browser thread) е заета с нещо друго, така че не може да отговори на потребителя.

Най-често браузърът е зает в парсване (обработване) и изпълняване на голям JavaScript файл. Докато прави това, той не може да изпълнява никакви функции обработващи събития (event listener), защото зареждащият се JavaScript, може да му каже да направи нещо съвсем друго и трябва да се изчака да зареди целия файл.

Важно:
FID измерва само „забавянето“ при обработка на събитие. Той не измерва нито времето за обработка на събитието, нито времето, необходимо на браузъра да актуализира потребителския интерфейс след стартиране на event handlers.

Макар че това време влияе върху потребителското преживяване, включването му като част от FID би стимулирало разработчиците да отговарят на събитията асинхронно, което би подобрило метриката, но вероятно би влошило потребителското преживяване.

По-долу вижте защо да вземете предвид само input delay.

На графиката е показано зареждането на типичена страница на уебсайт.

Горната визуализация показва страница, която прави няколко мрежови заявки за ресурси (най-често CSS и JS файлове) и след като тези ресурси биват изтеглени, се обработват в основната нишка.

Сивите блокчета показват времето за изтегляне на ресурса по мрежата. Там където свършва сивото блокче, долу в основната нишка започва изпълнение и обработване на ресурса. Това води до периоди, в които основната нишка е заета за момент, което е обозначено с бежовите блокове със задачи.

Дълги FID обикновено възникват между First Contentful Paint (FCP) и Time to Interactive (TTI), понеже страницата е рендирала част от съдържанието си, но все още не е надеждно интерактивна – не може да обработва събития в резулат на действие на посетителя на страницата. За да можем да илюстрираме как това се случва, добавяме времето за FCP и TTI към визуализацията:

Сигурно сте забелязали, че има доста време (включително трите дълги задачи) между FCP и TTI, и ако потребителя през това се опита да взаимодейства със страницата (напр. кликва върху връзка), ще има забавяне между времето, когато кликването е получено и когато основната нишка е в състояние да отговори.

Помислете какво би се случило, ако потребителят се опита да взаимодейства със страницата в началото на най-дългата по време задача:

Тъй като действието на потребителя се извършва, по време в което браузърът изпълнява задача, той трябва да изчака, докато приключи със задачата, преди да може да отговори на извършеното действие. Времето на изчакване, е FID стойността за този потребител на тази страница.

В примера, потребителят просто е взаимодействал със страницата в началото на най-натоварения период на основната нишка. Ако потребителят е взаимодействал със страницата само миг по-рано (по време на неактивния период между две бежови блокчета - idle period), браузърът би могъл да отговори веднага.

Тази разлика в input delay-а подчертава важността от внимателно разглеждане на разпределението на FID стойностите при отчитане на метриката.

Какво ако едно взаимодействие няма функция за обработка на събития (event listener)?

FID измерва разликата между получаването на input event-а и онзи момент, в който основната нишка е в неактивно състояние (next idle).

Това означава, че FID се измерва дори в случаите, когато липсва функция за обработка на събития (event listener).

Причината е, че много потребителски взаимодействия не изискват event listener, но изискват основната нишка да е неактивна, за да проработи ефективно.

Например: Следните HTML елементи трябва да изчакат изпълнението на текущите задачи в основната нишка, преди да отговорят на потребителските взаимодействия:

текстови полета, чекбоксове и радио бутони на уеб форма (<input>, <textarea>)
падащи списъци на уеб форма (<select>)
линкове (<a>)

Защо да вземем предвид само FID?

Въпреки че закъснението, от който и да е тип input може да доведе до лошо потребителско изживяване, ние предимно препоръчваме измерване на FID по няколко причини:

FID е първото впечатление на потребителя за отзивчивостта на вашия сайт, а първите впечатления са от решаващо значение за формирането на цялостното впечатление на посетителя за качеството и надеждността на сайта.
Най-големите проблеми с интерактивността, които се забелязват тези дни, възникват по време на зареждане на страницата. Ето защо фокусът трябва да е върху подобряването на сайта за първото взаимодействие на потребителя с него. Това ще окаже огромно влияние върху подобряването на цялостната интерактивност на уебсайтовете.
Има разлика между first input delays и slow input delays. Първите се сучват по време на първоначалното зареждане на страницата, а вторите могат да възникнат след като страницата е била напълно заредена. Препоръките за това как сайтовете да подобрят FID (разделяне на кода на по-малки файлове, зареждане на по-малко JavaScript предварително и т.н.) не са непременно същите за подобряване на закъсненията (slow input delays) след зареждане на страницата. Като разглеждаме отделно тези параметри, ще можем да предоставим по-конкретни насоки за ефективност на уеб разработчиците.

Какво се счита за FID?

FID е показател, който измерва реакцията на страницата (page responsiveness) по време на зареждане. Като такъв той се фокусира само върху “входни събития” причинени от действия като кликове и натискания на клавиши.

Други взаимодействия, като скролване и зуумването, представляват продължителни действия и имат напълно различни ограничения (също така браузърите често могат да скрият латентността си, като ги изпълняват в отделна нишка).

Казано по друг начин, FID се фокусира върху R (responsiveness - отзивчивост) в модела RAIL за измерване на ефективност, докато скролирането и зуумването са свързани с A (анимация), и техните експлоатационни качества трябва да се оценяват отделно.

Какво ще стане, ако потребителят никога не взаимодейства с вашия сайт?

Не всички потребители ще взаимодействат с вашия сайт всеки път, когато го посетят. И не всички взаимодействия са свързани с FID (както беше споменато в предишния раздел).

В допълнение, първите взаимодействия на някои от потребителите ще се случват в лоши моменти (когато основната нишка е заета за продължителен период от време), докато първите взаимодействия на други потребители ще се случват в добри моменти (когато основната нишка е напълно неактивна).

Това означава, че някои потребители няма да имат FID стойности, други ще имат ниски FID стойности, а трети вероятно ще имат високи FID стойности.

Начинът, по който проследявате, докладвате и анализирате FID, вероятно ще бъде различен от начина, по който сте свикнали да измервате други метрики. Следващият раздел обяснява как най-добре да направите това.

Защо да вземем предвид само FID?

Както бе споменато по-горе, FID измерва само забавянето при обработка на събития. Той не измерва нито времето за обработка на събитието, нито времето, необходимо на браузъра да актуализира потребителския интерфейс след стартиране на манипулатори на събития (event handlers).

Въпреки че това време е важно за потребителя и влияе на потребителското преживяване, то не е включено в тази метрика, тъй като може да стимулира разработчиците да използват заобикалящи решения, които всъщност да влошат преживяването - тоест, те биха могли да изкривят логиката си за обработка на събития в асинхронен callback (чрез setTimeout () или requestAnimationFrame ()), с цел да я отделят от задачата, свързана със събитието. Резултатът ще бъде подобрение в метричната оценка, но по-бавно зареждане от гледна точка на потребителя.

Въпреки това, докато FID измерва само забавената част от латентността на събитието, разработчиците, които искат да проследят повече от жизнения цикъл на събитието, могат да го направят, като използват Event Timing API

Как се измерва FID

За разлика от другите метрики, FID е показател, който може да бъде измерен само със събиране на полеви данни, тъй като изисква реален потребител да взаимодейства с вашата страница. Можете да измерите FID със следните инструменти.

Инструменти зa измерване нa пoлeви дaнни

Πpи тoзи вид измерване дaннитe ce cъбpaни oт бpayзъpитe нa посетителите нa вaшия caйт. Toвa измерване e мнoгo пo-тoчнo, нo изиcĸвa caйтът дa бъдe cилнo посещаван, зa дa мoжe бъpзo дa се съберат пoвeчe и пo-тoчни дaнни.

Eтo няĸoлĸo инструмента зa пoлeви дaнни:

Измерване на FID в JavaScript

Зaб. Taзи тoчĸa би билa пoлeзнa зa yeб програмисти, aĸo нe се занимавате c програмиране в ЈаvаЅсrірt мoжe дa я пропуснете и дa преминете ĸъм тoчĸaтa "Kaĸ дa пoдoбpим FID нa caйтa?" дoлy, зa дa разберете ĸaĸ дa пoдoбpитe скоростта нa caйтa cи.

За да измерите FID в JavaScript, можете да използвате API за синхронизиране на събития - Event Timing API. Следващият пример показва как да създадете PerformanceObserver, който прослушва записите за first-input и ги записва в конзолата:

Предупреждение: Този код показва как да регистрирате first-input записи в конзолата и да изчислите закъснението им. Измерването на FID в JavaScript обаче е по-сложно. Вижте по-долу за подробности:

В горния пример стойността на закъснението на first-input записите се измерва, като се вземе делтата между startTime и ProcessingStart timestamps (клеймо за време). В повечето случаи това ще бъде стойността на FID. Обаче не всички first-input записи са валидни за измерване на FID.

Следващият раздел изброява разликите между това, което API отчита и как се изчислява метриката.

Разлики между метриката и API-то

API ще изпраща first-input записи за страници, заредени във фонов раздел, но тези страници трябва да бъдат игнорирани при изчисляване на FID.
API също ще изпраща first-input записи, ако страницата е била на заден план (backgrounded) преди първото въвеждане, но тези страници също трябва да бъдат игнорирани при изчисляване на FID (те се вземат предвид само ако страницата е била на преден план през цялото време).
API не отчита записите за first-input, когато страницата се възстановява от back/forward cache, но FID трябва да се измерва в тези случаи, тъй като потребителите ги възприемат като отделни посещения на страницата.
API не отчита first-input, които възникват в iframes, но ако целта е точно измерване на FID, трябва да бъдат взети предвид.

Вместо да запомнят всичко това, разработчиците могат да използват web-vitals JavaScript library за измерване на FID, където подробно е обяснено всичко споменато по-горе:

Можете да се обърнете към изходния код на getFID за подробно обяснение по измерването на FID в JavaScript.

Анализ и докладване на данни от FID

Поради очакваните отклонения в стойностите на FID е изключително важно, когато отчитате FID, да погледнете разпределението на стойностите и да се съсредоточите върху по-високите процентили.

Докато изборът на процентил за всички прагове на Core Web Vitals е 75-ият, по-специално за FID все още силно препоръчваме да се погледне 95–99-ия процентил, тъй като те ще съответстват на лошото първо преживяване, което потребителите имат с вашия сайт и ще ви покаже нещата, които се нуждаят от най-голямо подобрение.

Това е вярно, дори ако сегментирате отчетите си по категория или тип устройство. Например, ако изготвяте отделни отчети за настолни компютри и мобилни устройства, стойността на FID, която ви е най-важна за десктопа, трябва да бъде 95-ия-99-ия процентил на потребителите на настолни компютри. Стойността на FID, която ви интересува най-много на мобилни устройства, трябва да бъде 95-ия до 99-ия процентил на мобилните потребители.

Как да подобрим FID на сайта?

За да научите как да подобрите FID за конкретен сайт, можете да изпълнитe измерване чрез Lighthouse и да обърнете внимание на всички специфични възможности, които анализът предлага.

Докато FID е “полева” метрика (а Lighthouse е лабораторен метричен инструмент), насоките за подобряване на FID са същите като тези за подобряване на лабораторната метрика TBT - Total Blocking Time.

Съвети за подобряване на FID - First Input Delay

Открийте блокиращи рендирането JavaScript и CSS и ги поправете (подобно на LCP);
Разделете големите и времеотнемащи JavaScript задачи на по-малки задачи. Този подход позволява между тези малки задачи да бъдат обработвани и рендирани други елементи от страницата;
Премахнете излишните плъгини и софтуерни библиотеки, които се зареждат, но не се използват;
Премахнете или намалете най-големите елементи на страницата. Някои елементи може да не се зареждат изобщо при отваряне на сайта от мобилно устройство;
Премахнете или ограничете зареждането на ресурси от трета страна (реклами, броячи като Google Analytics, чат бот, Facebook елементи, външни шрифтове и др.).

За да проучите в подробности техниките за подобряване на LCP, прочетете статията Оптимизиране на FID (на английски).

Допълнителни ресурси относно индивидуалните техники за изпълнение, които ще подобрят FID:

Ето и едно видео на български за FID от колегите от уеб студио Creativiso