First Input Delay (FID) pe WordPress
Care este First Input Delay și care este impactul asupra performanțelor UX și SEO? În acest articol veți afla ce este FID, cum îl puteți testa și ce factori îi afectează nota. De asemenea, veți înțelege cum să remediați un scor scăzut de pe mobil și desktop (FID mai lung de 100 sau 300 ms) și să vă îmbunătățiți performanța WordPress.
Înainte să citiți acest articol, trebuie să știți că site-ul pe care l-am testat aici aparține celor care au creat pluginul WP Rocket. Promovez acest plugin ca afiliat și vreau să demonstrez cât este de competitiv, atât pentru un Blog/Site, cât și pentru un Magazin Online în WooCommerce. Vă rog citiți până la sfârșit, vă garantez că veți învăța foarte multe despre site-ul dvs. și care sunt pașii de urmat în continuare pentru ca site-ul dvs. să urce în rezultatele motorului de căutare Google.
Ce este First Input Delay (FID) și De ce Contează?
First Input Delay este o valoare de bază Core Web Vitals și măsoară cât durează ca browserul să răspundă la interacțiunea primului utilizator cu o pagină – adică făcând clic pe un link, atingând un buton sau interacționând cu un alt element.
Să presupunem că ați accesat un site și dați clic pe un link. Desigur, te-ai aștepta ca pagina să răspundă cât mai curând posibil, nu? Din păcate, acest lucru nu este întotdeauna posibil. De exemplu, puteți face clic pe un link și nu se întâmplă nimic pentru o vreme – deoarece browserul nu poate procesa cererea utilizatorului imediat.
În cuvinte mai tehnice, se datorează faptului că firul principal al browserului procesează o altă solicitare și nu poate răspunde la cea a utilizatorului. Destul de des, solicitările care țin browserul ocupat sunt legate de procesarea fișierelor JavaScript. Vom trece peste fișierele JS din secțiunea următoare și vom explica cum să remediem principalele probleme.
Deci, înapoi la tine: dai clic pe un link și tot aștepți să se întâmple ceva pe pagină … Destul de enervant, nu-i așa?
De aceea, FID face parte din valorile Core Web Vitals și ajută la măsurarea experienței utilizatorului unei pagini.
Spre deosebire de celelalte două valori Web Core Vitals, FID poate fi măsurat doar pe teren – la urma urmei, este vorba de interacțiunea utilizatorilor.
Din acest motiv, unele instrumente, cum ar fi Lighthouse, nu poate măsura First Input Delay și poate utiliza Total Blocking Time ca proxy. TBT este o metrică de laborator care măsoară și interactivitatea și capacitatea de reacție (fără interacțiunea utilizatorului). Atâta timp cât scorul TBT este bun, nota FID ar trebui să fie de asemenea bună.
TBT reprezintă 25% din scorul global PageSpeed Insights. Este cea mai mare greutate și numai Largest Contentful Paint (LCP) are aceeași greutate. Îmbunătățind performanța TBT, probabil veți îmbunătăți calitatea vitezei paginii și performanța FID.
Ce este un scor FID bun
În ceea ce privește celelalte Core Web Vitals, scorurile sunt împărțite în trei părți: Bine, Are nevoie de îmbunătățire și Slab.
- Un scor FID bun trebuie să aibă un First Input Delay mai mică sau egală cu 100 de milisecunde.
- Scorul „trebuie îmbunătățit” dacă este între 100 și 300 de milisecunde.
- Pe de altă parte, un scor „slab” depășește 300 de milisecunde.
Ce Este un Scor Bun pentru Timpul Total de Blocare ( TBT )
Vă puteți întreba dacă aceleași părți de scor se aplică Timpului total de blocare. Scorul TBT este ușor diferit – la fel ca metrica în sine. Diferența esențială este că TBT măsoară interactivitatea fără intrarea utilizatorului. De aceea poate fi calculat ca date de laborator.
Timpul total de blocare măsoară cât timp pagina este „blocată” înainte de a răspunde la introducerea utilizatorului, cum ar fi apăsarea tastaturii, atingerea ecranului sau clicul mouse-ului – nu interacțiunea utilizatorului, vezi? Suma tuturor „timpilor de blocare” determină scorul TBT.
Pentru a fi un pic mai tehnic, TBT măsoară suma tuturor perioadelor dintre First Paintful Contentful (când puteți interacționa cu primul conținut de pe pagină) și Time to Interactive (cât durează pagina pentru a deveni complet interactivă).
Ca de obicei, Timpul total de blocare include trei secțiuni de scor:
- Bine – mai puțin sau egal cu 300 de milisecunde
- Are nevoie de îmbunătățire – între 300-600 de milisecunde
- Slab – peste 600 de milisecunde.
Pe scurt: atât FID, cât și TBT captează interactivitatea și capacitatea de reacție a unei pagini – chiar dacă FID ia în considerare interacțiunea cu utilizatorul, în timp ce TBT se bazează pe introducerea utilizatorului. Din acest motiv, ambele valori sunt similare în ceea ce privește îmbunătățirile necesare.
Care este Potențialul Maxim Pentru First Input Delay
Este posibil să fi întâlnit First Input Delay cu Potențial Maxim și să vă întrebați care este relația cu FID.
Întârzierea maximă potențială pentru First Input Delay măsoară întârzierea maximă dintre interacțiunea utilizatorului și răspunsul browserului.
Este cel mai rău scenariu bazat pe durata celei mai lungi sarcini după First Contentful Paint – atunci când prima parte a paginii unui conținut este afișată pe ecran și puteți începe să interacționați cu pagina.
Odată ce puteți face clic pe un link sau atingeți un buton (First Contentful Paint realizată), puteți măsura cât durează pagina pentru a răspunde la solicitarea dvs. în timp ce se execută cea mai lungă sarcină. Cea mai lungă durată a sarcinii este întârzierea maximă pentru prima intrare ( Maximum Potential First Input Delay ).
Măsurând potențialul maxim pentru First Input Delay, veți ști cât timp vor aștepta utilizatorii atunci când interacționează cu pagina după ce au văzut primul conținut.
Cum se Măsoară First Input Delay
Fiind o metrică de câmp, First Input Delay poate fi măsurată numai cu câteva instrumente:
- Chrome User Experience Report (CrUX)
- PageSpeed Insights (Field Data)
- Search Console – Raportul Core Web Vitals.
De asemenea, puteți măsura FID în JavaScript utilizând API-ul pentru Calendarul Evenimentelor.
Puteți măsura valoarea proxy, timpul total de blocare ( Total Blocking Time ), și cu aceste instrumente:
Măsurarea FID și TBT cu PageSpeed Insights
PageSpeed Insights vă oferă cea mai ușoară oportunitate de a măsura scorul First Input Delay pe bază de pagină, precum și Total Blocking Time:
Măsurarea FID cu Search Console
Dacă doriți să evaluați performanța FID la nivel de site a site-ului dvs., ar trebui să aruncați o privire la raportul Core Web Vitals din Search Console. Raportul se bazează pe raportul Chrome User Experience.
Alegând raportul mobil sau desktop, puteți identifica potențialele probleme ale performanței FID și puteți scotoci prin adresele URL afectate de aceeași problemă – de exemplu, problema FID: mai lungă de 100 ms.
Ce factori afectează FID și determină un scor lent pe WordPress
În acest moment, puteți ghici că FID este afectat în principal de executarea JavaScript. Când browserul este ocupat să trateze fișiere JavaScript grele, nu poate procesa alte cereri, inclusiv cele ale utilizatorilor.
Drept urmare, interactivitatea este slabă; Timpii de execuție JavaScript sunt mai mari; firul principal este ocupat și blocat. Pe scurt, pagina nu poate răspunde la intrările sau interacțiunile utilizatorilor.
Vom vedea diferite moduri de a remedia aceste probleme.
Deoarece JavaScript este cheia îmbunătățirii FID, ar trebui să știți că a avea mai multe pluginuri – în special cele bazate pe JavaScript – ar putea afecta și gradul First Input Delay. Ar trebui să evitați orice execuție JavaScript inutilă pe paginile în care pluginul nu este necesar. De asemenea, este important să eliminați orice plugin care nu este esențial.
Temele grele WordPress pot afecta, de asemenea clasa First Input Delay. Au mai multe fișiere JS, machete complexe și un stil ineficient care va afecta firul principal – prin urmare, performanța FID.
De aceea, cu cât temele au mai puțină complexitate, cu atât mai bine. Și de aceea, tendința de acum este de a simplifica totul: machete, animații, mai multă utilizare JS nativă față de bazarea pe biblioteci complexe.
Cum se Reduce First Input Delay Mai Lungă de 100 ms sau 300 ms pe Mobil și Desktop
Îmbunătățirea modului în care browserul se ocupă de executarea JavaScript reduce First Input Delay pe WordPress și îmbunătățește scorul FID.
Scopul este de a face procesul mai rapid și mai ușor, astfel încât interactivitatea și capacitatea de reacție să se îmbunătățească.
Dacă nota dvs. FID are probleme, în raportul Core Web Vitals de pe Search Console veți citi „Problema FID: mai lungă de 100 ms” sau „Problema FID: mai lungă de 300 ms”. Problema poate fi de pe mobil și/sau desktop.
Există mai multe moduri de a optimiza gradul First Input Delay pe WordPress:
- Reduceți timpul de execuție JavaScript
- Optimizați-vă pagina pentru pregătirea interacțiunii
- Separați Sarcinile Lungi.
Să vedem în detaliu ce acțiuni ar trebui să întreprindeți și care este impactul asupra performanței.
1.Amânați JavaScript
Impactul Performanței: Ridicat
În ceea ce privește optimizarea executării JavaScript, ar trebui să amânați fișierele Javascript.
Amânând fișierele JavaScript, aceste resurse de blocare a redării vor fi încărcate după ce browserul a redat conținutul cel mai relevant – adică conținutul necesar pentru a permite utilizatorilor să interacționeze cu pagina.
Ca urmare, timpul de încărcare se va îmbunătăți, precum și gradul FID.
După ce ați identificat resursele JS de amânat, ar trebui să adăugați atributul de amânare (defer) la fișierele JavaScript. Browserul va ști apoi ce fișiere trebuie amânate până la finalizarea redării paginii.
Iată un exemplu al atributului de amânare:
<script defer src="/example-js-script"></script>
Puteți gestiona cu ușurință amânarea fișierelor JavaScript cu WP Rocket și funcția Load Javascript Deferred.
Veți găsi această opțiune în fila Optimizare fișier. De asemenea, veți putea exclude anumite fișiere JS de la amânare – în cazul în care aveți nevoie de această opțiune din cauza unui conflict.
Veți aborda recomandările PageSpeed „Eliminarea resurselor de blocare a redării” și „Reducerea impactului codului terț” – chiar dacă problemele resurselor de blocare a redării JS nu se opresc aici.
Continuați să citiți pentru a afla ce alte acțiuni ar trebui să implementați.
2.Eliminați JavaScript Neutilizat
Impactul Performanței: Mediu
De asemenea, puteți aborda problemele JS eliminând fișierele JavaScript neutilizate care încetinesc timpul de descărcare și agravează interactivitatea.
Fișierele JS neutilizate sunt resursele JavaScript care nu sunt esențiale pentru redarea paginii sau nu sunt deloc utile. Totuși, aceste fișiere se află în cod, deci ar trebui să le gestionați. Exemple de fișiere JS neutilizate sunt fișierele JavaScript ale unor terțe părți, cum ar fi codurile de urmărire pentru analize și anunțuri.
Raportul PageSpeed Insights vă arată lista fișierelor JS neutilizate de care ar trebui să aveți grijă:
Aveți două opțiuni pentru a aborda fișierele Javascript neutilizate:
1.Încărcați fișierele JavaScript numai atunci când este necesar.
Puteți utiliza pluginuri precum Perfmatters și Assets Cleanup pentru a încărca aceste fișiere numai atunci când este necesar. Execuția fișierelor JavaScript ar trebui să fie dezactivată în orice alt caz. Ca un sfat suplimentar, puteți solicita dezvoltatorilor de teme și pluginuri să vă asigure că sunt încărcate numai activele necesare atunci când sunt utilizate caracteristicile respective.
2.Întârziați fișierele JavaScript.
Întârzierea resurselor JavaScript înseamnă că fișierele JavaScript nu vor fi încărcate până la prima interacțiune cu utilizatorul (de exemplu, derulare, clic pe un buton). Cu alte cuvinte, nu vor fi încărcate fișiere JS decât dacă există interacțiune cu utilizatorul. Este important să rețineți că nu toate scripturile din lista de recomandări PageSpeed, precum cea inclusă mai sus, pot fi întârziate în siguranță.
Un avantaj suplimentar al întârzierii JavaScript este că Lighthouse nu va detecta niciun fișier JS. Prin urmare, instrumentul nu va include niciuna dintre aceste resurse JS în recomandarea „Eliminați fișierele Javascript neutilizate”.
Pentru a fi clar: nu trebuie să întârziați fișierele JS pentru a rezolva această recomandare PSI. Veți găsi mai multe informații despre principalul motiv pentru care ar trebui să întârziați JS în punctul următor. Cu toate acestea, este util să știți ca o valoare adăugată pentru îmbunătățirea scorului PSI.
Deci, cum puteți întârzia fișierele JavaScript? Puteți utiliza un plugin gratuit, cum ar fi Flying Scripts.
Pe de altă parte, puteți profita de WP Rocket și de funcția de întârziere a executării JavaScript. Fila Optimizare fișier vă permite să întârziați executarea JavaScript în câteva clicuri. Trebuie doar să includeți lista de scripturi pentru a le întârzia. Simplu!
În cele din urmă, iată o listă cu alte pluginuri care vă pot ajuta să minimizați JS neutilizate. Vă recomandăm să le utilizați cu atenție:
Eliminarea fișierelor Javascript neutilizate va aborda recomandarea specifică PageSpeed listată în raport. Veți aborda, de asemenea, recomandările „Eliminarea resurselor de blocare a redării” și „Reducerea timpului de execuție a javascriptului”.
3.Întârziți Timpul de Execuție JS Până la Interacțiunea cu Utilizatorul
Impactul Performanței: Foarte Mare
Puteți optimiza resursele JavaScript și puteți acorda prioritate scripturilor necesare pentru interacțiune, întârziind fișierele JS și executarea acestora până la interacțiunea cu utilizatorul.
Cu alte cuvinte, nu vor fi încărcate fișiere JavaScript până la interacțiunea utilizatorului, cum ar fi să faceți clic pe un buton sau să derulați conținutul.
Așa cum s-a explicat mai sus, ar trebui să întârziați toate fișierele JavaScript care afectează timpul de încărcare și interacțiunea fără motiv, cum ar fi fișierele JS neutilizate incluse în secțiunea anterioară.
După cum știți deja, aveți diferite opțiuni pentru a întârzia fișierele JavaScript. Puteți utiliza un plugin gratuit, cum ar fi Flying Scripts sau să profitați de opțiunea de întârziere a funcției de executare JavaScript oferită de WP Rocket – mai multe detalii mai sus.
Astfel veți aborda recomandarea PSI „Reduceți timpul de execuție a javascript”.
4.Minimizează JS
Impactul Performanței: Scăzut
O altă modalitate eficientă de a gestiona timpul de execuție JavaScript este prin reducerea fișierelor JavaScript.
Prin reducerea fișierelor JS, veți elimina comentariile, întreruperile de linie și spațiile albe incluse în cod. Scopul este de a face dimensiunea fișierelor mai mică și mai rapidă.
Minimizarea poate consuma mult timp și există întotdeauna riscul de a pierde orice. Din aceste motive, cel mai bine este să folosiți un instrument de minimizare sau să utilizați WP Rocket. WP Rocket este cel mai simplu mod de a minimiza fișierele JS în câteva clicuri. Trebuie doar să activați opțiunea Minificare fișier JavaScript în fila Optimizare fișier.
Veți aborda următoarele recomandări PageSpeed Insights:
- Minimizează JS
- Evitați încărcăturile utile enorme de rețea.
5.Eliminați (sau Reduceți) CSS Neutilizat
Impactul Performanței: Mediu
După cum s-a explicat în secțiunea LCP, eliminarea sau reducerea CSS neutilizate ajută la îmbunătățirea timpului de încărcare – prin urmare, îmbunătățește interactivitatea și metrica First Input Delay.
În versiunea 3.9 WP Rocket a introdus o nouă funcție care vă permite să abordați CSS neutilizate cu un singur clic. Trebuie doar să activați opțiunea de mai jos, iar pluginul se va ocupa de toate CSS-urile neutilizate incluse în codul HTML al paginii.
6.Async sau Defer CSS
Impactul Performanței: Mediu
Lucrarea principală a firului poate avea un impact semnificativ asupra interactivității și performanței First Input Delay. De aceea, una dintre recomandările PSI este „Minimizați activitatea principală a firului”. Pentru a rezolva problema și a îmbunătăți timpul FID, ar trebui să amânați sau să sincronizați fișierele CSS.
În secțiunea Amânare JavaScript, citiți de ce amânarea este esențială pentru a permite browserului să se concentreze doar asupra resurselor esențiale pentru redarea paginilor. Același lucru este valabil și pentru fișierele CSS care sunt resurse de blocare a redării.
O opțiune este de a include atributul Amână (Defer) la toate fișierele CSS:
<script defer src="/example-css-script"></script>
Și iată un alt proces în doi pași pentru a face ca resursele de blocare a redării CSS să se încarce asincron:
- Extrageți și încorporați calea critică CSS (CPCSS) folosind un instrument generator disponibil ca acesta.
- Încărcați restul claselor în mod asincron aplicând următorul model.
Dacă căutați informații mai detaliate, vă recomandăm să citiți resursa dedicată Google.
Un sfat suplimentar de reținut este să evitați plasarea unui cod CSS mare, non-critic, în codul <head> .
Dacă căutați o modalitate mai rapidă și mai ușoară de a rezolva rapid atât CSS critice cât și non-critice, WP Rocket vă poate ajuta. Pluginul de cache oferă funcția de livrare Optimize CSS care diferă CSS non-critic și CSS critic în linie.
Veți elimina toate resursele CSS care blochează redarea activând opțiunea din fila Optimizare fișiere:
Vă rog să rețineți că, dacă ați activat deja opțiunea Eliminare CSS neutilizate (RUCSS), este mai bine să mergeți la aceasta – și nu trebuie să activați și funcția Optimizare livrare CSS. Vă recomand să optimizați livrarea CSS numai în cazul în care RUCSS nu funcționează pentru dvs.
Implementând aceste acțiuni, veți avea grijă încă o dată de recomandările PageSpeed Insights „Eliminați resursele de blocare a redării”. Veți aborda, de asemenea, recomandarea „Evitați înlănțuirea cererilor critice”.
7.Comprimați Fișierele Text
Impactul Performanței: Ridicat
După cum puteți ghici în acest moment, compresia este ceva de care trebuie să aveți grijă. Este de la sine înțeles că „Activați compresia textului” este una dintre recomandările PSI care se aplică timpilor First Input Delay.
Prin comprimare și reducerea dimensiunii fișierelor, browserul și serverul vor trimite fișiere mai rapid. Browserul va încărca aceste resurse mai repede.
Cele mai comune formate de compresie sunt Gzip și Brotli. Brotli este cel mai recomandat format acum.
Cel mai simplu mod de a activa compresia Gzip pe WordPress este utilizarea unui plugin. Puteți alege între diferite opțiuni, de la pluginul Enable Gzip Compression la WP Rocket, care include compresia GZIP în mod implicit. Rețineți că unele gazde activează automat compresia GZIP.
8.Separați Sarcinile Lungi
Impactul Performanței: Ridicat
După cum am explicat la începutul articolului, atunci când firul principal este ocupat și blocat, gradul First Input Delay este afectat negativ, iar pagina nu poate răspunde la intrările sau interacțiunile utilizatorilor.
Firul principal este blocat din cauza sarcinilor lungi pe care browserul nu le poate întrerupe – adică toate sarcinile care rulează mai mult de 50 ms. De aceea, atunci când firul principal este blocat, o pagină nu poate răspunde la datele introduse de utilizator, iar capacitatea de reacție este afectată.
Pentru a rezolva această problemă, ar trebui să împărțiți scripturile de lungă durată în bucăți mai mici, care pot fi rulate în mai puțin de 50 ms.
Vizibilitatea conținutului este o nouă proprietate CSS puternică care poate contribui la creșterea performanțelor de redare, permițând agentului utilizator să sară peste activitatea de redare a unui element până când este necesar.
Vă puteți îmbunătăți performanța de încărcare aplicând vizibilitatea conținutului: auto; contain-intrinsec-size: 1px 5000px; la elemente în care doriți să le întârziați. Nu uitați a doua parte: este important să remediați unele probleme de utilizare.
În prezent, această proprietate CSS funcționează numai pe Chrome și majoritatea browserelor bazate pe acesta.
În cele din urmă, vă recomandăm să citiți două resurse pe acest subiect, despre Sarcinile Lungi și JavaScript Intensiv.
Începeți Să Vă Optimizați Timpul First Input Delay pe WordPress Astăzi
Acum ar trebui să înțelegeți de ce First Input Delay este esențială pentru performanță și experiența utilizatorului și cum puteți îmbunătăți scorul. Prin aplicarea tuturor acestor tehnici de optimizare, veți îmbunătăți calitatea FID pe site-ul dvs. WordPress.
Nu sunteți încă client WP Rocket? Economisiți timp și lăsați WP Rocket să facă treaba pentru dvs. WP Rocket este cel mai simplu mod de a obține un scor FID excelent. Nici măcar nu trebuie să setați nimic! WP Rocket va aplica automat 80% din cele mai bune practici de performanță web. Veți vedea o îmbunătățire instantanee cu ochiul liber în scorurile dvs. Core Web Vitals imediat.
În plus, veți renunța la multe pluginuri de performanță web. Veți avea nevoie doar de WP Rocket pentru a vă îmbunătăți calitatea First Input Delay – nu vă sunt necesare cunoștințe tehnice, garantat!
Recomandarea autorului:
- Cum să Reduceți Total Blocking Time (TBT) pe Site-ul dvs. WordPress
- Cum se Reduce Time to First Byte (TTFB) și Timpul de Răspuns al Serverului
- Cum să Îmbunătățiți Cumulative Layout Shift (CLS) pe WordPress
- Cum se Îmbunătățește Largest Contentful Paint (LCP) pe WordPress
- Core Web Vitals și SEO – Sfaturi și Cele Mai Bune Practici pentru Site-ul dvs. WordPress
- Google Core Web Vitals pentru WordPress – Cum Testăm și Îmbunătățim
