Cum creează un browser o pagină web?

Ca SEO tehnic, este important să înțelegeți cum creează un browser o pagină web. Acest lucru poate ajuta, mai târziu, să înțelegem diferența dintre interpretările robotului uman și ale unui motor de căutare ale unei pagini sau să diagnosticăm problemele legate de viteza paginii, printre altele. O voi privi cu scopul de a îmbunătăți viteza paginii.

Acesta este primul din această serie de 4 articole despre fazele browserelor de creare a unei pagini și reflectarea acesteia asupra Pagespeed.

Pentru a afișa conținut, fiecare browser trebuie să finalizeze procesele DOM și CSSOM înainte de a crea arborele de randare pentru a crea o pagină web.

DOM sau Document Object Model este construit din marcaj HTML. DOM-ul este o reprezentare de date a elementelor care alcătuiesc structura și conținutul paginii web. Această reprezentare este utilizată de diferite programe, cum ar fi scripturile JavaScript, care ar putea modifica fie structura, conținutul sau ambele.

CSSOM este creat de CSS MarkUp, cum ar fi animație, cadru cheie, interogări media împreună cu selectoare, proprietăți și valori paralele semantic cu DOM.

Aceasta este o captură de ecran din primul browser web din istorie. Nu poate reda Javascript și nu are multe proprietăți CSS. De asemenea, nu poate folosi regulile HTML moderne. Experimentarea acestor tipuri de browsere web primitive (cum ar fi Lynx) vă poate ajuta să înțelegeți motoarele de browser și natura lor în ceea ce privește performanța web. Puteți vizita această pagină!

Cum este creat DOM-ul de către un browser?

Niciun browser nu vede conținut sau cod sursă pe o pagină, așa cum o fac oamenii. În primul rând, va vedea totul pe preDOM în octeți. Apoi va converti octeții în caractere specifice și va rezolva ceea ce înseamnă aceștia pentru a forma structura paginii ca ierarhie.

Notă: preDOM este versiunea DOM care apare în codul sursă și nu a fost încă citită și procesată de browser. PreDOM-ul este apoi citit și interpretat de browser:

1. Folosind codul „charset” al fișierului dvs., browserul va converti octeții în caractere.
2. Procesul de „tokenizare” este inițiat pentru a crea comenzi semnificative pentru caracterele adiacente.
3. Tokenurile generate sunt convertite în obiecte și primesc reguli și proprietăți conform standardelor HTML5. (Cu alte cuvinte, le transformă în noduri.)
4. Procesul de construcție DOM este început. Fiecare etichetă HTML este plasată una în alta, formând o ierarhie și creând structura paginii web.

Îmbunătățirea performanței DOM: de ce este atât de important?

Înainte de a vă oferi câteva sfaturi, va trebui să înțelegeți tipurile de evenimente de încărcare DOM și semnificația lor.

Iată câteva dintre tipurile de evenimente DOM în crearea paginilor web

• domLoading : Punctul de pornire al procesului DOM.
• domInteractive : Sfârșitul procesului DOM.
• domContentLoaded : Sfârșitul proceselor DOM și CSSOM. În acest moment, browserul este gata să creeze arborele de randare. De asemenea, execuția JavaScript ar trebui să înceapă de obicei în acest moment.
• domComplete : Descărcarea tuturor resurselor paginii este finalizată.
• loadEvent : După terminarea descărcarii resurselor și crearea structurii paginii, sunt declanșate orice evenimente JS de „încărcare” existente.

Dacă doriți să calculați doar Timpul procesului DOM, ar trebui să vă concentrați pe evenimentul domInteractive. Cu toate acestea, acest eveniment nu este afișat în devTools Chrome. Puteți utiliza sau consulta echipa IT pentru PerformanceNavigationTiming API, care poate calcula toate aceste evenimente, precum și subEvenimente suplimentare, cum ar fi domContentLoadedEventStart.

Puteți, de asemenea, să vă uitați la preferințele domInteractive în Google Analytics > Comportament > Viteza site-ului > Timing pagini > DOM. Cu toate acestea, informațiile de aici nu sunt deosebit de stabile și de încredere. Totuși, îți poate oferi un loc de unde începe.

De asemenea, puteți calcula DOM Interactive Timing cu DevTools, dar numai cu codurile de consolă. Este o metodă puțin lentă, dar puteți încerca biblioteca de coduri „performance.timing”. Mai sus, veți vedea în partea stângă, performance.timing, care arată majoritatea valorilor de performanță. Numai ultimele trei sau patru cifre sunt importante aici. Dacă doriți să vedeți o valoare personalizată, de exemplu DOMInteractive, puteți scrie performance.timing.domInteractive – performance.timing.responseStart. În dreapta, sunt date DOMInteractive, DOMClete, Total Page Load Time.
Exemplul este de pe același site de știri.

În acest articol, evenimentul domContentLoaded și DevTools vor fi suficiente pentru scopurile noastre.

Rețineți că atunci când resursele sunt organizate și încărcate corect, timpii domInteractive și domContentLoaded nu sunt atât de diferiți unul de celălalt. Deoarece adevărata provocare este separarea fișierelor JS și fișierelor CSS unele de altele fără a întrerupe analiza HTML sau a crea un blocaj în firul principal. Dacă puteți face acest lucru cu succes, este posibil ca atât DOM, cât și CSSOM (domContentLoaded Event) să fie declanșate în cel mai rapid mod.

Un exemplu DOM dintr-un document HTML

Optimizarea procesului DOM și sfaturi

Dacă am fi în 2019 și înainte, aș putea spune că, în calitate de expert tehnic SEO, nu trebuie să știi să codificați.

Dar în 2020 și mai departe, trebuie să cunoașteți coduri de nivel începător. Pentru a înțelege cum să optimizați un model de obiect document sau o structură de nod HTML, trebuie să îl examinați cu suficientă experiență pentru a crea o nouă structură de cod.

Iată câteva sfaturi pentru optimizarea dimensiunii DOM:

1. Examinați arborele de noduri DOM existent și încercați să găsiți noduri HTML inutile . De exemplu, dacă vedeți oricare sau cu o clasă „afișare: niciuna”, ar trebui să le eliminați.
2. Vă puteți sfătui echipa IT să folosească mai multe pseudo-elemente ::înainte și ::după în loc să creeze noi noduri HTML.
3. Încercați să vă concentrați asupra elementelor HTML părinte mari, cu multe elemente secundare. Controlați-vă clasele CSS și efectele acestora pentru a crea noduri HTML mai scurte în timp ce lucrați pentru unificarea elementelor HTML.
4. Dacă apelați structura nodului dvs. HTML cu JavaScript, puteți, de asemenea, să utilizați sau să sfătuiți echipa IT să folosească Punctele de întrerupere a modificării DOM de modificare a subarboarelor pentru a determina ce noduri schimbă care inițiator.
5. Dacă nu puteți micșora dimensiunea nodului HTML, atunci vă recomandăm să vă gândiți la utilizarea Shadow DOM sau, în conformitate cu biblioteca dvs. JS și tehnologiile de randare, ați putea fi interesat de Virtual DOM.
6. De asemenea, ar trebui să luați în considerare tehnologiile de compresie gzip, brotli sau deflate pe partea de server.
7. Puteți comprima documentația HTML ștergând spații pentru o mai bună și mai rapidă asistență pentru viteza browserului.

Folosind Virtual DOM

Puteți folosi diferite tipuri de DOM pentru o mai bună viteză a paginii, UX și buget pentru accesare cu crawlere. Un exemplu este Virtual DOM.

DOM virtual încarcă numai părțile DOM care se modifică atunci când este deschisă o nouă pagină, în loc să reîncarce toate elementele DOM. Acest lucru creează o prezentare a paginii mai rapidă și mai ușoară pentru utilizator sau robotul motorului de căutare.

Virtual DOM funcționează bine cu bibliotecile JavaScript Vue sau React.

De ce este importantă performanța DOM pentru SEO tehnic?

Dimensiunea DOM este direct legată de viteza paginii și de contactul inițial cu utilizatorul.

Dacă aveți o dimensiune DOM mare și nu utilizați Shadow DOM sau metode preventive similare pentru a evita încărcarea și stilizarea tuturor nodurilor HTML care nu sunt vizibile în timpul încărcării inițiale a paginii, probabil că veți întârzia indicele de viteză și viteza de contact inițială pentru utilizator.

O scurtă comparație între browsere pentru procesele de reflow.

Dacă dimensiunea DOM-ului dvs. este mare, probabil că veți suferi de redistribuirea browserului.

Reflow se referă la redimensionarea, stilarea sau pictarea și poziționarea unui element HTML în procesul de re-rendare. Dacă un element părinte HTML se modifică, elementele secundare sunt de asemenea afectate. Lungimea și numărul acestui tip de lanțuri de elemente HTML pot afecta viteza paginii dvs.

Buclele de reflux pot dăuna bugetului de accesare cu crawlere, pot crește sarcina pe server și pe rețea. În consecință, poate afecta rata de conversie și chiar clasamentele.

Google a publicat de fapt un videoclip de prezentare frumos și scurt pe acest subiect:

Cum creează un browser CSSOM și arborele de randare?

Browserele tind să înceapă procesul CSSOM după finalizarea procesului DOM.

Deoarece browserele moderne știu că DOM-ul nu va avea niciun sens până la finalizarea CSSOM, unele elemente HTML nu sunt afișate de browser până când acesta nu a citit codurile de stil. Un bun exemplu în acest sens ar fi imaginea de fundal CSS.

Mai sus este un exemplu de fragment de cod CSS care trebuie refactorizat. Proprietatea „Zoom” este folosită de mai mult de 19 ori pentru diferiți selectori. Ele pot fi unificate.

Cum este început și finalizat procesul CSSOM de către browserele moderne?

1. Browserul urmărește bucla de octeți, caractere, jetoane și reguli standard (noduri) care este generată la crearea DOM-ului.
2. Browserul potrivește fiecare element DOM cu elementul CSS care îl va afecta. Acest proces se numește „Stil”.
3. După mapare, browserul determină dimensiunile fiecărui element DOM conform regulilor CSS într-o structură ierarhică. Deoarece dimensiunea elementului părinte afectează și elementele secundare, fișierele CSS codificate ierarhic sunt utile pentru viteza paginii. Acest proces se numește „Layout”.
4. Procesul Visual DOM începe. Toate imaginile, chenarele și culorile sunt pictate conform regulilor CSS. Acest proces se desfășoară în diferite straturi.
5. Compozitul este etapa finală a CSSOM. Browserul combină toate operațiunile de pictură în straturi diferite.

Puteți verifica proprietățile CSS și costurile acestora pentru motorul browserului prin intermediul CSS Triggers în ceea ce privește diferitele motoare de browser.

Cum să optimizați procesul CSSOM

1. În calitate de SEO tehnic, ar trebui să vă concentrați mai întâi pe selectori CSS complexe și proprietăți reciproce. Cu alte cuvinte, dacă un selector CSS are mai mult de 3 elemente copil, ar trebui să încercați să-l scurtați sau ar trebui să îl raportați echipei IT pentru refactorizarea CSS. Proprietățile reciproce înseamnă că echipa ta IT poate folosi aceleași proprietăți CSS pe diferite clase și ID-uri. Ar trebui să încercați să le unificați pentru o dimensiune mai mică a fișierului CSS.
2. Aflați dacă echipa dvs. IT comprimă fișierele CSS sau nu.
3. Pentru fiecare dintre categoriile și secțiunile site-ului dvs., încercați să găsiți codul CSS utilizat în mod obișnuit și codul CSS neutilizat în mod obișnuit . Sfătuiți-vă echipa IT să împartă fișierele CSS pentru o mai bună eficiență a resurselor.
4. Căutați coduri importante în fișierele dvs. CSS. Probabil că fac inutil un cod ulterior.
5. Încercați să determinați dacă fișierele dvs. CSS au o structură ierarhică paralelă în ceea ce privește nodurile HTML. Dacă sunt paralele, arborele de randare va fi mai ușor de construit de către browsere.
6. Încercați să reduceți numărul de elemente HTML care trebuie redimensionate sau redimensionate . Imaginile sunt un bun exemplu în acest sens.
7. Vă puteți sfătui echipa IT să folosească funcțiile și proprietățile „Conține”, „Se va schimba”, „Scopul CSS” pentru o performanță mai bună a browserului.
   Proprietatea „Conține” determină domeniul de aplicare al elementului HTML și efectele CSS pe care le va primi. În acest fel, nu va afecta restul DOM. Proprietatea „Se va schimba” îi spune browserului ce elemente se schimbă și în ce mod, astfel încât browserul să poată face optimizări chiar înainte de începerea procesului.
8. Încercați să introduceți codul CSS critic înainte de a randa fișierele CSS care blochează.
9. Încercați să sfătuiți echipa IT să nu folosească coduri de stil în etichetele HTML . Acest lucru afectează atât procesele DOM/CSSOM, cât și bugetul de accesare cu crawlere.
10. Nu puneți adresele sursei imaginii în fișierele CSS . Acest lucru este împotriva ghidurilor de indexare ale Google (Chrome DevSummit 2019, Cum să vă faceți conținutul să strălucească în Căutarea Google, Martin Splitt).
11. Nu utilizați funcția @import în fișierele CSS . Aceasta creează o a doua cerere CSS imbricată.
12. Încercați să utilizați mai puține fișiere CSS externe pentru a scurta CSSOM sau încercați să le grupați pentru a reduce timpul de căutare DNS și de conectare la resurse.
13. Puteți, de asemenea, să vă verificați selectoarele lungi și specificul acestora. Dacă sunt prea lungi, trebuie să le raportați echipei IT sau puteți încerca să le îmbunătățiți singur ca SEO Tehnic. Selectoarele lungi și proprietățile CSS inutile repetitive cu aceleași valori sunt sarcini grele pentru browsere și procesoarele telefonului.
    

Amintiți-vă, CSSOM are un arbore ierarhic la fel ca DOM. Acesta aplică regulile curente mai întâi celui mai mare element, iar elementele secundare rămân afectate până când browserul citește codul scris special pentru ele.

În CSSOM, toate elementele CSS ID, Clasă și Proprietăți și Valoare sunt listate conform structurii semantice a elementelor HTML DOM. CSSOM este preluat din același document HTML ca și DOM. Principalul motiv pentru care nu am indicat noduri HTML în CSSOM este acela de a atrage atenția asupra structurii ierarhice a codurilor CSS.

Cum reda browserele o pagină?

Executarea CSSOM nu este același lucru cu randarea. Când DOM și CSSOM sunt citite în aceeași ierarhie, redarea este procesul de unire a acestor doi arbori de cod de sus în jos în fereastra de vizualizare.

În timpul redării, unele fragmente de cod care există în timpul procesării DOM și CSSOM pot fi dezactivate. Motivul principal pentru aceasta este că nu sunt vizibile sau sunt dezactivate de un alt cod. Prin urmare, optimizarea codului care nu este inclus în arborele de randare, dar care apare în DOM și CSSOM este utilă pentru viteza paginii.

Mai sus, datele DOMContentLoaded din DevTools din Chrome arată timpul necesar pentru a încărca și analiza documentele HTML și CSS.

Prin urmare, consistența între firul principal de performanță și secțiunile arborelui de apeluri dă rezultate apropiate. Toate exemplele sunt de pe același site.

Dacă doriți să calculați doar DOM, trebuie să verificați timpul domInteractive, care nu este afișat de DevTools, dar poate fi măsurat cu API-ul Navigation Timing.

După evenimentul DomContentLoaded, browserul dvs. va porni arborele de randare și veți vedea că pixelii ecranelor dvs. sunt colorați cu informații și design semnificative. În acest timp, redarea Javascript va intra și ea în joc și va diviza, schimba și revopsi instantaneu arborele de randare.

Ce urmeaza?

O ordine de resurse structurată corespunzător, numărul de solicitări de resurse și o relație de randare-arborele și redarea Javascript reduc costurile în ceea ce privește viteza paginii.

Următorul articol din această serie va analiza modul în care aceasta se referă la valorile avansate ale vitezei paginii și modul în care Google percepe viteza paginii.