Cum să remediați dimensiunea excesivă a DOM-ului în WordPress (11 sfaturi de la experți)

Avertismentul „Evitați o dimensiune excesivă a DOM” în WordPress înseamnă că pagina dvs. are prea multe elemente HTML, ceea ce o încetinește.

Cele mai bune modalități de a remedia acest lucru sunt utilizarea unui plugin de performanță precum WP Rocket, optimizarea modului în care sunt încărcate imaginile și galeriile și alegerea unei teme sau a unui constructor de pagini ușor.

Acest avertisment poate apărea în Google Lighthouse sau în alte instrumente de testare a vitezei și sună tehnic. Dar conceptul este simplu: site-ul dvs. web este o colecție de părți, iar prea multe pot copleși un browser.

Aici, la WPBeginner, nu numai că ne-am optimizat propriile site-uri web cu trafic ridicat pentru a rezolva exact această problemă, dar am ajutat și nenumărați utilizatori să își îmbunătățească viteza site-ului.

În acest articol, vom detalia 11 dintre metodele noastre experte pentru a rezolva problema și a îmbunătăți performanța WordPress.

Răspuns rapid: Cum remediati dimensiunea excesivă a DOM în WordPress?

Utilizați un plugin de viteză precum WP Rocket pentru a gestiona automat caching-ul, lazy loading-ul și optimizarea fișierelor. Apoi auditați-vă tema și plugin-urile pentru cod neoptimizat și comutați la un page builder ușor precum SeedProd dacă este necesar.

Ce înseamnă avertismentul „Evitați o dimensiune excesivă a DOM-ului”?

Avertismentul „Evitați o dimensiune excesivă a DOM” apare în instrumente de testare a vitezei precum Google PageSpeed Insights atunci când o pagină web are prea multe elemente HTML pentru ca un browser să le proceseze eficient.

DOM înseamnă Document Object Model. Este o structură asemănătoare unui arbore care reprezintă toate obiectele de pe pagina dvs. web. Fiecare element, cum ar fi un titlu, un paragraf, o imagine sau un buton, este un „nod” pe acest arbore.

Numărul total al acestor noduri alcătuiește dimensiunea DOM. Când acest număr devine prea mare, browserul are nevoie de mai mult timp și resurse pentru a afișa pagina, ceea ce poate încetini site-ul dvs.

De ce afectează dimensiunea excesivă a DOM site-ul dvs.?

Un DOM suprasolicitat obligă browserele să lucreze mai mult, ceea ce încetinește performanța site-ului dvs. WordPress și îi frustrează pe vizitatori.

• Timp de încărcare mai lent și rate de respingere mai mari — vizitatorii pot părăsi site-ul dvs. înainte ca acesta să se încarce
• Clasamente de căutare mai scăzute — Google folosește viteza paginii ca un factor în SEO WordPress

Câte elemente DOM sunt prea multe pentru Google?

Instrumentele de testare precum Google Lighthouse nu folosesc doar un singur număr pentru a semnala o dimensiune excesivă a DOM. În schimb, se uită la trei criterii specifice:

Metrică	Prag de avertizare	Ce înseamnă
Noduri DOM totale	~800 (avertizare) / ~1.400 (eroare)	Elemente HTML totale pe pagină
Adâncime maximă DOM	32 de niveluri	Cât de adânc sunt imbricate elementele unele în altele
Elemente copil maxime	60 per părinte	Copii direcți într-un singur element părinte

Paginile cu mai multe slidere, layout-uri complexe cu multe secțiuni imbricate sau numeroase elemente încorporate sunt mai susceptibile să depășească aceste limite. Cu toate acestea, nu trebuie să vă sacrificați designul pentru a rezolva această problemă.

Am pregătit un ghid cuprinzător pentru a vă ajuta să rezolvați această problemă. Iată 11 moduri dovedite de a reduce dimensiunea DOM și de a îmbunătăți performanța WordPress:

Simțiți-vă liber să utilizați linkurile rapide de mai sus pentru a afla mai multe despre o metodă specifică de optimizare.

1. Utilizați un plugin de optimizare a vitezei WordPress

Prima noastră recomandare este să instalați un plugin puternic de optimizare a vitezei WordPress. Aceste plugin-uri se ocupă de optimizările tehnice necesare pentru a face site-ul dvs. mai rapid.

Acest lucru vă permite să vă concentrați pe gestionarea și crearea conținutului dvs., în timp ce pluginul funcționează în fundal.

Aici, la WPBeginner, folosim și recomandăm WP Rocket. L-am folosit pe propriile noastre site-uri web pentru a gestiona caching-ul, optimizarea fișierelor și lazy loading, despre care puteți afla mai multe în articolul nostru despre cum creștem viteza de încărcare a paginilor pe WPBeginner.

Deși WP Rocket este cunoscut în principal ca un plugin de caching, multe dintre caracteristicile sale ajută la rezolvarea problemelor cauzate de un DOM mare. Acestea includ optimizarea fișierelor, lazy loading și amânarea JavaScript.

Vom explica aceste caracteristici mai târziu în articol. Puteți, de asemenea, să citiți recenzia noastră completă WP Rocket pentru mai multe informații sau să folosiți ghidul nostru de configurare pentru a începe.

2. Verificați tema și pluginurile dvs.

În timp ce pluginurile și temele WordPress adaugă funcționalitate și stil site-ului dvs. WordPress, ele pot contribui, de asemenea, la o dimensiune excesivă a DOM-ului.

Teme și pluginuri prost codificate pot adăuga elemente HTML inutile, umflând structura paginii dvs. În mod similar, pluginurile și temele cu funcționalități suplimentare pe care nu le utilizați pot încărca în continuare codul lor, crescând DOM-ul.

Pentru a verifica dacă un anumit plugin sau temă este vinovatul, puteți dezactiva pluginurile unul câte unul sau puteți comuta temporar la o temă WordPress implicită. După fiecare modificare, efectuați un test de viteză pentru a vedea dacă avertismentul privind dimensiunea DOM dispare.

Pentru a evita această problemă, alegeți întotdeauna teme și plugin-uri din surse de încredere, cum ar fi directorul oficial WordPress sau dezvoltatori cunoscuți. Aceste resurse au, de obicei, standarde de codare mai stricte.

Pentru recomandări de încredere, consultați Centrul de Soluții WPBeginner, unde testăm și revizuim software-ul WordPress.

3. Utilizați un Page Builder optimizat

Instrumentele de creare a paginilor (page builders) sunt excelente pentru a proiecta layout-uri personalizate fără cod, dar unele pot contribui la o dimensiune excesivă a DOM. Acestea înfășoară adesea conținutul dvs. în elemente HTML suplimentare pentru a controla stilizarea și layout-ul.

De exemplu, un generator de pagini slab optimizat ar putea încadra un singur buton în mai multe containere <div> imbricate pentru aliniere și stilizare. Fiecare dintre aceste containere adaugă un nod suplimentar la DOM, crescând rapid numărul total.

Dacă suspectați că page builder-ul dvs. este problema, îl puteți testa dezactivându-l pe un site de staging și verificând din nou dimensiunea DOM. Puteți folosi instrumente integrate precum Editorul Complet de Site, dar acestea pot lipsi de flexibilitate.

Pentru cel mai bun echilibru între flexibilitate și performanță, recomandăm utilizarea unui page builder optimizat pentru viteză, precum SeedProd. În testele noastre, acesta depășește constant alți constructori populari.

Puteți vedea cum se compară cu altele în analiza noastră Elementor vs. Divi vs. SeedProd.

Multe dintre mărcile noastre partenere, inclusiv WPForms și Duplicator, folosesc SeedProd pentru a-și construi site-urile web.

4. Optimizați imaginile și videoclipurile dvs.

Este important să clarificăm cum se relaționează imaginile cu dimensiunea DOM-ului. Dimensiunea fișierului unei imagini (în KB sau MB) nu afectează numărul de noduri DOM. O etichetă <img> este un singur nod, indiferent cât de mare este fișierul imaginii.

Cu toate acestea, modul în care sunt afișate imaginile poate crește dimensiunea DOM. Unele teme și pluginuri de galerie înfășoară fiecare imagine în mai multe containere <div> pentru stilizare, lightboxes sau legende. Aceste elemente suplimentare de înfășurare sunt cele care adaugă la numărul DOM, nu imaginea în sine.

Deși optimizarea imaginilor prin comprimarea lor este crucială pentru viteza paginii, ar trebui să alegeți și pluginuri de galerie care generează cod curat. Un plugin precum Optimole poate ajuta la comprimarea imaginilor și la lazy loading.

Pentru videoclipuri, recomandăm să nu le încărcați niciodată direct pe WordPress.

În schimb, găzduiți-le pe servicii precum YouTube sau Vimeo și încorporați-le. Acest lucru reduce sarcina pe serverul dvs. și menține DOM-ul mai curat.

5. Configurați Lazy Loading

Încărcarea leneșă (lazy loading) este o tehnică ce amână încărcarea elementelor neesențiale, precum imaginile și videoclipurile, până când acestea sunt pe cale să intre în viewport-ul utilizatorului. Acest lucru permite browserului să afișeze mult mai rapid partea inițială, vizibilă a paginii.

Prin neîncărcarea tuturor elementelor simultan, încărcarea leneșă reduce munca inițială de procesare pentru browser și creează o experiență mult mai fluidă pentru utilizator.

Configurarea încărcării leneșe este ușoară cu un plugin precum WP Rocket. În tabloul de bord WordPress, navigați la Setări » WP Rocket și deschideți fila „Media”. Aici, puteți activa încărcarea leneșă pentru imagini, videoclipuri și iframes printr-un singur clic.

Pentru galerii, recomandăm utilizarea unui plugin de galerie cu încărcare leneșă încorporată, cum ar fi Envira Gallery.

Puteți chiar încărca leneș secțiunea de comentarii folosind un plugin precum Thrive Comments pentru a îmbunătăți și mai mult performanța.

6. Paginați comentariile sau postările cu mult conținut

Postările sau secțiunile de comentarii foarte lungi pot crește semnificativ dimensiunea DOM și pot încetini timpii de încărcare. Paginarea rezolvă acest lucru prin împărțirea conținutului în mai multe pagini mai mici.

Acest lucru face conținutul mai ușor de gestionat atât pentru browser, cât și pentru cititor. Puteți împărți cu ușurință postările lungi adăugând blocul „Pauză de pagină” în editorul WordPress. Pentru instrucțiuni detaliate, consultați ghidul nostru despre cum să împărțiți postările WordPress în mai multe pagini.

Similar, puteți pagina comentariile dvs. Accesați Setări » Discuție în zona de administrare WordPress, bifați căsuța de lângă „Împărțiți comentariile pe pagini” și setați numărul de comentarii pe pagină.

Puteți citi mai multe în ghidul nostru despre cum să paginați comentariile în WordPress.

Sugestăm evitarea derulării infinite, deoarece aceasta adaugă continuu elemente noi la DOM, ceea ce poate duce la probleme de performanță.

7. Minificați fișierele CSS și JavaScript

Deși această tehnică nu reduce direct numărul de noduri DOM, îmbunătățește semnificativ performanța și diminuează impactul negativ al unui DOM mare.

Minificarea elimină caracterele inutile, cum ar fi comentariile, spațiile și întreruperile de linie din fișierele dvs. CSS și JavaScript. Acest lucru reduce dimensiunea fișierelor, făcându-le mai rapide pentru ca browserul să le descarce și să le proceseze.

Un plugin precum WP Rocket face acest lucru simplu. Accesați Setări » WP Rocket, comutați la fila „Optimizare fișiere” și activați funcțiile pentru a minimiza fișierele CSS și JavaScript. Pentru mai multe detalii, consultați ghidul nostru despre cum să minimizați fișierele CSS și JavaScript.

Înainte de minificare, recomandăm crearea unei copii de rezervă a site-ului dvs. În cazuri rare, minificarea poate cauza probleme cu anumite teme sau pluginuri.

8. Reduceți JavaScript-ul și CSS-ul care blochează randarea

Aceasta este o altă tehnică ce nu reduce direct nodurile DOM, dar îmbunătățește considerabil performanța percepută prin schimbarea modului în care sunt încărcate fișierele.

Gândiți-vă la un browser care încarcă pagina dvs. ca la pictarea unei imagini. Resursele care blochează redarea forțează browserul să oprească pictarea paginii web până când acestea sunt complet încărcate. Amânarea lor permite ca principalul conținut să fie pictat primul, astfel încât utilizatorul să vadă site-ul dvs. mai repede.

WP Rocket are funcții pentru a aborda acest lucru. Poate combina fișierele pentru a reduce cererile HTTP și a amâna încărcarea JavaScript-ului non-critic. Acest lucru înseamnă că utilizatorii văd conținutul mai repede, chiar dacă scripturile de fundal nu s-au terminat de încărcat.

Puteți afla mai multe în articolul nostru despre cum să remediați resursele care blochează redarea în WordPress.

9. Activați Caching-ul WordPress

În timp ce caching-ul nu reduce direct numărul de noduri DOM, accelerează dramatic timpii de încărcare a paginii, în special pentru vizitatorii care revin. Acest lucru face ca DOM-ul să se încarce și să se afișeze mult mai repede.

Caching-ul stochează o versiune statică a site-ului dvs. Când un utilizator revine, browserul său poate încărca această versiune salvată în loc să reconstruiască pagina de la zero, ceea ce este mult mai rapid. Acest lucru reduce, de asemenea, sarcina pe serverul dvs., eliberându-l pentru a procesa DOM-ul mai rapid.

Configurarea caching-ului este simplă cu un plugin precum WP Rocket, care activează automat setările optime de caching la activare. Puteți afla mai multe despre funcțiile sale de caching în ghidul nostru de instalare WP Rocket.

10. Utilizați un CDN WordPress

Un CDN (Content Delivery Network) ajută, de asemenea, la atenuarea efectelor unui DOM mare, fără a-l modifica direct. Un CDN este o rețea globală de servere care stochează copii ale fișierelor statice ale site-ului dvs. web (imagini, CSS, JavaScript).

Când un utilizator vizitează site-ul dvs., CDN-ul livrează aceste fișiere de pe serverul cel mai apropiat de locația sa fizică. Acest lucru reduce drastic timpii de descărcare și permite browserului să înceapă procesarea DOM mult mai rapid.

Folosim CDN-ul Cloudflare pe WPBeginner. Puteți afla de ce l-am ales în postarea noastră despre trecerea de la Sucuri la Cloudflare.

Pentru alte opțiuni, consultați lista noastră cu cele mai bune servicii CDN WordPress.

11. Optimizați baza de date WordPress

Aceasta este o altă optimizare indirectă. Deși baza dvs. de date nu face parte din DOM, o bază de date umflată poate încetini timpul de răspuns al serverului dvs. Această întârziere face ca site-ul dvs. să se încarce mai greu, ceea ce poate face ca un DOM mare să pară și mai lent.

În timp, baza dvs. de date se poate umple cu date inutile, cum ar fi revizuirile postărilor, comentariile spam și datele vechi ale plugin-urilor. Curățarea acestora ajută site-ul dvs. să funcționeze mai eficient.

Ghidul nostru despre cum să vă optimizați baza de date WordPress vă arată cum să utilizați un plugin pentru a curăța baza de date în siguranță și rapid.

Concentrați-vă pe performanța generală a WordPress, nu doar pe dimensiunea DOM

Deși rezolvarea avertismentului „Evitați o dimensiune excesivă a DOM” în WordPress este importantă pentru viteza site-ului, acesta nu este singurul factor de luat în considerare.

Un site web cu multă funcționalitate sau formatare unică poate avea în mod natural un DOM mai mare, și asta este în regulă. Cheia este să găsiți echilibrul corect între performanța site-ului și funcționalități.

Deci, pe lângă dimensiunea DOM, este posibil să doriți să acordați atenție altor metrici, cum ar fi Core Web Vitals. Acestea sunt metrici specifice pe care Google le folosește pentru a măsura experiența utilizatorului unui site web.

Întrebări frecvente despre remedierea dimensiunii excesive a DOM

Iată răspunsuri la unele dintre cele mai frecvente întrebări pe care le primim despre remedierea problemelor legate de dimensiunea DOM în WordPress.

Care este o dimensiune bună a DOM-ului pentru o pagină web?

Conform ghidurilor Google, încercați să mențineți elementul body sub ~800 de noduri pentru a evita avertismentele. Lighthouse semnalează o eroare peste ~1.400 de noduri body. De asemenea, mențineți imbricarea sub 32 de niveluri adâncime și nu mai mult de 60 de copii per element părinte.

Utilizarea unui page builder va crește întotdeauna dimensiunea DOM?

Nu neapărat. Constructorii moderni de pagini axați pe performanță, precum SeedProd, sunt proiectați să genereze cod curat și eficient. Cu toate acestea, unii constructori de pagini mai vechi sau prost codați pot adăuga multe elemente de înfășurare inutile care măresc dimensiunea DOM.

Cum pot verifica dimensiunea DOM a site-ului meu gratuit?

Puteți utiliza instrumente online gratuite precum Google PageSpeed Insights sau GTmetrix. De asemenea, puteți verifica direct în browser. În Google Chrome, faceți clic dreapta pe pagina dvs., alegeți „Inspectați”, accesați fila „Consolă” și tastați comanda document.querySelectorAll('*').length apoi apăsați Enter.

Dimensiunea fișierului imagine afectează numărul de noduri DOM?

Nu. O etichetă <img> este un singur nod DOM, indiferent de dimensiunea fișierului imagine. Cu toate acestea, plugin-urile de galerie care încadrează imaginile în containere <div> suplimentare pentru stilizare sau lightbox-uri adaugă mai multe noduri. Alegeți plugin-uri care generează markup curat și minimal.

Poate caching-ul să-mi reducă dimensiunea DOM?

Caching-ul nu reduce numărul real de noduri DOM. Cu toate acestea, accelerează dramatic livrarea paginii prin servirea unei versiuni statice salvate vizitatorilor, ceea ce face ca browserul să proceseze și să afișeze DOM-ul mult mai rapid.

Resurse suplimentare pentru performanța WordPress

Sperăm că acest tutorial v-a ajutat să învățați cum să remediați dimensiunea excesivă a DOM în WordPress.

De asemenea, ați putea dori să consultați aceste ghiduri conexe despre îmbunătățirea performanței site-ului dvs. web:

• Ghidul complet pentru creșterea vitezei și performanței WordPress
• Cum să accelerezi performanța WooCommerce
• Modalități dovedite de a reduce rata de respingere și de a crește conversiile

Dacă v-a plăcut acest articol, atunci vă rugăm să vă abonați la Canalul nostru de YouTube pentru tutoriale video despre WordPress. Ne puteți găsi, de asemenea, pe Twitter și Facebook.