Cum să Îmbunătățiți Time to Interactive (TTI) pe WordPress

Cum să Îmbunătățiți Time to Interactive (TTI)

Vă întrebați ce este Time to Interactive și cum afectează viteza site-ului dvs. WordPress? Continuați să citiți pentru că toți ne dorim un site web rapid și ușor de interacționat. Nimic nu este mai frustrant pentru un utilizator, decât să facă clic undeva pe pagină și să nu obțină nici un rezultat din acțiunea lui, nu?

Pentru a vă asigura că site-ul dvs. web oferă o experiență remarcabilă pentru utilizator, există câteva valori de care ar trebui să aveți grijă, iar TTI este una dintre ele. Ca metrică centrată pe utilizator, Time to Interactive deține până la 10% din scorul de performanță global calculat de Lighthouse. Este posibil să nu fie cea mai influentă valoare pentru scorul final, dar frustrarea experimentată de utilizator îi poate determina să iasă de pe pagina dvs. sau chiar mai rău: părăsește site-ul dvs. web!

Vă vom explica ce este Time to Interactive, de ce este important, ce instrumente îl pot măsura și ce afectează scorul acestuia. Vom împărtăși și câteva sfaturi tehnice pentru a remedia un grad rău de Time to Interactive (TTI mai lung de 3,8 secunde). În cele din urmă, vă vom arăta cum să vă îmbunătățiți scorul de performanță general și să ne asigurăm că site-ul dvs. web nu are defecte.

Ce înseamnă Time to Interactive (TTI) în Lighthouse?

Time To Interactive măsoară cât de repede vizitatorii pot interacționa pe deplin cu pagina dvs.

Este o metodă de laborator semnificativă pentru evaluarea sensibilității la încărcare, care afectează direct modul în care utilizatorii percep performanța și interacțiunea.

Valoarea TTI măsoară momentul în care pagina începe să se încarce la momentul în care s-au încărcat principalele sale resurse și este capabilă să răspundă rapid la o acțiune a utilizatorului.

Pe scurt, TTI măsoară cât de repede o pagină poate executa orice cod JavaScript pentru ca, componentele să răspundă rapid la orice acțiune a utilizatorului. Ajută la identificarea paginii care arată interactiv.

Lasă-mă să-ți explic cu un exemplu concret.

Un utilizator poate vedea pe ecran un buton de acțiune. El încearcă să facă clic pe el, dar nu se întâmplă nimic: elementul respectiv nu răspunde la acțiunea de clic. Frustrant, nu? Valoarea TTI vă ajută să identificați acele pagini care arată interactiv, dar de fapt nu sunt.

TTI merge mână în mână cu Total Blocking Time, deoarece împreună oferă informații despre capacitatea de reacție a paginii dvs. la acțiunea utilizatorului.

Lighthouse este un instrument open-source și automat care ajută dezvoltatorii să îmbunătățească calitatea paginilor web. Creează audituri pentru viteză, performanță, accesibilitate, UX și optimizarea motorului de căutare (SEO). Pentru a oferi o experiență excelentă utilizatorului, site-urile ar trebui să se străduiască să aibă un scor între 90 și 100.

Pe scurt, un TTI rapid ajută la asigurarea utilizării paginii.

Lighthouse v8 combină șase valori pentru a genera scorul final de performanță, inclusiv Core Web Vitals, Speed Index, Time to Interactive și Total Blocking Time:

Cum se Măsoară Time to Interactive

Pentru a defini scorul TTI, trebuie să măsurați timpul de la începutul încărcării paginii până la momentul în care și-a redat vizual scripturile inițiale și este capabilă să răspundă rapid la introducerea utilizatorului.

Lighthouse urmează patru pași pentru a măsura TTI:

1. Începeți de la First Contentful Paint (când primele elemente de text și imagine sunt redate pe ecran.)
2. Căutați înainte în timp pentru o fereastră liniștită de cel puțin cinci secunde (fereastră liniștită = fără sarcini lungi și numai mult de două cereri GET în rețea)
3. Căutați înapoi ultima sarcină lungă înainte de fereastra liniștită, oprindu-vă la FCP dacă nu sunt găsite sarcini lungi.
4. TTI este ora de sfârșit a ultimei sarcini lungi înainte de fereastra liniștită (dacă nu se găsesc sarcini lungi, este aceeași valoare ca FCP).

Puteți vizualiza cei patru pași grație diagramei de mai jos:

Ce instrumente pot măsura automat TTI?

Puteți utiliza două instrumente diferite pentru a măsura TTI și performanța dvs. utilizând tehnologia Lighthouse.

• Utilizarea Google PageSpeed Insight (PSI) pentru a măsura valoarea TTI:

• Folosind GTmetrix pentru a obține nota TTI:

Ambele instrumente oferă un scor TTI, dar după cum puteți vedea, numerele – în zona verde – sunt ușor diferite:

• Scor TTI (PSI): 1,1 s
• Scor TTI (GT Metrix): 299 ms

Acest lucru se datorează în principal diferiților factori, inclusiv metodologiei de testare a Lighthouse, localizarea testelor etc.

Care Este un Scor Bun Pentru Time to Interactive (TTI)?

Ar trebui să vă străduiți întotdeauna să aveți un Time to Interactive ( timp de interacțiune ) mai mic de 3,8 secunde pentru a vă asigura o experiență de utilizare bună. Scorul dvs. TTI este o comparație a timpului TTI al paginii dvs. și al timpului TTI al site-urilor de rang înalt atunci când este încărcat pe mobil sau desktop.

Scorul pentru Time to Interactive este clasificat după cum urmează:

• Verde: 0-3,8 (bun)
• Portocaliu: 3,8-7,3 (trebuie îmbunătățit)
• Roșu: 7,3 (slab)

Time to Interactive este adesea comparat cu metrica First Input Delay (FID). În partea următoare, vom explica de ce.

Este First Input Delay (FID) la fel ca Time to Interactive (TTI)?

FID și TTI măsoară nivelul de interactivitate al paginii dvs. web. Cu toate acestea, pe lângă acest aspect comun, găsim și câteva diferențe:

• TTI măsoară cât durează o pagină pentru a fi pregătită să răspundă la introducerea utilizatorului, în timp ce FID măsoară cât de receptivă este pagina dvs. atunci când utilizatorii reali încearcă să interacționeze cu aceasta.
• TTI poate fi calculat cu date de laborator (fără utilizatori din lumea reală), dar First Input Delay (FID) este o metrică numai pentru câmp care necesită date despre utilizatorii reali. Calculul FID nu poate fi făcut într-un mediu de laborator. Această formă de date poate fi colectată doar de la utilizatori reali.
• First Input Delay urmărește intrările utilizatorului care se întâmplă înainte ca pagina să fie complet interactivă. First Input Delay vă permite să capturați acele interacțiuni critice timpurii:

• FID – care necesită calcularea utilizatorilor din lumea reală – este o valoare Core Web Vitals care măsoară ce se întâmplă atunci când cineva interacționează cu pagina, așa cum se arată mai jos:

Care Este Impactul Time to Interactive Asupra Performanței?

După cum s-a văzut anterior, un TTI ridicat poate crea o experiență frustrantă pentru utilizator: utilizatorul crede că site-ul este complet încărcat, dar când încearcă să facă clic undeva, nu se întâmplă nimic.

Să vedem un exemplu real pentru TTI (în portocaliu mai jos). După cum puteți vedea, marchează o pagină ca fiind complet interactivă dacă firul principal a fost lipsit de sarcini lungi timp de aproximativ 4-5 secunde:

Instrumentelor precum PageSpeed Insights nu prea le place acest lucru și nu vor ezita să vă penalizeze site-ul prin scăderea gradului de performanță.

Greutatea TTI pe scorul Lighthouse

În scorul de performanță Lighthouse v8, greutatea TTI a fost redusă de la 15% la 10%.

De ce o astfel de schimbare? Web.dev explică faptul că răspunde direct la feedback-ul utilizatorilor și „neconcordanțele în optimizările metrice care duc la îmbunătățiri ale experienței utilizatorului”.

TTI măsoară cât durează pagina dvs. pentru a fi pregătită pentru interacțiune: cât timp este blocat firul principal JS și cât de curând ar avea capacitatea de a face față acțiunii unui utilizator.

Este o valoare importantă de laborator, deoarece definește dacă pagina dvs. este utilizabilă sau nu.

Înainte de a vă oferi recomandări practice pentru a vă menține TTI sub 3,8 s, trebuie să definim ce cauzează un scor TTI slab.

Ce Afectează Time to Interactive?

Să vedem ce poate provoca un scor mare de Time to Interactive cu ajutorul secțiunii de diagnosticare din Google PageSpeed Insights. În general, avem patru probleme care contribuie la un grad TTI slab, și anume:

1. Cod JavaScript și JS neutilizat
2. Timp de Executare JavaScript
3. Lucrarea Firului Principal
4. Cod Terță Parte

Datorită secțiunilor „Oportunități” și „Diagnostice” din raportul Lighthouse, puteți folosi câteva sfaturi pentru a vă îmbunătăți calitatea generală de performanță.

Raportul arată cât de mult are impact fiecare eroare asupra economiilor estimate; rezolvarea acestora va îmbunătăți drastic TTI și experiența utilizatorului.

Am enumerat câteva recomandări de la PSI în cazul în care trebuie să vă îmbunătățiți scorul TTI:

• Eliminați resursele de blocare a redării
• Minimizați lucrarea firului principal
• Reduceți timpul de execuție JavaScript
• Eliminați JS neutilizat
• Reduceți impactul codului terț
• Evitați înlănțuirea cererilor critice
• Preîncărcați solicitările cheii
• Păstrați numărul de solicitări scăzut și dimensiunile de transfer mici
• Reduceți timpii de răspuns ai serverului

Cum să Îmbunătățiți Time to Interactive ( TTI ) pe Site-ul dvs. WordPress

Puteți reduce scorul dvs. pentru Time to Interactive optimizând fișierele JS (inclusiv codul unei terțe părți.) Orice fel de măsuri bune care vizează executarea JS vor îmbunătăți cel mai probabil TTI. Concentrați-vă întotdeauna pe ordinea și preferințele de încărcare a resurselor dvs. și pe numărul și dimensiunea cererilor.

Există opt optimizări de performanță pe care le recomandăm să le implementați dacă doriți să remediați Time to Interactive și să îmbunătățiți viteza generală a site-ului dvs. WordPress.

1. Amânați JS
2. Întârziați JS și Reduceți JS Neutilizate
3. Minimizează JS și CSS
4. Optimizați Livrarea CSS și Reduceți CSS Neutilizate
5. Reduceți TTFB
6. Prefetch Solicitări DNS
7. Preîncărcați Fonturile
8. Îmbunătățiți TTI pe Mobil

1.Amânați JS

Amânarea fișierelor JS înseamnă că acestea vor fi încărcate numai după ce browserul a afișat conținutul cel mai important. Scopul este de a vă face încărcarea mai rapidă a paginii, acordând prioritate conținutului pe care doriți să îl afișați mai întâi. Veți reduce cantitatea de timp petrecut în analizarea, compilarea și rularea fișierelor JS, ceea ce va ajuta la îmbunătățirea TTI.

Exemple de JS neesențiale care pot fi în general amânate: partajarea socială, consimțământul cookie-urilor, etc.

Probleme identificate de Lighthouse: „Eliminați resursele de blocare a redării”, „Reduceți JavaScript neutilizat” și „Evitați înlănțuirea cererilor critice”.

O soluție manuală:

• Utilizarea atributului Defer: Când încercați să amânați JS, puteți utiliza atributele booleene „defer” pentru eticheta scriptului în HTML:

<script src=”library.js” defer></script>

Soluție pentru pluginuri WordPress:

• Asset CleanUp: acest plugin gratuit scanează și detectează conținutul care trebuie încărcat în pagină cu prioritate. Tot ce trebuie să faceți este să selectați codul CSS sau JS care nu ar trebui redat mai întâi.

• Async JS: Async JavaScript vă oferă controlul deplin asupra scripturilor pentru a adăuga un atribut „defer – amânare” pentru a contribui la creșterea performanței site-ului dvs. WordPress.
• WP Rocket are opțiunea de a amâna analiza JavaScript și de a amâna fișierele JS WordPress așa cum se arată mai jos:

2.Întârziați JS și Reduceți JS Neutilizate

Amânând execuția JS și eliminând sau reducând JS neutilizate, veți îmbunătăți performanța și scorul Time to Interactive. Ideea principală este de a întârzia încărcarea tuturor fișierelor JS până când se produce o interacțiune cu utilizatorul, cum ar fi clic pe un buton sau derulare până la sfârșitul paginii. Un bun punct de plecare este să vă verificați graficul GTmetrix Waterfall pentru a vedea unde se încarcă JavaScript. Puteți obține același diagnostic folosind PSI. După ce efectuați auditul, veți putea stabili dacă JS „rău” provine din codul dvs. sau dintr-o aplicație terță parte.

Probleme identificate de Lighthouse: „Evitați înlănțuirea cererilor critice” și „Reduceți JavaScript neutilizat”.

Soluții Manuale:

• Modul manual de a crea o întârziere în JS este de a utiliza funcția metodei setTimeout (). Aceasta va apela o funcție după timpul specificat în ms. Puteți utiliza acele fragmente de cod foarte utile pentru a întârzia orice funcție JS.
• Ștergerea manuală a JS neutilizate poate fi periculoasă pentru site-ul dvs. web. Dacă eliminați încă un spațiu sau încă o paranteză, lucrurile pot deveni destul de urâte. Dacă nu sunteți un dezvoltator avansat, nu aș recomanda să faceți așa ceva manual.

Utilizați un plugin WordPress:

• Flying Scripts: un plugin pentru a întârzia JS și pentru a oferi mai multe resurse fișierelor JS critice. Ajută să acordăm prioritate.
• Plugin Organizer: modifică ordinea în care sunt încărcate pluginurile (vă ajută să acordați prioritate conținutului care trebuie redat mai întâi.)
• WP Meteor: un plugin pentru a amâna scripturile JS și a îmbunătățit foarte mult viteza percepută de vizitatori (foarte importantă pentru experiența utilizatorului).
• Gonzales: permite dezactivarea condiționată a CSS, JS și chiar a pluginurilor, în funcție de pagina pe care o vizitați.
• Asset CleanUp (vă rugăm să consultați secțiunea de mai sus).
• Perfmatters: vă permite să dezactivați pluginurile peste tot, cu excepția paginilor și a postărilor.

• Plugin de cache WP Rocket: soluția all-in-one. Puteți amâna cu ușurință fișierele JavaScript și puteți elimina (sau reduce) JS neutilizate cu un singur clic.

3.Minimizează JS și CSS

Reducerea codului înseamnă eliminarea oricăror dezordini și punctuații inutile: linii noi, spații etc. Aceste elemente vă pot ajuta pe dvs. sau dezvoltatorul dvs. să citească codul, dar pot fi responsabili și de încetinirea site-ului.

Eliminarea acestui cod „inutil” din scriptul dvs. va elibera timp pentru ca firul principal să se concentreze pe multe sarcini importante. Din nou, este vorba de a crea spațiu și timp pentru ca cel mai relevant conținut să fie redat mai întâi. Fila Acoperire din Chrome DevTools vă poate ajuta să găsiți codul JavaScript și CSS neutilizate:

Probleme identificate de Lighthouse: „Reduceți timpul de execuție JavaScript”, „Minimizați lucrarea firului principal”, „Minificați JS” și „Minificați CSS”.

Soluții Manuale:

• Importanță: faceți o copie de rezervă a site-ului dvs. sau nu editați fișierele JS sau CSS direct pe un server de producție.
• Utilizați un editor de text precum Sublime Text sau Visual Studio Code.
• Deschideți fișierul care conține codul dvs. și eliminați comentariile, spațiul alb, liniile noi și indentările. Nu uitați să scurtați numele ID-urilor, claselor sau variabilelor cât mai mult posibil și să vă optimizați afirmația condițională.

Utilizarea unui instrument web:

• Accesați minifycode.com și faceți clic pe fila CSS / JS minifier. Lipiți codul CSS / JS în caseta de introducere și faceți clic pe butonul Minify CSS / JS.
• Closure Compilerde la Google (JS)
• UglifyJs (JS)
• YUI Compressor Tool (CSS și JS)
• CSS Nano (CSS)
• CSSO (CSS)
• UNCSS (CSS)

Utilizați un plugin WordPress pentru a vă minimiza CSS și JS:

• Autoptimize Plugin (CSS și JS)
• WP Super Minify (CSS și JS)
• WP Rocket vă permite să reduceți atât fișierele JS cât și CSS în câteva clicuri.

4.Optimizați Livrarea CSS și Reduceți CSS Neutilizate

Înainte ca browserul să poată reda conținutul, acesta trebuie să proceseze toate informațiile despre stil și aspect pentru pagina curentă. Cu alte cuvinte, browserul trebuie să livreze CSS, dar această acțiune ar putea bloca firul principal de a gestiona alte sarcini și procese importante. Prin urmare, pentru a menține o performanță bună, este esențial să efectuați două sarcini:

• Optimizați modul în care este livrat CSS
• Eliminați toate CSS Neutilizate

Probleme identificate de Lighthouse: „Minimizați lucrarea firului principal” și „Reduceți CSS neutilizate”.

Soluții manuale pentru optimizarea livrării CSS:

• Combinați, comprimați și încorporați scripturile CSS.
• Prioritizați regulile CSS: conținutul de mai sus este prioritatea!
• Evitați utilizarea etichetelor STYLE în corpul HTML.

Soluții manuale pentru eliminarea sau reducerea CSS neutilizate:

• Veți avea nevoie de cunoștințe tehnice pentru a efectua această acțiune și aveți grijă să nu vă rupeți pagina. Dacă doriți să eliminați complet CSS neutilizate, utilizați un instrument precum PurifyCSS pentru a afla cât de mult pot fi reduse fișierele dvs. CSS. Dezavantajul este că odată ce CSS-ul de șters este identificat, trebuie să îl eliminați manual din pagină.

Plugin-uri WordPress pentru a optimiza livrarea CSS și a elimina CSS Neutilizate:

• Speed Up – Optimize CSS delivery încarcă foaia de stil asincron și vă îmbunătățește timpul de încărcare a paginii.
• Autoptimize include opțiuni pentru integrarea și amânarea CSS și optimizarea CSS
• Asset CleanUp ajută la reducerea CSS neutilizate
• Pluginul de cache WP Rocket vă permite să optimizați livrarea CSS și să eliminați (sau să reduceți) CSS neutilizat în câteva clicuri direct din „meniul Optimizare fișiere”:

5.Reduceți Server Response Time și Time to First Byte (TTFB)

Dacă doriți ca scorul TTI să rămână scăzut, serverul dvs. trebuie să fie rapid. Pentru a reduce timpul de răspuns al serverului, puteți utiliza metodele de mai jos:

• Optează pentru un furnizor de hosting rapid și eficient
• Utilizați un serviciu CDN (dacă aveți un CDN rapid în întreaga lume, veți oferi o livrare mai rapidă a conținutului)
• Utilizați stocarea în cache avansată
• Folosiți compresia GZIP
• Optimizați-vă baza de date
• Folosiți cea mai recentă versiune de PHP

Problemă identificată de Lighthouse: „Reduceți timpul de răspuns inițial al serverului”.

Utilizați un plugin de cache avansat și un CDN:

Pluginul de cache WP Rocket și RocketCDN vă vor ajuta să reduceți scorul TTI.

Activați compresia GZIP

• Utilizați GZIP Compression Plugin.
• WP Rocket activează automat funcția GZIP.

Optimizați-vă baza de date

Folosiți WP Rocket pentru a vă curăța baza de date fără a deteriora lucrurile.

6.Prefetch Solicitări DNS

Dacă aveți un cod terță parte pe site-ul dvs., cum ar fi un videoclip găzduit pe Vimeo sau unele fonturi Google, ar trebui să preinstalați cererea DNS. Aceasta vă va face site-ul web mai rapid și va reduce timpul de încărcare și resursele de pe un alt site web. Ideea principală este să folosiți Preconnect pentru a face conexiuni timpurii la scripturi terțe, în loc să așteptați până când le solicită.

Probleme identificate de Lighthouse: „Reduceți timpul de răspuns inițial al serverului”, „Reduceți utilizarea terților” și „Preconectați-vă la originile necesare”.

Soluție Manuală:

• Utilizați „rel = dns-prefetch” în secțiunea antet. Puteți specifica manual domeniul pentru ca browserul să fie preluat în prealabil:

<link rel=”dns-prefetch” href=”//domeniultau.ro”>

Utilizați un plugin WordPress:

• Pluginul Perfmatters are opțiunea de preluare DNS:

• Pluginul WP Rocket are o secțiune „Prefetch DNS Requests” în tabloul său de bord WordPress:

7.Preîncărcați Fonturile

Datorită preîncărcării fontului, puteți „forța” browserul unui vizitator să încarce din timp fonturile importante.

Un font personalizat este o parte crucială a brandingului dvs., deci este foarte important să îl afișați pe site-ul dvs. web. Cu toate acestea, există câteva bune practici pentru preîncărcarea fonturilor web pentru a evita problemele de performanță. Iată trei sfaturi pe care trebuie să le luați în considerare:

• Folosiți formatul corect al fontului (woff și woff2).
• Preîncărcați fonturile (așa cum se explică în secțiunea de mai jos).
• Utilizați declarația corectă a fontului-font (familia corectă de fonturi).

Problemă identificată de Lighthouse: „Preîncărcare solicitări cheie”.

Soluție Manuală:

• Spuneți browserului să pre-încărce fontul folosind eticheta și atributele corespunzătoare rel = ” preload”:

Exemplu:

<link rel=”preload” as=”font” href=”/fonts/custom-font.woff” type=”font/woff2″ crossorigin=”anonymous”>

Unde se pune eticheta?

Trebuie să inserați această etichetă de legătură între etichetele de head din HTML pentru fiecare fișier CSS, script și font încărcat pe site.

Folosind un plugin WordPress:

• Folosiți WP Rocket pentru a pre-încărca fonturile. Mergeți la „Fila Preîncărcare”, derulați la „Preîncărcați fonturile” și pur și simplu specificați adresele URL ale fișierelor de font pe care doriți să le preîncărcați:

8.Concentrați-vă pe Time to Interactive pe Mobil

Cum se îmbunătățește Time to Interactive pe mobil? Mai întâi, concentrați-vă pe abordarea oricărei probleme JavaScript. Apoi, aplicați toate recomandările de performanță enumerate mai sus. Amintiți-vă: cu cât sunt mai multe scripturi, cu atât TTI va fi mai lung și acest lucru poate varia de la un dispozitiv la altul.

Să luăm exemplul unui smartphone cu un procesor mai puțin puternic decât un computer. Un site încărcat pe acesta din urmă va suferi în mod tragic impactul numărului de scripturi Javascript.

Recomandările Google sunt de a elimina sau a amâna scripturile care nu sunt necesare pentru stabilitatea și redarea site-ului web mobil. Deci, verificați JavaScript, păstrați simplu designul versiunii mobile și evitați utilizarea excesivă a elementelor grele, cum ar fi un SLIDER.

Cum se Reduce Scorul Time to Interactive (TTI) cu WP Rocket

După cum s-a văzut în partea anterioară, executarea JavaScript este cel mai important factor care afectează metrica TTI. Amânând și amânând JavaScript folosind WP Rocket, veți îmbunătăți viteza site-ului dvs. WordPress.

Să cercetăm caracteristicile WP Rocket care îmbunătățesc gradul TTI.

Analizând Impactul WP Rocket Asupra Scorului TTI folosind PSI

Pentru a vă îmbunătăți scorul TTI, vă recomandăm să utilizați WP Rocket, cel mai bun plugin de cache pentru WordPress.

Cei de la WP Rocket au efectuat un audit de viteză pentru un furnizor de servicii de catering din Franța numit „Le point Gourmand …” utilizând Google PageSpeed Insights. Să aruncăm o privire asupra scorului nostru de performanță înainte și după WP Rocket:

Scorul de performanță înainte de a activa WP Rocket	Scorul de performanță cu WP Rocket activat

Scorul Lighthouse înainte de WP Rocket: 51/100

• În portocaliu: TTI a fost de 7,0 s, TBT a fost de 480 ms
• În roșu: Speed Index a fost de 6,0 s și LCP de 7,1 s

Scorul Lighthouse după utilizarea WP Rocket: 95/100

• În verde: Speed Index, FCP, TBT, CLS și … TTI!

Vă amintiți că secțiunile de diagnostic și oportunități erau pline de probleme roșii înainte de a activa WP Rocket? Site-ul nu a avut o stare de sănătate foarte bună și s-au găsit multe probleme legate de JS:

Optimizarea performanțelor cu WP Rocket

După ce au activat WP Rocket, au activat și următoarele opțiuni, așa cum s-a recomandat în secțiunea anterioară:

• Optimizarea fișierelor JS (încărcați JS amânat și întârziați caracteristicile de execuție JS)

• Optimizarea fișierelor CSS, de la reducere la optimizarea livrării CSS:

• Au adăugat câteva adrese URL de preluat și le-a crescut din nou scorul:

• De asemenea au folosit caracteristica WP Rocket „Fonturi de încărcare”:

În concluzie, lista lor de „Audituri trecute” a crescut semnificativ, iar unele probleme precum „Minify JS”, „Minimize main-thread works”, „Remove JS neutilizate” sau „Eliminarea resurselor de blocare a redării” au dispărut datorită lui WP Rocket.

Concluzie

Sperăm că acest ghid tehnic v-a ajutat să înțelegeți: Cum să Îmbunătățiți Time to Interactive (TTI) pe WordPress.

TTI este o măsură importantă de performanță centrată pe utilizator, deoarece reprezintă 10% din gradul de performanță Lighthouse. Optimizarea acestei valori poate ajuta vizitatorii să perceapă o îmbunătățire vizibilă a vitezei în care pot interacționa pe deplin cu conținutul de pe pagina dvs.

Cel mai simplu și mai convenabil mod de a obține un scor TTI excelent este instalarea WP Rocket care aplică automat 80% din cele mai bune practici de performanță web după activare.

Un alt avantaj al utilizării WP Rocket, este o soluție all-in-one: nu este nevoie să aveți mai multe pluginuri de performanță activate pentru fiecare recomandare.

Amintiți-vă că puteți conta întotdeauna pe garanția lor de rambursare de 100% în termen de 14 zile de la achiziție, dacă simțiți că WP Rocket nu este pentru dvs.

Faceți vizitatorii să rămână pe site-ul dvs. chiar acum!

Recomandarea autorului:

• Google Page Experience Actualizare 2021 – Cum Să Vă Pregătiți Site-ul WordPress
• Cum să Testați Timpul de Răspuns al Serverului DNS
• Cum se Îmbunătățește Speed Index (SI) pe WordPress
• 10 Moduri Să Îmbunătăți First Contentful Paint (FCP) în WordPress