DOM (Document Object Model) este o interfață de programare pentru documentele HTML și XML și numele dat structurii unui document HTML, compus din ramuri și noduri care conțin obiecte.
Istoria Document Object Model datează de la așa-numitul"război al browserelor" de la sfârșitul anilor 1990 între Netscape Navigator și Microsoft Internet Explorer, precum și JavaScript și JScript, primele limbaje de scripting implementate pe scară largă în motoarele JavaScript ale browserelor web.
Structura DOM în WordPress: copac, ramuri și noduri
DOM în WordPress nu este foarte diferit de orice alt site web.
<html> <-- Árbol (nodo raíz)
│
├── <head> <-- Rama
│ ├── <title> <-- Nodo (hoja)
│ └── <meta> <-- Nodo (hoja)
│
└── <body> <-- Rama
├── <header> <-- Rama
│ └── <h1> <-- Nodo (hoja)
│
├── <div> <-- Rama
│ ├── <p> <-- Nodo (interno)
│ └── <img> <-- Nodo (hoja)
│
└── <footer> <-- Rama
└── <a> <-- Nodo (hoja)
- Arbore: Întreaga pagină este reprezentată ca un arbore cu un nod rădăcină
(<html>)și elementele sale copil. - Ramuri: Fiecare element din cadrul unui
<div>,<header>,<footer>etc. reprezintă o ramură a arborelui. - Noduri: Toate elementele HTML, cum ar fi
<p>,<img>sau<a>,sunt noduri care atârnă de ramuri. Aceste noduri pot fi interne (conținând alte noduri) sau externe ("frunzele" copacului care nu au alți copii).
Astfel, densitatea ramurilor va depinde de tipul și numărul de elemente care îl compun. De exemplu, un meniu de navigare complex în WordPress poate genera mai multe niveluri de ramificații și zeci de noduri datorită numărului de linkuri și submeniuri.
Vă puteți gândi la noduri ca la toate elementele HTML de pe o pagină. Cu cât aveți mai multe elemente, cu atât durează mai mult, ceea ce duce la un timp total de blocare(TBT) mai mare.
Acesta poate fi un lucru dificil de optimizat în WordPress, deoarece nu puteți elimina pur și simplu elementele DOM care alcătuiesc structura unei pagini. Cu toate acestea, putem afișa selectiv aceste elemente și încărca un șir de obiecte sub fold, reducând astfel dimensiunea totală a DOM.
De ce să reducem dimensiunea DOM?
Un arbore DOM voluminos poate încetini timpul de încărcare al site-ului dvs. în mai multe moduri, crescând utilizarea memoriei prin calcule de stil mai lungi și mai lente, precum și prin costuri de date inutile pentru utilizatori.
Aceste scenarii diferite pot include încărcarea inutilă a nodurilor care nu sunt vizibile atunci când utilizatorul încarcă prima dată pagina, repetarea constantă a calculelor privind poziția și stilul nodurilor și stocarea unui număr excesiv de referințe la noduri care supraîncarcă memoria dispozitivelor utilizatorilor.
Beneficiile pe termen scurt și lung ale optimizării vitezei de încărcare a paginii au fost deja explicate în o mie și unu de articole. Pe scurt, pe termen scurt evitați ca oamenii să părăsească site-ul dumneavoastră plictisiți de așteptare și cel mai probabil vor petrece mai mult timp pe acesta. Viteza de încărcare este unul dintre factorii recunoscuți de Google în poziționarea SEO și înțeleg că este și pentru restul motoarelor de căutare, deci pe termen lung prețiosul trafic organic va crește.
Ce cauzează creșterea în dimensiune a DOM?
Dimensiunea finală a DOM este influențată de mai mulți factori, cum ar fi șablonul în sine, ceea ce adaugă diferitele plugin-uri pe care le utilizați și tipul de conținut pe care îl adăugați, cum ar fi blocuri complexe sau nefastele "slideri" de imagini etc. . De asemenea, codul generat, de exemplu, de așa-numitele "Builders".
De exemplu, până în 2022, an în care am abandonat Elementor pentru că rezista optimizării și era rar să nu rupă ceva în aproape fiecare actualizare, plus câteva experiențe proaste cu sprijinul lor tehnic, acest constructor a transformat codul web într-o adevărată supă de alfabet și un coșmar cu mii de
În luna aprilie a aceluiași an, Elementor a încorporat "containerul" Flexbox ca o noutate foarte nouă și revoluționară, când containerul fusese deja baza GenerateBlocks de ani de zile.
Cum se măsoară DOM?
Pentru măsurare am ales o postare care nu este încă foarte optimizată, un pic lungă și cu diferite tipuri de elemente.
Să începem cu cel mai cunoscut și mai popular: PageSpeed Insights . Google marchează acolo ca un avertisment(în portocaliu) atunci când elementul body are mai mult de 800 de noduri și ca un avertisment de eroare(în roșu) atunci când elementul body are mai mult de 1.400 de noduri și un mesaj cu această recomandare:"Evitați dimensiunea DOM excesivă".
În funcție de conținutul și structura fiecărei pagini analizate, veți găsi mai multe sau mai puține indicii cu privire la elementele pe care le puteți ataca. Avantajul este că, de obicei, afișează o imagine care indică elementul în cauză.
Încă o dată, aș dori să vă reamintesc că toate aceste alerte sunt doar recomandări și că nu trebuie să intrați în panică sau să deveniți obsedați de acești parametri. Există pagini care oferă o experiență bună utilizatorului și o viteză percepută bună cu scoruri PageSpeed scăzute.
Cu GTmetrix vom obține în general aceleași rezultate pe DOM.
Cu toate acestea, aici graficul său "cascadă" al cererilor este foarte util pentru a inspecta dintr-o privire toate elementele sortate în funcție de tip și de timpul de încărcare.
Dar cea mai simplă și rapidă modalitate este prin intermediul oricărui browser. Deschideți pagina care urmează să fie analizată și faceți clic dreapta / "inspectează", iar în fila "Rețea" veți găsi o cascadă mult mai detaliată, deoarece o puteți completa derulând pagina și se vor adăuga toate fișierele pe care le conține. Apoi le puteți sorta în funcție de greutate, tip, timp etc.
Sub această fereastră veți găsi un rezumat al rezultatelor. În stânga, numărul de solicitări. În dreapta, în albastru, timpul evenimentului DOMContentLoaded și în roșu timpul de încărcare al paginii respective.
Reduceți dimensiunea DOM cu "Lazy Elements" de la Perfmatters.
Perfmatters, acel plugin esențial pe care nu mă satur niciodată să-l recomand, a adăugat în versiunea sa 2.3.3 din 28 august 2024 o opțiune numită Lazy Elements care, deși este încă în Beta, funcționează foarte bine pentru a facilita sarcina de a ușura DOM-ul.
Această funcție permite adăugarea denumirii greșite"Lazy Load" la anumite elemente și la descendenții acestora (copii) prin adăugarea oricărei porțiuni dintr-un șir de atribute (class="example") al unui container părinte.
În documentația furnizată de Perfmatters cu privire la această nouă funcționalitate, suntem avertizați să nu încercăm să aplicăm "Lazy Load" elementelor care sunt deasupra fold-ului. Adică, ceea ce se încarcă pe ecran și primul lucru pe care utilizatorul îl vede fără a derula în jos.
De asemenea, dacă vedeți că ceva este rupt din punct de vedere vizual, asigurați-vă că ați folosit un șir unic pe pagină care nu este partajat cu alte elemente.
La fel ca în cazul imaginilor cu încărcare lentă, conținutul este plasat în interiorul unui . Acest lucru înseamnă că orice lucru care se încarcă leneș este în continuare, din punct de vedere tehnic, crawlabil și indexabil de către Google. Cu toate acestea, ei nu pot spune cu siguranță cum va trata Google elementele cu Lazy Load într-un șir. Așa că ei recomandă, în ceea ce privește SEO, să testați mai întâi.
De asemenea, avertizează să nu încercați să aplicați Lazy Load elementelor care conțin imagini care pornesc un "lightbox". Și așa este, am reușit să verific că funcția nativă WordPress lightbox nu mai funcționează atunci când clasa unui element care o implementează este adăugată la listă.
În rest, "Lazy Elements" funcționează perfect. Datorită acestei caracteristici, am economisit mult timp subțiind DOM-ul cu rezultate bune. Sper că Perfmatters își va continua dezvoltarea pentru a-și îmbunătăți și extinde opțiunile.
Cum să împărțiți postările WordPress lungi în pagini fără a afecta SEO
Actualizat: 31/03/2025 : 03:47
Buton pentru a deschide o fereastră modală fără plugin-uri în WordPress
Actualizat: 13/03/2025 : 19:21
