Sau în GTmetrix „Reduceți numărul de elemente DOM”:
Ce este DOM?
Când browserul dvs. primește un document HTML, acesta trebuie convertit într-o structură arborescentă, care este folosită pentru randarea și desenarea cu CSS și JavaScript.
Această structură arborescentă se numește DOM sau Document Object Model.
- Noduri Toate elementele HTML din DOM sunt numite noduri. (alias „frunze” pe copac).
- Adâncime – Cât timp trece o „ramură” într-un copac se numește adâncime. De exemplu, în diagrama de mai sus, eticheta img are o adâncime de 3. (HTML -> body -> div -> img).
- Elemente copil – toate nodurile copil ale unui nod (fără ramificare ulterioară) sunt copii.
Lighthouse și Google PageSpeed Insights încep să semnaleze paginile dacă este îndeplinită una dintre următoarele condiții:
- Total să aibă mai mult de 1500 de noduri.
- Au o adâncime de peste 32 de noduri.
- Nodul părinte are mai mult de 60 de noduri copil.
Cum afectează dimensiunea DOM performanța?
Dimensiunea excesivă a DOM poate afecta performanța în moduri diferite.
- Timp mai mare de analiză și randare (FCP) . Un arbore DOM mare și reguli de stil complexe fac o treabă grozavă pentru browser. Browserul trebuie să analizeze codul HTML, să construiască arborele de randare etc. De fiecare dată când utilizatorul interacționează sau se schimbă ceva în HTML, browserul trebuie să îl calculeze din nou.
- Crește utilizarea memoriei - Codul dvs. JavaScript poate avea funcții pentru a accesa elementele DOM. Un arbore DOM mai mare forțează JavaScript să folosească mai multă memorie pentru a le procesa. Un exemplu ar fi un selector de interogări, în
document.querySelectorAll('img')care listează toate imaginile utilizate în mod obișnuit de bibliotecile cu încărcare leneră. - Crește TTFB – Pe măsură ce dimensiunea DOM crește, dimensiunea documentului HTML crește (în KB). Deoarece trebuie transferate mai multe date prin rețea, acest lucru crește TTFB.
Cum se reduce dimensiunea DOM din punct de vedere tehnic?
De exemplu, este ușor din punct de vedere tehnic să reduceți dimensiunea DOM:
utilizare:
<ul id="navigation-main">etc..</ul>in loc de:
<div id="navigation-main"><ul>etc..</ul></div>Practic, scăpați de toate elementele HTML posibile. De asemenea, puteți utiliza Flexbox sau Grid pentru a reduce și mai mult dimensiunea DOM.
Dar, din moment ce utilizați WordPress, acest lucru nu vă va ajuta prea mult!
Cum să reduceți dimensiunea DOM în WordPress?
Împărțiți pagini mari în mai multe pagini
Ai o pagină cu tot ce este pe site? Vă plac serviciile, formularele de contact, produsele, postările pe blog, mărturiile etc.?
Încercați să le împărțiți în mai multe pagini și să faceți linkuri către ele din antet/bara de navigare.
Încărcare leneșă și paginare a tot ceea ce este posibil
Încărcare leneșă a tuturor tipurilor de elemente. Aici sunt cateva exemple:
- Încărcare leneșă a videoclipurilor YouTube - Utilizați WP YouTube Lyte sau Lazy Load de la WP Rocket.
- Limitați numărul de postări/produse pe blog pe pagină – De obicei încerc să păstrez maximum 10 postări pe blog și să paginez restul.
- Încărcare leneșă a articolelor/produselor de blog – Adăugați un buton Încărcare mai mult sau derulare infinit pentru a încărca mai multe postări de blog sau produse.
- Încărcare leneșă a comentariilor - Folosesc încărcarea condiționată Disqus, deoarece folosesc Disqus. Dacă utilizați propriile comentarii, utilizați pluginuri precum Lazy Load pentru comentarii.
- Paginarea comentariilor - dacă aveți sute de comentarii, acest lucru poate afecta și dimensiunea DOM. Pentru a pagina comentarii, accesați Setări -> Discuție -> Paginare comentarii.
- Limitați numărul de postări conexe – Încercați să limitați numărul de postări conexe la 3 sau 4.
Notă: încărcarea leneră a imaginilor nu va reduce dimensiunea DOM
Nu ascunde elementele nedorite cu CSS
Uneori poate fi necesar să eliminați elementele introduse de o temă/designer. De exemplu, adăugați un buton în coș pe paginile produselor, un buton de evaluare, informații despre autor, data publicării etc.
O soluție rapidă este să le ascundeți cu CSS:
.button-cart {display:none;}Chiar dacă această soluție pare simplă, expuneți utilizatorii la coduri nedorite (care include atât markup HTML, cât și stil CSS).
Verificați setările pentru tema/plugin-ul pentru a vedea dacă există o opțiune pentru a-l elimina. În caz contrar, găsiți codul PHP relevant și eliminați/comentați-l.
Folosiți teme bine scrise și creatori de pagini
O temă bună joacă un rol important în dimensiunea DOM. Folosiți teme bine scrise, cum ar fiGeneratePress sauAstra .
Creatorii de pagini introduc, de asemenea, prea multe div-uri. Utilizați constructori precumoxigen, care nu introduc blocuri div nedorite și au mai mult control asupra structurii HTML.
Concluzie
Este posibil să existe mai multe pluginuri sau setări de temă care introduc prea multe div-uri. Un exemplu ar fi pluginurile „mega meniu” precum UberMenu.
Uneori, acestea sunt esențiale pentru experiența utilizatorului site-ului dvs. Dar uneori nu sunt niciodată folosite de utilizatori.
Poate că linkurile dvs. de subsol nu sunt făcute niciodată clic, deoarece majoritatea vizitatorilor derulează doar până la 75%.
Utilizați instrumente precum HotJar sau Google Analytics Events pentru a afla ce folosesc vizitatorii de fapt și ce nu folosesc.Analizați, măsurați și repetați.
