Calea critică de redare: ce este și cum să o optimizezi

Când vorbim despre oferirea utilizatorilor unei experiențe web ultra-rapide, adesea ne concentrăm doar pe ceea ce ar trebui să facem noi, în calitate de proprietari de site-uri web și dezvoltatori web.

Dar adevărul este:

Oferirea unei experiențe web rapide necesită, de asemenea, multă muncă din partea browserului.

Primește fișierele noastre HTML, CSS și JavaScript și ia pași specifici pentru a le converti în pixeli pe ecran.

Secretul pentru a vă accelera performanța constă în înțelegerea a ceea ce se întâmplă între primirea resurselor și procesarea acestora pentru a le transforma în pixeli randați.

Acest proces este cunoscut și sub numele de calea critică de redare (CRP) .

Și în acest articol, veți afla tot ce trebuie să știți despre CRP și cum să îl optimizați pentru o randare mai rapidă.

• Ce este Calea Critică de Redare?
• Secvența Critical Rendering Path explicată
• Cum să optimizați calea critică de redare a site-ului dvs
• 3 plugin-uri WordPress pentru a vă optimiza CRP
• Lista de verificare pentru optimizarea CRP

Sa incepem!

Ce este Calea Critică de Redare?

Calea critică de redare se referă la secvența de pași pe care îi face un browser web pentru a converti codul HTML, CSS și JavaScript într-o reprezentare vizuală pe ecranul unui utilizator.

Implica o serie de procese, cum ar fi construirea modelului de obiecte document (DOM), generarea modelului de obiecte CSS (CSSOM) și combinarea ambelor pentru a crea arborele de randare. Arborele de randare este apoi folosit pentru a calcula aspectul și a picta pixelii de pe ecranul utilizatorului.

Optimizarea căii critice de redare, pe de altă parte, se referă la reducerea timpului petrecut de browserul web pentru a executa fiecare pas al secvenței, acordând prioritate conținutului relevant pentru acțiunea curentă a utilizatorului.

Pentru a vă asigura că eforturile dvs. de optimizare au lovit unghiul, trebuie să aveți o înțelegere aprofundată a fiecărui pas al secvenței. Prin urmare, următoarele două paragrafe sunt esențiale și vă recomandăm insistent să le citiți înainte de a lua măsuri.

Secvența căii critice de redare explicată

Iată o scurtă prezentare generală a pașilor efectuati de browser atunci când redarea unei pagini:

1. Browserul descarcă și analizează marcajul HTML și creează DOM.
2. Apoi, descarcă și procesează marcajul CSS și construiește modelul de obiecte CSS (CSSOM).
3. Apoi, combină nodurile necesare din DOM și CSSOM pentru a crea Arborele de randare, o structură arborescentă a tuturor nodurilor vizibile necesare pentru a reda pagina.
4. Acesta calculează dimensiunile și poziția fiecărui element de pe pagină prin procesul de Aspect.
5. În cele din urmă, browserul pictează pixelii de pe ecran.

Acum haideți să facem parte din fiecare pas.

DOM

Document Object Model (DOM) este reprezentarea internă a browserului a documentului HTML.

Când o pagină web este încărcată, browserul analizează codul HTML și creează o structură arborescentă de noduri care reprezintă elementele din document. Fiecare nod corespunde unui element HTML și are proprietăți care îi descriu atributele, conținutul și poziția în arbore.

Important: Browserul construiește DOM-ul treptat, permițându-ne să optimizăm redarea paginii prin construirea unei structuri eficiente și evitând dimensiunile excesive ale DOM.

CSSOM-ul

În timp ce DOM-ul conține tot conținutul paginii, CSSOM include toate informațiile despre cum să stilați DOM-ul.

O altă diferență între DOM și CSSOM este că:

Construcția DOM este graduală, în timp ce CSSOM nu.

Când un site web este încărcat, browserul trebuie să proceseze CSS pentru a aplica stilurile. Spre deosebire de HTML, care poate fi procesat bit cu bit, CSS trebuie procesat dintr-o dată. Acest lucru se datorează faptului că unele stiluri pot fi suprascrise de altele mai târziu în fișierul CSS, astfel încât browserul trebuie să aștepte până când a citit întreg fișierul CSS înainte de a decide ce stiluri să aplice.

Acest lucru se face pentru a evita afișarea stilurilor care vor fi ulterior suprascrise și irosirea resurselor.

Pur și simplu pune:

Browserul blochează procesul de randare până când primește și analizează tot CSS-ul.

De aceea, CSS este considerat o resursă de blocare a randării.

Arborele Render

Arborele de randare este combinația dintre DOM și CSSOM pe care browserul le folosește pentru a crea reprezentarea vizuală a paginii web.

Browserul folosește Arborele de randare pentru a calcula dimensiunile și poziția nodurilor ca intrare pentru procesul de pictare.

Important: numai conținutul vizibil este capturat în arborele de randare. De obicei, secțiunea de cap nu conține informații vizibile și, prin urmare, este exclusă. În plus, dacă un element are o proprietate display: none , nici elementul, nici descendenții săi nu sunt incluse în arborele de randare.

Aspect

După ce se construiește arborele de randare, următorul pas este aspectul. Aspectul stabilește plasarea și orientarea fiecărui element pe pagină prin definirea dimensiunilor, poziției și interrelațiilor acestuia.

Dar iată chestia:

Performanța aspectului este afectată de DOM.

Cu alte cuvinte:

Cu cât este mai mare numărul de noduri DOM, cu atât procesul de layout este mai lung.

A picta

Etapa finală este pictarea pixelilor pe ecran, care urmează crearea arborelui de randare și aspectul.

Inițial, întregul ecran este vopsit în timpul procesului de încărcare. Ulterior, doar părțile afectate ale ecranului sunt revopsite, deoarece browserele sunt concepute pentru a revopsi doar zona necesară.

Rețineți că durata etapei de vopsire depinde de natura actualizărilor implementate pe arborele de randare.

Acum să vedem ce optimizări puteți aplica pentru a ajuta browserul și pentru a accelera unele procese.

Cum să optimizați calea critică de redare a site-ului dvs

Timpul necesar browserului pentru a rula întregul proces poate varia. Există o mulțime de părți mobile care contribuie la lungimea căii critice:

• Dimensiunea documentului
• Numărul de cereri
• Dispozitivul utilizatorului
• Stiluri aplicate

Cu toate acestea, există trei tehnici care sunt considerate a fi opțiunile de bază atunci când vine vorba de optimizarea CRP:

1. Minimizați numărul de resurse critice prin amânarea celor necritice sau eliminându-le cu totul
2. Optimizați numărul de solicitări necesare împreună cu dimensiunea fișierului fiecărei cereri
3. Prioritizează descărcarea activelor critice, scurtând astfel lungimea căii critice

Să ne aprofundăm puțin în modul de implementare a fiecăreia dintre strategiile de optimizare recomandate:

Optimizați resursele CSS și JS care blochează randarea

Știți deja că atunci când browserul întâlnește resurse CSS și JS care blochează randarea, trebuie să le descarce, să le analizeze și să le execute înainte de a face orice altceva, inclusiv randarea.

Când vine vorba de optimizarea CSS, puteți implementa următoarele tehnici:

• CSS critic. Identifică setul minim de reguli CSS necesare pentru a reda porțiunea vizibilă a unei pagini web și le livrează browserului ca CSS inline, mai degrabă decât să încarce o foaie de stil completă. Încărcând doar CSS-ul necesar pentru conținutul de deasupra paginii, browserul poate reda pagina mai rapid și poate îmbunătăți experiența utilizatorului . Acest lucru se datorează faptului că browserul nu trebuie să aștepte ca întreaga foaie de stil să fie încărcată înainte de a randa pagina.
  
• Combinați fișierele CSS. Concatenarea CSS este procesul de combinare a mai multor fișiere CSS într-un singur fișier. Această tehnică îmbunătățește performanța prin reducerea numărului de solicitări HTTP necesare pentru a încărca o pagină web , deoarece browserul trebuie să descarce și să analizeze doar un singur fișier CSS în loc de mai multe.

În ceea ce privește fișierele JavaScript, iată ce puteți face:

• Întârzie încărcarea JS. Amânarea încărcării JS este o tehnică care vă va accelera site-ul prin întârzierea încărcării fișierelor JavaScript până după ce documentul HTML a fost încărcat și analizat . Puteți utiliza atributul defer pe eticheta de script care face referire la fișierul JS. Este important de reținut că atributul defer ar trebui să fie utilizat numai pentru fișierele JS care nu trebuie să fie executate imediat după încărcare (de exemplu, fișiere care sunt utilizate doar pe anumite pagini), deoarece ordinea de execuție poate fi imprevizibilă dacă mai multe scripturi amânate sunt folosite.
  
• Încărcați JS asincron. Unele fișiere JS pot necesita utilizarea atributului asincron, care permite ca fișierul să fie încărcat și executat asincron cu analizarea documentului HTML.

Există câteva optimizări pe care le puteți aplica atât pentru CSS, cât și pentru JavaScript:

• Minificare. Minimizarea implică eliminarea caracterelor inutile, cum ar fi spațiile albe, comentariile și întreruperile de rând, din fișierele CSS și JavaScript. Acest proces poate reduce semnificativ dimensiunea fișierelor fără a afecta funcționalitatea sau aspectul acestora .
  
• Eliminați CSS și JS neutilizate. CSS și JS neutilizate se referă la reguli specifice care nu sunt utilizate pe o anumită pagină, dar sunt încă încărcate. Eliminarea acestor părți ale fișierelor dvs. va afecta direct cât de rapid creează browserul arborele de randare .

Optimizați-vă resursele de blocare a redării pe pilot automat. Instalați NitroPack →

Reduceți dimensiunea fișierelor dvs

Pentru a reduce cantitatea de date pe care browserul trebuie să le descarce, putem folosi tehnici precum minimizarea, compresia și stocarea în cache a resurselor HTML, CSS și JavaScript.

Știți deja ce înseamnă minificarea, așa că să ne concentrăm asupra celorlalte două:

• Comprimare. Comprimarea este o tehnică care aplică algoritmi pentru a rescrie codul binar al fișierelor folosind mai puțini biți decât originalul. Ca rezultat, fișierele dvs. au dimensiuni mult mai mici, ceea ce reduce timpul de încărcare a paginii și utilizarea lățimii de bandă.
  
• Memorarea în cache. Memorarea în cache profită de cache-ul HTTP implementat în fiecare browser. Pentru a asigura o stocare eficientă în cache, trebuie să ne asigurăm că fiecare răspuns de server oferă antetele HTTP corecte, indicând browserului când și cât timp ar trebui să memoreze în cache resursele solicitate.

Bazați-vă pe cel mai avansat mecanism de stocare în cache. Obțineți NitroPack astăzi →

Prioritizează descărcarea activelor critice

În general, browserele sunt destul de bune în a prioritiza cele mai importante resurse și a le prelua mai întâi. Cu toate acestea, în unele cazuri, îi puteți ajuta să vă încarce site-ul și mai repede, prioritzând manual cele mai importante resurse.

Puteți folosi indicii de resurse pentru a spune browserului cum să gestioneze anumite resurse sau pagini web.

Iată cele trei principale:

• Link rel=prefetch. Preluare este un indiciu de resurse cu prioritate redusă care permite browserului să preia resursele care ar putea fi necesare mai târziu și să le stocheze în memoria cache a browserului.

• Link rel=preconectare. Directiva de preconectare ajută browserul să stabilească conexiuni timpurii înainte de a trimite o solicitare inițială către server.

• Link rel=preîncărcare. Preîncărcarea este folosită pentru a forța browserul să descarce o resursă mai devreme decât ar descoperi browserul, deoarece este crucială pentru pagină.

Important: Preluarea și preconectarea sunt indicii de resurse și sunt executate așa cum consideră browserul de cuviință. Directiva de preîncărcare este o comandă care este obligatorie pentru browsere. Aflați mai multe despre cum să implementați sugestii de resurse.

Acum că știți cum să gestionați optimizarea căii critice de redare, să ne uităm la câteva pluginuri WordPress care pot automatiza procesul.

3 plugin-uri WordPress pentru a optimiza calea critică de redare

Toate optimizările menționate mai sus se pot face manual. Cu toate acestea, unele dintre ele necesită cunoștințe tehnice pentru a vă asigura că nu vă veți sparge site-ul în timpul procesului.

Din fericire pentru toți utilizatorii WordPress, există pluginuri care pot ajuta la optimizarea CRP. Să verificăm primii 3 candidați, după părerea noastră:

NitroPack - Soluția All-in-One

NitroPack este soluția lider de optimizare a vitezei site-ului, care combină peste 35 de funcții de performanță web. Când vine vorba de optimizarea căii critice de randare, NitroPack va gestiona automat optimizări precum:

• CSS critic
• Minificare CSS și JS
• Compresie CSS și JS
• Memorarea în cache
• Întârzie încărcarea JS
• Eliminați CSS și JS neutilizate

Dar funcțiile de optimizare nu se termină aici. Veți primi, de asemenea, setul complet de instrumente de performanță:

• CDN încorporat
• Stivă completă de optimizare a imaginii
• Optimizarea fonturilor
• Memorarea în cache a coșului de comerț electronic
• Asistență 24/7

Accelerează automat site-ul tău. Obțineți NitroPack astăzi →

WP Super Cache - Plugin numai pentru memorarea în cache

WP Super Cache este un plugin de stocare în cache care oferă în primul rând funcții de stocare în cache și compresie HTTP, dar nu se limitează la minimizarea resurselor și optimizarea JavaScript cu atribute asincrone și defer.

Cele mai notabile caracteristici includ:

• Activați memorarea în cache pentru toți vizitatorii
• Dezactivați memorarea în cache pentru vizitatorii conectați
• Comprimați paginile astfel încât acestea să fie difuzate mai rapid vizitatorilor
• Reconstrucție cache

Performanță rapidă

Swift Performance este un alt plugin pe care îl puteți găsi util în căutarea CRP optimizată. Unele dintre caracteristicile sale includ:

• Minimizarea fișierelor CSS și JavaScript
• CSS critic
• Memorarea în cache
• Optimizarea imaginii

Optimizarea căii critice de redare [listă de verificare]

Am acoperit o mulțime de teren în acest articol, așa că iată o listă de verificare la îndemână a tuturor optimizărilor pe care le-am menționat:

• Generați CSS critic
• Combinați fișierele CSS
• Întârzie încărcarea JavaScript
• Încărcați JavaScript asincron
• Minimizează CSS și JavaScript
• Comprimați CSS și JavaScript
• Eliminați CSS și JavaScript neutilizate
• Aplicați minimizarea
• Aplicați compresie
• Utilizați memorarea în cache
• Implementați linkul rel=preload
• Implementați linkul rel=prefetch
• Implementați linkul rel=preconnect

Descărcați lista de verificare pentru optimizarea CRP →

Și nu în ultimul rând - nu uitați să testați înainte și după fiecare optimizare!