First Input Delay (FID): Ce este și cum să vă optimizați site-ul pentru aceasta

Oferirea unei experiențe rapide vizitatorilor este esențială pentru succesul site-ului dvs. Cu toate acestea, există mai multe moduri de a evalua cât de bine face asta. Una dintre ele este First Input Delay (FID), care măsoară timpul în milisecunde (ms) între momentul în care un utilizator interacționează pentru prima dată cu site-ul dvs. și momentul în care browserul său răspunde la acțiunea respectivă.

În această postare, vom explica ce este FID și cum să îl măsurăm. De asemenea, vom discuta despre ce este un scor FID bun și vă vom prezenta cum puteți să-l optimizați. În cele din urmă, vom încheia câteva întrebări frecvente. Să începem!

Abonați-vă la canalul nostru Youtube

Ce este prima întârziere de intrare (FID)?

După cum am menționat, FID (denumit uneori și „latență de intrare”) este măsurarea timpului în ms care are loc între momentul în care un vizitator interacționează cu site-ul dvs. și momentul în care browserul său răspunde. Este o valoare esențială inclusă în Raportul privind experiența utilizatorului Chrome. În plus, este unul dintre nucleele Web Vitals. Acestea sunt valorile pe care Google le folosește pentru a determina calitatea UX-ului site-ului dvs. (și, la rândul său, rangul său de pagină).

În acest context, introducerea sau interacțiunea se poate referi la o gamă largă de acțiuni. De exemplu, ar putea include clic pe un link, apăsarea unui buton sau bifarea unei casete de selectare. Cu toate acestea, FID nu se aplică atunci când un utilizator derulează sau se apropie de o pagină, deoarece acestea nu necesită un răspuns nou între browserul lor și site-ul dvs. web.

Câțiva factori diferiți pot afecta această valoare. Viteza și puterea de procesare a dispozitivului utilizatorului pot avea un impact. Nu poți controla asta. Cu toate acestea, puteți controla dimensiunea și complexitatea paginii web. Mai precis, puteți controla cât de mult JavaScript utilizează site-ul dvs. web. De exemplu, dacă aveți multe imagini sau scripturi care se încarcă într-o ordine aleatorie, acesta poate încetini întregul proces și poate întârzia răspunsul de la utilizator.

Chiar dacă site-ul dvs. are un FCP și LCP solid, prima întârziere de intrare ar putea fi suficient de lungă pentru a le face să sară. Pentru ei se poate simți ca și cum site-ul dvs. nu răspunde și este lent.

Pe scurt, FID este utilizat pentru a determina cât de receptivă este o pagină în timp ce se încarcă. Poate evident, cu cât acest proces este mai rapid, cu atât mai bine. Prin urmare, este important să știți cum să măsurați FID-ul site-ului dvs. și cum să vă îmbunătățiți scorul.

Cum se măsoară FID

Înainte de a începe optimizarea scorului FID, este esențial să știți unde se află în prezent. În mod ideal, pentru a oferi o experiență solidă de utilizare (UX), veți dori ca scorul dvs. FID să fie sub 100 ms.

Un scor de 100 ms sau mai puțin este considerat bun , în timp ce un scor între 100 și 300 ms are loc de îmbunătățit. Un scor FID peste 300 ms este slab .

Pentru a vă măsura FID, puteți utiliza Google PageSpeed ​​Insights:

Acesta este un instrument gratuit de la Google care testează performanța site-ului dvs. în mai multe moduri. Cu acesta, puteți observa o varietate de valori cheie, inclusiv FID.

Rețineți că FID poate fi uneori dificil de măsurat. Asta pentru că necesită introducerea de către utilizator. Cu toate acestea, atâta timp cât ați avut recent interactivitatea utilizatorului pe site-ul dvs., ar trebui să puteți găsi această valoare prin PageSpeed ​​Insights.

Pentru a începe, introduceți adresa URL a site-ului dvs. în câmpul de text și faceți clic pe butonul Analizați . Odată ce instrumentul a fost analizat pagina dvs., acesta vă va aduce la rezultate și va oferi site-ului dvs. un scor general:

Puteți găsi metrica First Input Delay (FID) în secțiunea Field Data . În secțiunea Oportunități ceva mai mică, puteți găsi sugestii pentru optimizarea paginii și a scorurilor.

De asemenea, dorim să menționăm că Google denotă aceste scoruri ca date de câmp . Aceasta înseamnă că informațiile se bazează pe interacțiunea reală a utilizatorului, nu pe teste simulate (care se numesc date de laborator sau se găsesc prin intermediul instrumentelor de laborator ). FID este destul de subiectiv și strâns legat de interacțiunile reale ale utilizatorului, deci este important să vă asigurați că utilizați date de câmp. Simulările pot explica atât de mult.

Cum să vă optimizați scorul FID

Acum că înțelegeți ce este un scor FID și cum îl puteți măsura, este timpul să vă uitați la modul în care îl puteți îmbunătăți de fapt. Mai jos sunt câteva sfaturi și strategii pe care le puteți utiliza pentru a reduce timpul de întârziere a primei intrări.

Optimizați și reduceți codul CSS și JavaScript

Una dintre cele mai bune modalități de a vă optimiza scorul FID este prin comprimarea și optimizarea codului CSS și JavaScript. Dacă faceți acest lucru, puteți reduce dimensiunile fișierelor și, la rândul dvs., puteți îmbunătăți capacitatea de reacție. Eliminând caractere, spații și întreruperi de linie inutile, reduceți dimensiunea fișierului, ceea ce, la rândul său, mărește viteza paginii și reduce numărul de procese pe care un browser trebuie să le gestioneze. Astfel, aveți un FID mai mic.

Utilizatorii Divi ar trebui să știe, de asemenea, că tema minimizează automat HTML, JavaScript și CSS de la început. Activarea simplă a temei va comprima tot acest cod, astfel încât FID-ul dvs. să fie într-o poziție mai bună decât înainte.

Dacă nu sunteți utilizator Divi, aveți câteva opțiuni pentru a vă minimiza codul. O abordare simplă și rapidă pentru a face acest lucru este utilizarea unui instrument online, cum ar fi Minify Code. Copiați codul dvs. de dimensiuni complete, lipiți-l pe site, site-ul îl micșorează, apoi copiați / lipiți rezultatele înapoi pe site-ul dvs.

De asemenea, puteți minimiza codul manual folosind un editor de cod, deși acest lucru poate fi puțin mai complicat. Cu toate acestea, dacă aveți experiență în lucrul cu codul, această metodă vă poate oferi mai mult control.

O altă strategie este aceea de a utiliza un plugin precum Autoptimize sau W3 Total Cache (sau orice alt număr).

Aceasta poate fi o soluție viabilă pentru utilizatorii WordPress dacă nu aveți experiență în cod și doriți să implementați această modificare pe site-ul dvs. automat. În plus, aceste pluginuri oferă ambele o varietate de caracteristici axate pe optimizare, cum ar fi stocarea în cache a imaginilor și a conținutului.

Separați sarcinile JavaScript lungi în cele mai mici

Sarcinile lungi tind să blocheze firul principal și pot duce la umflarea JavaScript, afectând capacitatea de reacție a site-ului dvs. Pentru a preveni acest lucru și pentru a vă îmbunătăți scorul FID în acest proces, puteți încerca să împărțiți aceste sarcini în altele mai mici, asincrone.

Una dintre cele mai eficiente modalități de a face acest lucru este împărțirea codului. Pe scurt, aceasta este o tehnică utilizată pentru a sparge și încărca numai bucăți de cod mai mici și necesare, mai degrabă decât un fișier mare dintr-o dată. Puteți face acest lucru folosind un instrument precum Webpack.

Utilizatorii Divi câștigă un avantaj și în acest domeniu, deoarece actualizarea de performanță mare separă temele bibliotecii JavaScript mari și le încarcă doar după cum este necesar. Acest lucru ar trebui să reducă FID pe aproape toate site-urile Divi. Temele WordPress tind să vină cu propriile lor biblioteci JS, iar utilizatorii ar putea să nu aibă expertiza sau permisiunile pentru a împărți codul și a-l optimiza singuri. Am vrut să facem din asta o problemă cu Divi.

Reduceți impactul codului terților și al scripturilor non-critice

Dacă aveți prea multe scripturi terță parte, acesta poate întârzia executarea propriilor date ale site-ului dvs. Prin urmare, pentru a vă optimiza scorul FID, este, de asemenea, o idee inteligentă să reduceți impactul codului terț și să eliminați orice scripturi terțe care nu sunt critice. Și pentru a amâna pe cele pe care nu le puteți elimina.

Când decideți care sunt scripturile cele mai importante, întrebați-vă care joacă un rol important în UX-ul site-ului. De exemplu, poate puteți elimina sau întârzia anumite reclame sau ferestre pop-up care nu sunt foarte necesare. Utilizatorii dvs. trebuie să vadă acest e-mail în primul rând sau îl puteți întârzia până după ce interacționează cu site-ul într-un fel?

De asemenea, puteți căuta în secțiunea Oportunități a rapoartelor dvs. PageSpeed ​​Insights pentru mai multe informații despre reducerea JavaScript și CSS neutilizate:

Dacă faceți clic pentru a extinde oricare dintre aceste secțiuni, acesta va afișa anumite fișiere și sarcini care ar putea bloca firul principal. De asemenea, puteți găsi JavaScript și CSS neutilizate folosind Chrome DevTools.

În multe cazuri, aceste resurse de „blocare a randării” opresc încărcarea paginii la fel de repede, ceea ce afectează și FID-ul dvs. Eliminarea și / sau amânarea acestora nu numai că poate îmbunătăți interactivitatea site-ului dvs., ci și reacția și viteza percepute.

Divi trebuie să comute pentru amânarea scripturilor non-critice de genul acesta. În opțiunile temei, puteți alege să amânați scripturile jQuery și să adoptați amânarea CSS în linie, care, atunci când este combinată cu caracteristica CSS critică a temei, elimină toate CSS-urile de blocare a redării. De asemenea, puteți comuta amânarea foii de stil Google Fonts și editorul Gutenberg. Toate acestea sunt văzute ca „blocare a redării”, astfel încât membrii Elegant Themes vor vedea aproape imediat un scor FID îmbunătățit.

Întrebări frecvente despre prima intrare întârziere (FID)

În acest moment, probabil că aveți o înțelegere solidă a ceea ce este FID și a semnificației acestuia pentru UX-ul site-ului dvs. web, precum și a modului de îmbunătățire a acestuia. Având în vedere acest lucru, dorim să ne asigurăm că am acoperit toate punctele cheie. Deci, să trecem în revistă câteva întrebări frecvente despre FID.

Cum se încadrează FID în performanța generală a site-ului meu web?

În esență, FID măsoară prima interacțiune pe care vizitatorii o au cu site-ul dvs. web. Este atât o valoare cantitativă, cât și una percepută, deoarece afectează prima impresie a unui utilizator cu site-ul dvs. Puteți vedea în mod obiectiv când site-ul răspunde la introducerea utilizatorului, dar pe baza interacțiunilor utilizatorului cu site-ul, puteți vedea când îl percep și pe acesta.

FID măsoară timpul dintre prima interacțiune pe care o face un utilizator și cât durează browserul să răspundă acțiunii respective. Cu alte cuvinte, valoarea evaluează cât de receptiv este site-ul dvs. în timp ce acesta încă se încarcă . Cu cât este mai rapid, cu atât experiența vizitatorilor dvs. va fi mai bună.

De asemenea, în calitate de Core Web Vital (alături de Largest Contentful Paint (LCP) și Cumulative Layout Shift (CLS)), FID joacă un rol important în modul în care Google vă clasează site-ul web. Prin urmare, în plus față de experiența utilizatorilor dvs., acesta poate afecta și optimizarea motorului de căutare (SEO) a site-ului dvs. Multe dintre aceleași strategii de îmbunătățire a FID vor reduce, de asemenea, dramatic performanța generală a site-ului dvs.

Cum pot măsura FID-ul meu?

Există câteva moduri diferite în care vă puteți măsura scorul FID. Cea mai rapidă și mai simplă metodă este să vă rulați site-ul prin Google PageSpeed ​​Insights. Raportul va detalia o serie de valori importante, inclusiv FID. De asemenea, va oferi câteva sugestii despre cum vă puteți îmbunătăți scorul.

În plus, puteți utiliza câteva alte instrumente pentru a accesa scorul dvs. FID. Acestea includ Raportul experienței utilizatorului Chrome, Raportul de bază Web Vitals al Consolei de căutare Google și biblioteca JavaScript web vitals. De asemenea, puteți găsi instrumente precum GT Metrix și Pingdom's Speed ​​Test pentru a fi utile.

Cum îmi îmbunătățesc scorul FID?

Îmbunătățirea FID vă poate ajuta să îmbunătățiți atât clasamentul UX, cât și SEO. De obicei, un scor FID slab poate fi atribuit mai multor factori, printre care:

• JavaScript greu
• Scripturi neutilizate
• Sarcini JavaScript lungi
• Fișiere script lungi

Pentru a vă îmbunătăți scorul, puteți parcurge câțiva pași. Acestea includ reducerea codului site-ului dvs., eliminarea sau întârzierea scripturilor terță parte neutilizate și împărțirea sarcinilor JavaScript lungi (și a fișierelor CSS) în altele mai mici.

Concluzie

Aveți o singură șansă de a face o primă impresie pozitivă vizitatorilor site-ului dvs. web. Acesta este motivul pentru care este important să vă asigurați că aveți toate șansele posibile pentru a vă optimiza scorul FID. Este imperativ să vă asigurați că primele interacțiuni ale vizitatorilor dvs. sunt rapide.

Amintiți-vă, scorul FID ideal este de 100 ms sau mai puțin. Dacă trebuie să vă îmbunătățiți timpul și să reduceți timpul, mai multe strategii pe care le discutăm mai sus (cum ar fi amânarea JavaScript neutilizat, optimizarea codului CSS și JavaScript și amânarea / eliminarea resurselor de blocare a redării) vă vor aduce, fără îndoială, timpul până unde trebuie să fie.

Aveți întrebări despre FID? Spuneți-ne în secțiunea de comentarii de mai jos!

Imagine prezentată prin wan wei / shutterstock