de Sibylle Sehl

O introducere în performanța web și calea critică de redare

O introducere in performanta web si calea critica de redare
Fotografie de Chris Liverani pe Unsplash

Cei mai mulți dintre noi lucrează cu web în fiecare zi. A devenit normal să primim toate informațiile de care avem nevoie aproape instantaneu. Dar modul în care acea pagină web este de fapt pusă împreună și livrată nouă este un pic misterios.

Uneori paginile web sunt uimitor de rapide și, uneori, trebuie să așteptăm mult timp pentru a vedea conținutul – adesea rezultând frustrarea noastră și abandonarea paginii. În articolul următor, voi încerca să clarific un pic lucrurile.

Declinare de responsabilitate: Toate informațiile pe care le împărtășesc în această postare sunt ceea ce am învățat prin cursurile gratuite menționate în partea de jos și rezumat aici pentru oricine este interesat.

Calea critică de redare

În primul rând, ar fi util să înțelegem pașii prin care trece de fapt browserul. Începe cu fișiere HTML simple, CSS și JavaScript trece prin redarea și pictarea unei pagini și ajunge în cele din urmă pentru a deveni ceea ce vede utilizatorul.

Acești pași de la diferitele fișiere HTML, CSS și JS la o pagină pictată sunt denumiți în mod obișnuit Calea de redare critică (sau CRP pe scurt).

Calea de redare critică constă din cinci pași diferiți, care sunt cel mai bine explicați într-un grafic.

O introducere in performanta web si calea critica de redare
Diferitele etape ale căii critice de redare (DOM și CSSOM se referă la Document Object Model și respectiv CSS Object Model)

Construirea DOM și CSSOM

Majoritatea paginilor web constau în HTML, CSS și JavaScript, care toate formează o parte critică în CRP. Pentru a citi și procesa codul HTML, browserul va construi Modelul de obiect document (DOM). Browserul analizează etichetele HTML (

,

,

și

etc.) din marcajul dvs. și le convertește în jetoane care la rândul lor sunt create în noduri în paralel. Prin procesarea acestor jetoane StartTag și jetoane EndTag în ordine și văzând care sunt primele, browserul își poate stabili ierarhia și poate stabili părinții și copiii.

Totuși, nu lăsați această terminologie să vă sperie. Imaginați-vă DOM ca un copac mare cu ramuri care reprezintă noduri părinte și care la rândul lor conțin frunze, nodurile copil. Acest arbore va reprezenta dependențele nodurilor din HTML-ul nostru și arată oarecum similar cu acesta:

O introducere in performanta web si calea critica de redare
Luată din școlile W3 (https://www.w3schools.com/js/js_htmldom.asp) – Arborele obiectelor DOM

În imaginea de mai sus, putem vedea elementul rădăcină care cuprinde toți copiii săi, care la rândul lor sunt părinți care conțin și copii. Pune asta cu susul în jos și va arăta aproape ca un copac!

DOM reprezintă astfel marcajul nostru HTML complet. După cum ați văzut, este construit în mod incremental prin procesarea jetoanelor și transformarea lor în noduri. De fapt, putem folosi acest lucru în avantajul nostru prin returnarea codului HTML parțial și oferind utilizatorului indicația că se întâmplă ceva și se redă pe pagină.

După construirea DOM, browserul dvs. va procesa CSS și va crea CSS Object Model (CSSOM). Acest proces este foarte asemănător cu construirea DOM. Dar, în acest proces, spre deosebire de anterior, nodurile copil moștenesc regulile de stilare ale nodurilor părinte – de unde și numele Cascading Style Sheets (CSS).

Din păcate, nu putem procesa în mod incremental CSS parțial, așa cum am putea face cu DOM, deoarece ar putea duce cu ușurință la aplicarea stilurilor greșite dacă un stil suprasolicitat vine mai târziu în proces. Acesta este motivul pentru care CSS blochează redarea, deoarece browserul trebuie să oprească redarea până când primește și procesează toate CSS-urile.

Arborele DOM și arborele CSSOM vor conține toate nodurile și dependențele pe care le avem în pagina noastră.

Colectarea întregului conținut vizibil – Arborele de redare

Browserul trebuie să știe ce noduri să reprezinte efectiv vizual pe pagină. Arborele Render realizează exact acest lucru și este o reprezentare a vizibil conținutul DOM și CSSOM.

Începem să construim Arborele Render prin identificarea nodului rădăcină și apoi copierea tuturor vizibil informații de la DOM și CSSOM. Pentru aceasta verificăm și căutăm etichete care au același selector. Sunt meta date, linkuri și așa mai departe nu copiat în arborele de redare. Același lucru este valabil și pentru CSS care conține „display: none;” deoarece este și un element nevizibil.

Odată ce finalizăm acest proces, obținem ceva similar cu cel de mai jos (observați cum „performanța web” nu este copiată).

1611030670 156 O introducere in performanta web si calea critica de redare
Drepturile de autor pentru imagine aparțin Google și Ilya Grigorik – preluate de la https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction

Arborele de redare este o descriere destul de exactă a ceea ce vi se afișează de fapt pe ecran, captând atât conținut, cât și stiluri asociate. Desigur, acest lucru ar arăta mult mai complex în exemplele din viața reală.

Făcându-l potrivit – Aspect

În timp ce știm acum ce trebuie să afișăm și să redăm paginii, este important să știm Cum este redat. Pentru ca aspectul să arate corect, trebuie să cunoaștem dimensiunea browserului. Aspectul nostru depinde de acesta pentru a calcula pozițiile și dimensiunile corecte pentru toate elementele noastre de pe pagină.

Toate acestea se întâmplă în timpul pasului Layout. Luarea în considerare a pasului Layout este deosebit de importantă pentru dispozitive mobile, unde punctul nostru de vedere se poate schimba atunci când trecem între peisaj și portret atunci când ne rotim telefoanele. Aceasta înseamnă că browserul ar trebui să reexecute pasul de aspect de fiecare dată când ne-am întors telefonul, ceea ce ar putea constitui un blocaj de performanță.

Pictează Pixeli

Acest pas implică de fapt pictarea pixelilor pe ecran, specificată de ce (Arborele de redare) și cum (Aspect). Pasul de pictură include pictura reală a pixelilor (de exemplu, atunci când redimensionați o imagine), spre deosebire de poziționarea ei. Este ceea ce vedeți în cele din urmă pe ecran după aceea.

1611030670 387 O introducere in performanta web si calea critica de redare
Executarea tuturor pașilor CRP în ordine. (Fotografie de ALP STUDIO pe Unsplash)

Să rezumăm

Acum, să reunim din nou toate aceste informații, astfel încât să putem vedea că am înțeles toți pașii pe care trebuie să-i parcurgem în Calea critică de redare (CRP).

  1. Browserul pornește prin construirea DOM analizând toate HTML-urile relevante.
  2. Apoi continuă să analizeze resursele CSS și JavaScript și să le solicite, ceea ce se întâmplă de obicei în capul în care ne punem în mod obișnuit linkurile externe.
  3. Browserul analizează apoi CSS și construiește CSSOM urmat de rularea JavaScript.
  4. Apoi DOM și CSSOM sunt fuzionate împreună în Arborele Render.
  5. Apoi executăm pasul Aspect și pictură pentru a prezenta pagina utilizatorului.

Bine, e bine de știut – dar de ce contează?

Acum, totul este bine de știut și am înțeles mai bine ceea ce face browserul de fapt în fundal. Dar de ce contează exact? Trebuie să știm cu toții ce se întâmplă sub capotă?

Da facem!

Dacă continuăm să mărim dimensiunea fișierelor noastre și nu acordăm atenție la ceea ce îi cerem browserului să redea și să picteze pe pagină, browserul va avea nevoie de mai mult timp pentru a procesa toate resursele. De obicei, rezultă o experiență mai lentă și mai puțin plăcută a utilizatorului, ceea ce înseamnă că paginile nu vor putea fi utilizate și redate corect, ducând la frustrare din partea utilizatorului.

Acest lucru este valabil mai ales dacă solicitați o pagină dintr-o zonă rurală în care banda largă rapidă nu este neapărat cea mai bună.

Dar, din fericire, există câteva modalități în acest sens și ne putem face paginile mai rapide!

1611030671 327 O introducere in performanta web si calea critica de redare
Fotografie de Peter Finger pe Unsplash

Optimizarea performanțelor

Există o serie de strategii pe care le putem folosi pentru a face paginile noastre mai rapide și mai bine utilizate pentru utilizatorii noștri. Acest lucru este deosebit de important pentru utilizatorii care ar putea fi în locații mai îndepărtate în care internetul mai rapid nu este o normă sau în care paginile sunt accesate în mod obișnuit prin intermediul internetului mobil.

Când vorbim de strategii de optimizare, avem aproximativ trei tehnici la dispoziție.

Minimizare, comprimare și stocare în cache

Aceste tehnici pot fi aplicate tuturor HTML, CSS și JS. Apoi, prin dimensiunea lor mai mică, vor reduce cantitatea de date pe care le trimitem înainte și înapoi între client și server. Cu cât trebuie să trimitem mai puțini octeți, cu atât browserul va obține mai repede datele și va începe procesarea și redarea paginii.

Minimizați utilizarea resurselor de blocare a redării (CSS)

CSS în sine blochează redarea așa cum am discutat mai sus, ceea ce înseamnă că browserul va opri redarea paginii până când CSS s-a încărcat complet și este procesat.

Cu toate acestea, putem atenua pentru fișierele CSS mari, deblocând redarea pentru anumite stiluri și ferestre de vizualizare. Facem acest lucru folosind reguli de imprimare în interogările noastre media, analize și orientarea dispozitivului (dacă doriți să știți cum, vă sugerez să consultați resursele de mai jos). În plus, putem reduce numărul de resurse care trebuie încărcate prin includerea unor CSS în anumite circumstanțe.

Minimizați utilizarea resurselor de blocare a analizorului (analizor de documente JS)

De asemenea, putem amâna executarea JavaScript-ului nostru și putem utiliza atribute asincronizate pe scriptul nostru pentru a realiza acest lucru. Aceasta înseamnă că restul paginii poate procesa și, între timp, utilizatorul vede o indicație că se întâmplă ceva pe pagină. De asemenea, înseamnă că nu trebuie să așteptăm încărcarea JavaScript-ului.

Deci, în linii mari, asta ne lasă cu 3 tipare de optimizare:

  1. Minimizați numărul de octeți pe care îi trimiteți
  2. Reduceți numărul de resurse critice din calea de redare critică (este posibil ca analiza să nu fie necesară încărcării chiar de la început când pagina este construită)
  3. Scurtați lungimea critică a căii de redare (ceea ce înseamnă reducerea cantității de dus-întors între browserul dvs. și server de care avem nevoie pentru a reda pagina)

Incearca-l tu insuti

Dacă doriți să încercați acest lucru și să începeți optimizarea, puteți măsura performanța site-ului dvs. web sau a altora cu mai multe instrumente. Cele mai ușoare sunt, probabil, produse Google PageSpeedInsights sau Google Lighthouse, o mică extensie Google Chrome la îndemână pe care o puteți instala cu ușurință prin Chrome App Store.

Doar faceți clic pe extensie și apoi generați raport și veți obține un raport care include următoarele:

1611030671 275 O introducere in performanta web si calea critica de redare
Exemplu de audit al performanței în Google Lighthouse de pe site-ul meu personal – Render Blocking CSS pentru două seturi de pictograme diferite înseamnă că site-ul meu are un succes de performanță (cu siguranță mă gândesc cum să reduc asta în viitor)

Apoi, puteți compara performanța dvs. cu o serie de valori, cum ar fi Primul pixel pictat pe ecran, Primul interactiv, Completitatea vizuală a site-ului dvs. și multe altele.

Instrumentele Dev ale browserului dvs. preferat sunt, de asemenea, un loc minunat pentru a afla timpul de încărcare și blocajele de performanță. Menținerea timpului general de încărcare scăzut va crește cu siguranță viteza generală la care site-ul dvs. este servit utilizatorilor finali.

Concluzie

Sperăm că acest lucru a aruncat o lumină în funcționarea interioară a modului în care browserul dvs. vă afișează o pagină și munca grea pe care trebuie să o îndepliniți în fundal pentru a vă asigura că HTML, CSS și JavaScript sunt transformate corect.

Conștientizarea acestor pași ne ajută să îmbunătățim performanța paginilor existente. Dar ne permite, de asemenea, să fim atenți la modul în care dezvoltăm aplicații și site-uri web și să luăm în considerare modul în care paginile noastre caută oameni în alte zone ale lumii.

Resurse

Cele mai multe cunoștințe pe care le-am împărtășit aici le-am dobândit prin următoarele:

  1. Optimizarea performanței site-ului web pe Udacity
  2. De ce este importantă performanța pe Dezvoltatori Google
  3. Rețea de browser de înaltă performanță de Ilya Grigorik (https://hpbn.co/)
  4. Site-uri web de înaltă performanță: cunoștințe esențiale pentru inginerii frontali de Steve Souders