Ce este DOM Size (Dimensiunea DOM-ului)?
Numarul de elemente HTML din pagina — prea multe incetinesc site-ul
Definiție DOM Size (Dimensiunea DOM-ului)
DOM-ul (Document Object Model) este structura arborescenta a tuturor elementelor HTML din pagina. Cu cat are mai multe elemente (peste 1500), cu atat browserul consuma mai multa memorie si procesarea este mai lenta. Paginile cu DOM excesiv au scroll lent, animatii sacadate si timpi de raspuns mari la interactiuni (INP slab).
De ce contează DOM Size (Dimensiunea DOM-ului)
Numarul de noduri DOM (elemente HTML) din pagina afecteaza direct memoria consumata de browser, timpul de procesare al CSS selectors si durata operatiilor JavaScript de manipulare DOM. Google recomanda sub 1500 noduri, dar multe site-uri depasesc 5000-10000 datorita template-urilor complexe, megameniurilor si sectiunilor repetitive — fiecare operatie DOM devine exponential mai lenta.
Cum verifici DOM Size (Dimensiunea DOM-ului)
SoftAudit numara totalul de noduri DOM, adancimea maxima a arborelui si numarul de copii per element, comparand cu pragurile Lighthouse: sub 1500 noduri, adancime sub 32, copii per nod sub 60. Raportul identifica sectiunile de pagina cu cea mai mare densitate de noduri.
Testează performanța →Greșeli frecvente
Generarea de megameniuri cu sute de linkuri in HTML, chiar daca sunt ascunse cu CSS, adauga sute de noduri procesate la fiecare operatie DOM. Tabelele complexe cu zeci de coloane si sute de randuri randate dintr-o data in loc de virtualizate sunt o alta sursa comuna de DOM excesiv in aplicatii de tip dashboard.
Bune practici
Implementeaza virtualizarea pentru liste lungi (react-virtualized, IntersectionObserver), genereaza megameniurile dinamic la hover nu la load si elimina elementele HTML ascunse care nu sunt necesare in DOM. Foloseste shadow DOM pentru componente izolate si comprima structura HTML prin inlocuirea div-urilor imbricate cu elemente semantice.
Verifică acum
Folosește instrumentul gratuit SoftAudit pentru a verifica dom size (dimensiunea dom-ului) pe site-ul tău.
Test Performanță — GratuitÎntrebări frecvente
Ce este DOM Size (Dimensiunea DOM-ului)?
DOM-ul (Document Object Model) este structura arborescenta a tuturor elementelor HTML din pagina. Cu cat are mai multe elemente (peste 1500), cu atat browserul consuma mai multa memorie si procesarea este mai lenta. Paginile cu DOM excesiv au scroll lent, animatii sacadate si timpi de raspuns mari la interactiuni (INP slab).
De ce este important DOM Size (Dimensiunea DOM-ului) pentru un website?
Numarul de noduri DOM (elemente HTML) din pagina afecteaza direct memoria consumata de browser, timpul de procesare al CSS selectors si durata operatiilor JavaScript de manipulare DOM. Google recomanda sub 1500 noduri, dar multe site-uri depasesc 5000-10000 datorita template-urilor complexe, megameniurilor si sectiunilor repetitive — fiecare operatie DOM devine exponential mai lenta.