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.

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.

Cum afectează dimensiunea excesivă a DOM performanța site-ului web?

O dimensiune mare a DOM afectează negativ performanța site-ului dvs. WordPress în mai multe moduri cheie. Fiecare element pe care îl adăugați la o pagină, de la text și imagini la formulare și meniuri, crește numărul de noduri DOM.

Această complexitate are următoarele efecte:

• Randare mai lentă a paginii: Un browser trebuie să analizeze întregul arbore DOM înainte de a putea afișa pagina. Un arbore mai mare durează mai mult timp pentru a fi procesat, ceea ce întârzie timpul necesar vizitatorului pentru a vedea conținutul dvs.
• Utilizare crescută a memoriei: O structură DOM complexă necesită mai multă memorie și putere de procesare de la dispozitivul utilizatorului. Acest lucru poate fi deosebit de vizibil pe telefoanele mobile.
• Experiență utilizator slabă: Aceste scăderi de performanță duc la timpi de încărcare mai lenți. Acest lucru îi poate frustra pe vizitatori și îi poate determina să părăsească site-ul dvs. înainte ca acesta să se încarce.
• Impact negativ asupra SEO: Motoarele de căutare precum Google folosesc viteza paginii ca factor de clasificare. Paginile cu încărcare lentă vă pot afecta SEO-ul WordPress și pot reduce conversiile site-ului.

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:

• Noduri DOM totale: Se declanșează o avertizare dacă numărul total de elemente HTML (noduri) de pe pagină depășește 1.500. Acesta este cel mai frecvent motiv pentru avertizare.
• Adâncimea maximă a DOM-ului: Se declanșează un avertisment dacă elementele sunt imbricate prea adânc unul în altul. Lighthouse marchează o pagină dacă imbricarea depășește 32 de niveluri.
• Elemente Copil Maxime: Se declanșează un avertisment dacă un singur element părinte are mai mult de 60 de elemente copil direct în interiorul său. Acest lucru se întâmplă adesea cu meniuri mega sau galerii prost codificate.

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:

1. Utilizați un plugin de optimizare a vitezei WordPress
2. Verificați tema și pluginurile
3. Utilizați un constructor de pagini optimizat
4. Optimizați-vă imaginile și videoclipurile
5. Implementați Lazy Loading
6. Paginarea comentariilor sau a postărilor cu mult conținut
7. Minificați fișierele CSS și JavaScript
8. Reduceți JavaScript-ul și CSS-ul care blochează randarea
9. Activați Caching-ul WordPress
10. Utilizați un CDN WordPress
11. Optimizați baza de date 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 Dimensiunea Excesivă 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, un obiectiv bun este să mențineți dimensiunea DOM sub 1.500 de noduri totale, cu o adâncime maximă de cuibărire de 32 de niveluri și niciun element individual să nu aibă mai mult de 60 de copii.

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.

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.