homefinance blog
Ce este exact timpul total de blocare?
Pentru a înțelege mai bine timpul total de blocare, trebuie să definim sarcini lungi. Ce sunt sarcinile lungi? Sarcinile lungi sunt cauzate de codul JavaScript care utilizează firul principal al procesorului serverului dvs. la încărcare. Acest cod face ca interfața de utilizare să devină înghețată, chiar dacă pare gata vizual pentru a fi accesată de utilizator. Un exemplu ar fi un buton care s-a încărcat, dar nu poate fi apăsat. Când interfața dvs. de utilizare este înghețată, clicurile, atingerile, glisările sau orice altă intrare de utilizator sunt de obicei blocate, deoarece gestionarea evenimentelor/clicurilor nu au fost încă atașate elementului (aceasta este cunoscută ca porțiunea de blocare a unei sarcini lungi). Dacă aveți nevoie de o explicație simplă: apare aspectul vizual al oricărui element pe care îl încărcați, dar codul care îl face să funcționeze nu s-a încărcat încă.
Partea „lungă” a sarcinilor lungi este definită ca orice sarcină care durează peste 50 de milisecunde pentru a fi finalizată. Motivul pentru care 50 de milisecunde este marca de bază este pentru că respectă modelul RAIL. Puteți citi mai multe despre modelul RAIL aici, dar în esență este un set de reguli de performanță pentru a asigura o experiență bună pentru utilizator. Principala concluzie a modelului feroviar este că site-ul dvs. se încarcă mai repede, sau Google vă va penaliza, iar vizitatorii dvs. vor fi nemulțumiți (sau chiar vor abandona site-ul cu totul) Acest lucru este în concordanță cu recentul pivot al Google către experiența utilizatorului.
TLDR; Timpul total de blocare este suma tuturor timpilor de blocare individuali ai sarcinilor lungi. Cum se punctează timpul total de blocare? Instrucțiunile pentru timpul total de blocare sunt destul de simple. Dacă timpul total de blocare scade sub 300 de milisecunde, ești gata. Dacă se încadrează în intervalul de 300 până la 600 de milisecunde, trebuie să-l îmbunătățiți, iar dacă este peste 600 de milisecunde, atunci este esențial să o abordați imediat. 
Timpul total de blocare reprezintă 25% din scorul de performanță PageSpeed, așa că obținerea corectă este esențială pentru un scor bun. Pentru a calcula scorul real pentru timpul total de blocare, Google va lua cifra de milisecunde a TBT și va compara cu primele 10000 de site-uri web pe care le-a indexat. Ceva care ni s-a părut interesant a fost faptul că 404 de pagini au fost incluse în acest index al primelor 10.000 de site-uri web și probabil că au avut un impact asupra cifrei mediane. 404 pagini vor avea un timp total de blocare mult mai mic în comparație cu o pagină de pornire completă, deoarece 404 pagini au JavaScript foarte limitat de încărcat.
Deoarece sunteți comparat cu primele 10.000 de site-uri web, trebuie să vă îmbunătățiți jocul și să vă asigurați că obțineți un scor sub 300 de milisecunde. De ce mi-ar păsa? Dacă te gândești la definițiile noastre, timpul de blocare intră în joc doar dacă durează 50 de milisecunde sau mai mult pentru a se încărca. Datorită modului în care sunt încărcate site-urile web, timpul de blocare este un aspect în orice site. Devine o problemă doar dacă începe să ocupe timp de acces și să blocheze utilizatorii să acceseze conținutul de pe site. Imaginați-vă că accesați un site web și trebuie să așteptați multe secunde înainte de a putea face clic pe butoane sau de a derula în jos în pagină. Dacă aș avea nevoie să răsfoiesc mai multe pagini de pe un site web individual unde acesta a fost cazul, aș fi înfuriat de experiența utilizatorului. Această nouă măsurătoare este încercarea Google de a îmbunătăți acest aspect al experienței utilizatorului pe site-urile web.
Nu numai că abordarea acestei valori face ca utilizatorii dvs. să aibă o experiență mai bună pe site-ul dvs. web, dar probabil că va afecta și poziționarea în clasamentul motorului de căutare. Google a anunțat în mai că, în următoarele șase luni, vor trece la utilizarea elementelor vitale web (timpul total de blocare este un aspect al elementelor vitale web) în algoritmul motorului de căutare Google (Pe lângă pilonii existenți ai SEO, care este un conținut bun și rapid. site-uri web). Ceea ce înseamnă aceasta este că există șanse mari ca această măsurătoare individuală să aibă un impact direct asupra unui aspect al algoritmului în viitorul apropiat.
Cum abordez un timp total de blocare lent? Timpul total de blocare este cauzat direct de JavaScript, așa că ar trebui să optimizați JavaScript la nivel de site în toate modurile posibile. Avem mai multe ghiduri de optimizare pentru JavaScript și cod pe site-ul nostru web, dar principalele lucruri pe care le puteți face pentru a rezolva acest lucru sunt următoarele. Optimizare generală (Fă asta mai întâi) Eliminați JavaScript neutilizat. Eliminarea JavaScript neutilizat nu este o idee. Dacă încărcați scripturi care nu sunt folosite, încărcați inutil date și măriți viteza de încărcare a paginii. Acest lucru nu are rost, iar eliminarea JavaScript va afecta serios viteza site-ului dvs. Pe WordPress, există mai multe instrumente care vă pot ajuta să faceți acest lucru. Instrumentul nostru preferat se numește curățarea activelor, care vă permite să activați și să dezactivați scripturi individuale pe pagini individuale.
Vă arată toate fișierele CSS și JavaScript care sunt apelate pe o pagină individuală. De exemplu, pe pagina dvs. de pornire, puteți încărca mai multe fișiere CSS și JavaScript pentru pluginuri, teme și multe altele. Dacă știți cu adevărat că nu utilizați un fișier JavaScript pe această pagină, îl puteți elimina cu ușurință prin simpla apăsare a unui comutator numit „descărcare”. descărcarea fișierului script vă va asigura că nu se încarcă pe o pagină în care nu este folosit. Puteți face acest lucru și pentru toate CSS-urile de pe pagini individuale. De asemenea, mergem și dezactivăm pluginurile pe paginile care nu sunt folosite. Cu curățarea acidă, de obicei dezactivăm pluginurile la nivel de site și apoi le activăm pentru paginile individuale pe care sunt utilizate. De exemplu, folosim numai formulare gravitaționale pe pagina noastră de contact, așa că vom încărca numai formulare gravitaționale pe pagina de contact creată, nu are rost să încărcăm CSS și JavaScript asociate care vin cu formularele gravitaționale pe pagina noastră de pornire, deoarece nu există formulare. Acolo.
JavaScript terță parte poate fi, de asemenea, o altă cauză majoră a unui scor slab în valoarea totală a timpului de blocare din statisticile Google PageSpeed. Cu JavaScript terță parte, doriți să încărcați doar scripturi esențiale. Dacă puteți alege să eliminați scriptul de pe site-ul dvs. web sau să îl difuzați local, acesta este cel mai bun pariu. Site-ul dvs. web încarcă probabil JavaScript terță parte din mai multe surse. Dacă utilizați Google Analytics, încărcați JavaScript terță parte, dacă utilizați procesarea plăților Stripe sau PayPal, încărcați JavaScript terță parte, iar lista poate continua.
Eliminarea acestor scripturi este de obicei imposibilă sau imposibil de făcut, așa că încărcarea eficientă a JavaScript terților este cel mai bun remediu. Cu excepția cazului în care scriptul dvs. trebuie să ruleze înainte ca pagina să fie randată, ar trebui să o încărcați întotdeauna asincron (puteți, de asemenea, să-l amânați). modul în care faceți acest lucru este prin adăugarea etichetelor async sau defer pe elementul de script. Cu toate acestea, dacă sunteți un utilizator ocazional de WordPress, acest lucru poate fi dificil, deoarece ar putea fi codificat greu în temele sau pluginurile dvs. Asta înseamnă că schimbarea acestuia la nivel de cod nu are niciun sens, deoarece fiecare actualizare a unui plugin sau temă l-ar suprascrie.
Aici revine instrumentul nostru preferat de optimizare a performanței, Asset Cleanup. Pentru fișierele JavaScript individuale, cu versiunea pro de curățare a activelor, puteți alege să o încărcați asincron sau să o amânați cu o singură casetă de selectare. 
Încărcarea eficientă a JavaScript terților se încadrează în categoria „eliminați resursele care blochează randarea” de optimizare a vitezei. Dacă doriți să aflați mai multe, avem o postare completă pe blog despre cum să eliminați resursele care blochează randarea aici: https://isotropic.co/how-to-eliminate-render-blocking-resources-for-wordpress-websites/ .
Optimizarea JavaScript în ansamblu va avea, de asemenea, un impact direct asupra valorii timpului total de blocare. Optimizarea JavaScript constă în îmbinarea și minimizarea tuturor fișierelor JavaScript, apoi încărcarea lor asincron sau amânarea lor în funcție de modul în care sunt utilizate în pagina dvs. Cu WordPress, există o mulțime de instrumente automate care vă vor permite să faceți acest lucru. Preferatul nostru se numește WordPress rocket, care este un plugin de cache și performanță. Iată ce avem de spus despre plugin, citat din articolul nostru How To Eliminate Render Blocking Resources: WP Rocket este pluginul nostru preferat de viteză WordPress. Este plătit, dar extrem de puternic – raportul preț-valoare este în afara graficelor. Vă va permite să faceți multe, dar specific acestei postări, puteți încărca Javascript amânat, puteți exclude unele fișiere din această optimizare (cele importante care sunt necesare imediat) și puteți rula amânarea în „modul sigur” care încearcă să se automatizeze excludeți scripturile esențiale din amânare. Pe partea CSS, puteți determina automat ce CSS ar trebui să fie încărcat asincron pe site-ul dvs. și să aplicați acel stil de încărcare (totul ca proces de fundal). Ne place acest plugin pentru că este foarte puternic (și ușor ) atât pentru dezvoltatori, cât și pentru proprietarii de site-uri web mai puțin tehnici. Să presupunem că ați abordat toate aceste trei puncte de optimizare și că încă obțineți un scor slab în timpul total de blocare. Dacă ne întoarcem la elementele individuale care alcătuiesc timpul total de blocare, doar sarcinile lungi sunt asociate cu această metrică. Modul de a aborda sarcinile/scripturile lungi plictisitoare este de a le identifica și de a le despărți sau de a le elimina cu totul. Dacă o optimizare standard a site-ului dvs. nu face nimic pentru timpul total de blocare, atunci probabil că există câteva scripturi individuale care cauzează un scor slab în această măsurătoare. Pentru a remedia acest lucru, mai întâi trebuie să identificați scripturile care cauzează problema și apoi să le eliminați/optimizați individual. Optimizarea individuală a sarcinilor lungi Pentru a optimiza individual o sarcină lungă, mai întâi trebuie să o identificați. Dacă ne gândim înapoi la definiția noastră standard, o sarcină lungă este orice lucru care durează peste 50 de milisecunde. Într-o actualizare recentă a instrumentelor de dezvoltare oferite în browserul web Chrome, Google a adăugat o funcționalitate care vă va permite să identificați cu ușurință sarcinile lungi. 
Acest grafic identifică vizual sarcinile lungi. puteți vedea că sarcinile lungi sunt exact asta, sarcini lungi . Acestea durează peste 50 de milisecunde pentru a se încărca și puteți vedea asta pe axa milisecunde din partea de sus a graficului. Puteți accesa această diagramă în panoul de performanță al instrumentelor Chrome Dev. Sub panoul de performanță, faceți clic pe butonul de înregistrare și reîncărcați site-ul. Acest lucru va înregistra tot ceea ce se încarcă și are loc în timpul procesului de randare a paginii dvs. Odată ce pagina este complet încărcată, opriți înregistrarea și va crea o diagramă similară cu cea afișată mai sus. Dacă izolați evenimentul de încărcare Evenimentul de încărcare al site-ului web folosind interfața cu utilizatorul din partea de sus a ferestrei, puteți mări și mări pentru a vedea sarcinile lungi semnalate. 
Am ajustat scara înregistrării pentru a arăta doar unde am încărcat pagina web. În înregistrare, sarcinile lungi sunt identificate de bara gri cu un triunghi roșu de colț. 
De exemplu, bara gri cu triunghiul colțului roșu și hașura care ocupă jumătate din bară este o sarcină lungă. Trecând cu mouse-ul peste el, putem vedea cât de mult a durat încărcarea. În acest caz, a fost nevoie de 83 de milisecunde, ceea ce depășește limita de 50 de milisecunde pentru a comuta sarcina lungă. Făcând clic pe bara individuală, mai multe informații vor apărea în partea de jos a ferestrei. 
Acest lucru în sine nu este rău, dar dacă aveți prea multe sarcini lungi care depășesc 50 de milisecunde, toate se adună în timpul total de blocare. Puteți utiliza acest instrument pentru a identifica sarcinile lungi care sunt extrem de nerespectate. Așadar, să presupunem că sarcina ta medie lungă a durat între 50 și 150 de milisecunde. Dacă identificați vizual o sarcină care durează mult mai mult decât sarcina dvs. medie, atunci ați dori să o abordați. Deci, să presupunem că ați identificat vizual o sarcină care dura 600 de milisecunde de la început până la sfârșit. Acest lucru afectează serios scorul total al timpului de blocare, așa că abordarea acestuia va crește cu siguranță această valoare. Dacă ați identificat o sarcină care trebuie optimizată, cel mai bun mod de a face acest lucru este să o împărțiți în bucăți mai mici. De preferință, ați dori să împărțiți codul în bucăți de încărcare de 50 de milisecunde. Aceasta înseamnă că se încadrează sub pragul pentru timpul total de blocare și nu se va aplica valorii agregate. Dacă doriți să citiți despre teoria din spatele divizării codului, Google a publicat un ghid grozav despre cum să faceți acest lucru. https://web.dev/reduce-javascript-payloads-with-code-splitting/ Cu toate acestea, acest ghid este mai orientat către dezvoltatorii care creează proprietăți digitale de la zero. Dacă sunteți pe platforma WordPress, utilizați deja un sistem de management al conținutului și o platformă pre-ambalată. https://www.smashingmagazine.com/2018/02/code-splitting-wordpress-pop/ Dacă ați aruncat o privire la articolul Smashing Magazine, veți vedea cu siguranță că este destul de complicat să împărțiți codul în WordPress. Nu are prea mult sens să abordați sarcinile care se încadrează în perioada de timp mediană de blocare, dar dacă găsiți o sarcină care este de două ori, de patru ori, de șase ori mai lungă decât orice altă sarcină, ar trebui să vă faceți timp pentru a o rezolva. . În loc să faceți acest lucru, dacă ați identificat o sarcină foarte lungă care trebuie optimizată, poate fi mai bine să o eliminați pur și simplu și să o înlocuiți cu ceva care face același lucru. Deci, de exemplu, dacă provine dintr-un script terță parte, înlocuirea scriptului terță parte cu altceva poate fi o idee bună. Dacă provine de la un plugin, dezactivarea pluginului pe paginile care nu este folosită sau înlocuirea pluginului poate fi o idee mai bună decât încercarea de a împărți JavaScript. Și, de cele mai multe ori, nu va trebui să luați în considerare nici măcar împărțirea codului, deoarece o optimizare generală a JavaScript ar trebui să fie mai mult decât suficientă pentru a aborda o valoare slabă a timpului total de blocare cu un site web WordPress. Concluzie Acest articol ar fi trebuit să abordeze întrebarea esențială a „ce este timpul total de blocare”, oferindu-vă o imagine de ansamblu bună asupra a ceea ce este inclus în metrică, cum este calculată, de ce ar trebui să vă pese și cum să îmbunătățiți TBT. Pe scurt, timpul total de blocare este timpul total necesar sarcinilor lungi pentru a deveni interactive. Tradus în engleză, aceasta se referă la timpul dintre încărcarea unui element individual și interactivitatea unui element individual. Timpul total de blocare adună toți timpii de blocare individuali și scuipă cifra agregată. Vrei să obții un punctaj sub o limită de 300 de milisecunde. Dacă înregistrați peste 300 de milisecunde timp total de blocare trimis, aceasta înseamnă că trebuie să abordați această măsură individual. Îmbunătățirea timpului total de blocare se poate face concentrându-se pe optimizarea generală JavaScript. Aceasta înseamnă îmbinarea și diminuarea fișierelor, optimizarea sau eliminarea scripturilor terță parte și încărcarea lor asincronă sau amânarea acestuia. Dacă niciuna dintre aceste metode nu funcționează, va trebui să abordați sarcina individuală lungă, intrând manual și optimizând-o. Dacă aveți întrebări despre timpul total de blocare și despre cum să vă optimizați site-ul WordPress, nu ezitați să contactați în comentarii — ne-ar plăcea să vă indicăm câteva resurse care vă pot ajuta.
