Chei pentru a reduce dimensiunea DOM a unui site web

Unul dintre aspectele care influențează realizarea unei bune poziționări SEO pe o pagină web este performanța de încărcare a acesteia. Și acesta este un subiect în care dimensiunea DOM a unei pagini joacă un rol cheie.

De aceea, vom explica cum un DOM poate fi considerat excesiv de mare și cum să-l reducem.

Sa incepem!

Ce este DOM-ul?

Mai simplu spus, când vorbim despre DOM, ne referim la structura obiectelor pe care browserul le generează de fiecare dată când încarcă o pagină . Își datorează numele acronimului Document Object Model.

Este o structură ierarhică în care există diferite obiecte, dintre care unele depind de altele. Structura este similară cu un arbore, deoarece există obiectul principal de care depind alte elemente secundare. DOM reprezintă structura HTML a paginii ca un arbore , alcătuit dintr-o serie de etichete.

Cu alte cuvinte, atunci când browserul pregătește o pagină pentru a ne arăta, construiește un arbore de obiecte alcătuit din toate elementele unei pagini pe baza structurii sale HTML.

De fiecare dată când browserul primește un document HTML, trebuie să îl convertească în această structură arborescentă, pe care o numim DOM sau arbore DOM. Codul JavaScript poate accesa acel DOM și îl poate modifica.

Cum vă afectează dimensiunea DOM performanța web?

Adevărul este că dimensiunea DOM afectează performanța unei pagini. Un DOM excesiv de mare poate încetini viteza site-ului , deoarece are următoarele efecte:

• Eficiența rețelei și performanța de încărcare. Dacă DOM-ul este excesiv de mare, acesta include adesea elemente HTML care nu sunt vizibile prima dată când utilizatorul încarcă pagina, crescând inutil consumul de date și făcând site-ul să se încarce mai încet.
• Performanță de rulare. Pe măsură ce utilizatorii și scripturile interacționează cu o pagină, browserul trebuie să recalculeze continuu poziția și stilul etichetelor HTML.
• Performanța memoriei . Dacă arborele DOM este prea mare, browserul poate avea nevoie de mai multă memorie pentru a-l procesa.

Cum se reduce tehnic dimensiunea DOM?

Pentru a reduce dimensiunea DOM, astfel încât să nu afecteze negativ performanța web , trebuie să eliminați toate elementele HTML care nu sunt necesare . După cum am văzut, dacă nu luăm măsurile necesare, există mai multe motive pentru care ar încetini pagina.

În loc să utilizați acest cod;

 <div id = ”navigation-main”>   <ul>           etc ..   </ul> </div>

Ar fi mai bine să-l folosești pe acesta;

 <ul id = ”navigation-main”>   etc .. </ul>

În ceea ce privește structura arborelui, trebuie să cunoaștem următorii termeni:

• Noduri : Toate elementele HTML ale DOM. Sunt cunoscute și sub numele de „frunzele” copacului.
• Noduri secundare : acele noduri care nu mai au ramuri.

Acestea fiind spuse, cel mai bun lucru este că adâncimea copacului este formată din :

• Mai puțin de 32 de noduri.
• Mai puțin de 60 de noduri secundare pentru fiecare nod.

Google recomandă ca atunci când se dezvoltă site-uri web, paginile să conțină mai puțin de 1.500 de noduri DOM , ceea ce înseamnă că design-urile nu ar trebui să fie prea complexe.

Cum să reduceți dimensiunea DOM-ului în WordPress

Există mai multe moduri de a reduce dimensiunea DOM-ului în WordPress:

Segmentați paginile mari în mai multe pagini

Aveți o singură pagină care afișează diferite tipuri de conținut ale site-ului dvs.? De exemplu, formulare de contact, postări de blog, produse etc.

În acest caz, este mai bine să clasificați toate aceste elemente în pagini diferite și să le legați prin bara de navigare.

Activați pluginul lazy load și împărțiți toate elementele posibile în pagini

Puteți activa un modul de încărcare leneșă în toate elementele care o permit. Puteți face acest lucru cu videoclipuri de pe YouTube, folosind Youtube Lite sau Lazy Load de la WordPress WP-Rocket.

De asemenea, este esențial să limitați numărul de postări pe pagină de blog . Un număr maxim rezonabil de postări ar fi de 10 pe pagină. Această practică se aplică și numărului de produse care ar trebui să apară pe fiecare pagină.

Există o opțiune de modificare a numărului de postări pe pagină. Accesați Meniul Setări > Submeniul Citire, modificați valoarea maximă a afișată a Paginilor de blog și Salvați modificările .

De asemenea, recomandăm limitarea numărului de publicații conexe la un număr maxim de trei sau patru.

Eliminați elementele inutile incluse în tema implicită WP

În unele cazuri, poate fi necesar să eliminați anumite elemente care vin cu tema dvs. WordPress în mod implicit , cum ar fi butonul „Adăugați în coș” de pe paginile produselor, data publicării, informațiile despre autor etc.

Verificați configurația temei WordPress pentru a vedea dacă există o opțiune de a elimina acele elemente și, dacă nu, căutați codul PHP corespunzător pentru a le elimina.

Utilizați teme bine codificate sau creatori de pagini

Calitatea temei WordPress afectează direct dimensiunea DOM. Prin urmare, este recomandabil să folosiți teme bine codificate, precum Astra sau GeneratePress.

Creatorii de pagini introduc adesea prea multe etichete div, așa că este important să folosiți soluții precum Oxygen Builders, care nu injectează elemente nedorite și permit mai mult control asupra structurii HTML.

Instrumente precum HotJar vă permit să vedeți ce folosesc utilizatorii și ce nu funcționează pentru ei. Efectuarea unei analize minuțioase este fundamentală pentru a obține dimensiunea DOM potrivită.

Gânduri finale

O dimensiune Dom excesivă dăunează performanței dvs. web, încetinind timpul de încărcare a paginii. Păstrați structura HTML simplă, fără elemente inutile . Verificați arborele DOM și scăpați de acele noduri care nu adaugă valoare site-ului dvs. Nu numai că îți vei accelera site-ul web, dar vei oferi și un UX mai bun.

Google va lua în considerare, fără îndoială, dimensiunea DOM în actualizarea Page Experience , care va fi lansată în lunile următoare. Asigurați-vă că aveți unul adecvat, astfel încât să nu vă afecteze performanța web.