DOM (Document Object Model) je programové rozhranie pre dokumenty HTML a XML a názov pre štruktúru dokumentu HTML, ktorá sa skladá z vetiev a uzlov obsahujúcich objekty.
História objektového modelu dokumentu siaha do obdobia takzvaných"vojen prehliadačov" koncom 90. rokov medzi prehliadačmi Netscape Navigator a Microsoft Internet Explorer, ako aj JavaScript a JScript, prvých skriptovacích jazykov, ktoré boli široko implementované v JavaScriptových enginoch webových prehliadačov.
Štruktúra DOM v systéme WordPress: strom, vetvy a uzly
DOM v systéme WordPress sa veľmi nelíši od iných webových stránok.
<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)
- Strom: Celá stránka je reprezentovaná ako strom s koreňovým uzlom
(<html>)
a jeho podriadenými prvkami. - Vetvy: Každý prvok v rámci
<div>,
<header>,
<footer>
atď. predstavuje vetvu stromu. - Uzly: Všetky prvky HTML, ako napríklad
<p>,
<img>
alebo<a>
, sú uzly, ktoré visia z vetiev. Tieto uzly môžu byť interné (obsahujú iné uzly) alebo externé ("listy" stromu, ktoré nemajú žiadne iné deti).
Hustota vetiev teda závisí od typu a počtu prvkov, ktoré ju tvoria. Napríklad komplexné navigačné menu vo WordPress môže vzhľadom na počet odkazov a podmenu generovať niekoľko úrovní vetiev a desiatky uzlov.
Uzly si môžete predstaviť ako všetky prvky HTML na stránke. Čím viac prvkov máte, tým dlhšie to zvyčajne trvá, čo vedie k vyššiemu celkovému času bloku(TBT).
Optimalizácia v systéme WordPress môže byť zložitá, pretože nemôžete jednoducho odstrániť prvky DOM, ktoré tvoria štruktúru stránky. Môžeme však selektívne zobraziť tieto prvky a načítať reťazec objektov pod záhybom, čím sa zníži celková veľkosť DOM.
Prečo zmenšiť veľkosť DOM?
Rozsiahly strom DOM môže spomaliť načítanie vašej stránky niekoľkými spôsobmi, zvýšiť spotrebu pamäte tým, že spôsobí dlhšie a pomalšie výpočty štýlov, ako aj zbytočné náklady na dáta pre používateľov.
Tieto rôzne scenáre môžu zahŕňať zbytočné načítanie uzlov, ktoré nie sú viditeľné pri prvom načítaní stránky, neustále opakovanie výpočtov pozície uzlov a štýlov a ukladanie nadmerného počtu odkazov na uzly, ktoré zaťažujú pamäť zariadení používateľov.
Krátkodobé a dlhodobé výhody optimalizácie rýchlosti načítania stránok už boli vysvetlené v tisícoch a jednom článku. Stručne povedané, z krátkodobého hľadiska sa vyhnete tomu, aby ľudia odchádzali z vašej stránky znudení čakaním a s najväčšou pravdepodobnosťou na nej strávia viac času. Rýchlosť načítania je jedným z faktorov uznávaných spoločnosťou Google pri umiestňovaní v SEO a chápem, že je to tak aj pre ostatné vyhľadávače, takže z dlhodobého hľadiska sa zvýši cenná organická návštevnosť.
Čo spôsobuje zväčšovanie DOM?
Konečná veľkosť DOM je ovplyvnená mnohými faktormi, ako je samotná šablóna, to, čo pridávajú rôzne pluginy, ktoré používate, a typ obsahu, ktorý pridávate, ako sú zložité bloky alebo hanebné "posuvníky" obrázkov atď. Taktiež kód generovaný napríklad pomocou tzv. builderov.
Napríklad až do roku 2022, v ktorom som opustil Elementor, pretože sa bránil optimalizácii a bolo zriedkavé, že takmer pri každej aktualizácii niečo nerozbil, plus niekoľko zlých skúseností s ich technickou podporou, tento staviteľ zmenil webový kód na skutočnú abecednú polievku a nočnú moru s tisíckami
V apríli toho istého roku Elementor začlenil "kontajner" Flexbox ako úplne novú a revolučnú novinku, hoci kontajner bol už roky základom GenerateBlocks.
Ako merať DOM?
Na meranie som si vybral príspevok, ktorý ešte nie je veľmi optimalizovaný, je trochu dlhý a obsahuje rôzne typy prvkov.
Začnime najznámejším a najpopulárnejším: PageSpeed Insights . Google tam označí ako varovanie(oranžovou farbou), keď má prvok body viac ako 800 uzlov, a ako chybové varovanie(červenou farbou), keď má prvok body viac ako 1 400 uzlov, a správu s týmto odporúčaním:"Vyhnite sa nadmernej veľkosti DOM".

V závislosti od obsahu a štruktúry každej stránky, ktorú analyzujete, nájdete viac alebo menej vodítok, ktoré prvky môžete napadnúť. Výhodou je, že sa zvyčajne zobrazí obrázok ukazujúci na príslušný prvok.
Ešte raz by som vám chcel pripomenúť, že všetky tieto upozornenia sú len odporúčaniami a že by ste nemali podliehať panike alebo byť týmito ukazovateľmi posadnutí. Existujú stránky, ktoré ponúkajú dobrý používateľský zážitok a dobrú vnímanú rýchlosť s nízkym skóre PageSpeed.
Pomocou GTmetrix dostaneme vo všeobecnosti rovnaké výsledky na DOM.

Tu je však veľmi užitočný jeho "vodopádový" graf požiadaviek, ktorý umožňuje na prvý pohľad skontrolovať všetky položky zoradené podľa typu a času, ktorý potrebujú na načítanie.

Najjednoduchší a najrýchlejší spôsob je však prostredníctvom akéhokoľvek prehliadača. Otvorte stránku, ktorú chcete analyzovať, a kliknite pravým tlačidlom myši / "inspect" a na karte "Network" (Sieť) nájdete oveľa podrobnejší vodopád, pretože ho môžete doplniť posúvaním stránky a pridajú sa všetky súbory, ktoré obsahuje. Potom ich môžete zoradiť podľa hmotnosti, typu, času atď.

Pod týmto oknom nájdete súhrn výsledkov. Vľavo je počet požiadaviek. Vpravo modrou farbou čas udalosti DOMContentLoaded a červenou farbou čas načítania danej stránky.
Zníženie veľkosti DOM pomocou funkcie "Lazy Elements" od spoločnosti Perfmatters.
Perfmatters, tento nevyhnutný doplnok, ktorý nikdy neunaví odporúčať, pridal vo svojej verzii 2.3.3 z 28. augusta 2024 možnosť s názvom Lazy Elements, ktorá, hoci je stále v beta verzii, funguje naozaj dobre a uľahčuje úlohu odľahčenia DOM.

Táto funkcia umožňuje pridať nesprávne pomenované"Lazy Load" do konkrétnych prvkov a ich potomkov (detí) pridaním ľubovoľnej časti reťazca atribútov (class="example") rodičovského kontajnera.
V dokumentácii k tejto novej funkcii, ktorú poskytla spoločnosť Perfmatters, sa uvádza, aby sme sa nepokúšali použiť funkciu "Lazy Load" na prvky, ktoré sú nad záhybom. Teda to, čo sa načíta na obrazovke a čo používateľ vidí ako prvé bez toho, aby sa posunul nadol.
Ďalej upozorňujeme, že ak vidíte, že je niečo vizuálne poškodené, uistite sa, že ste na stránke použili jedinečný reťazec, ktorý nie je zdieľaný s inými prvkami.
Podobne ako pri pomaly sa načítavajúcich obrázkoch je obsah umiestnený vo vnútri . To znamená, že čokoľvek, čo sa načíta lenivo, je technicky stále prehľadateľné a indexovateľné spoločnosťou Google. Nemôžu však s istotou povedať, ako bude spoločnosť Google zaobchádzať s prvkami s Lazy Load v reťazci. Preto odporúčajú z hľadiska SEO najprv otestovať.
Upozorňuje tiež, aby ste sa nepokúšali použiť Lazy Load na prvky obsahujúce obrázky, ktoré spúšťajú "lightbox". A tak sa aj stalo, podarilo sa mi overiť, že natívna funkcia lightboxu WordPress prestane fungovať, keď sa do zoznamu pridá trieda prvku, ktorý ju implementuje.
V opačnom prípade funguje funkcia "Lazy Elements" dokonale. Vďaka tejto funkcii som ušetril veľa času pri zriedení DOM s dobrými výsledkami. Dúfam, že Perfmatters bude pokračovať vo vývoji, aby sa zlepšil a rozšíril svoje možnosti.


Ako pridať tlačidlá na zdieľanie sociálnych médií bez zásuvných modulov
Actualizado: 04/02/2025 : 14:30

Štyri milióny inštalácií WordPress v ohrození kvôli zraniteľnosti v plugine Really Simple Security
Actualizado: 15/11/2024 : 02:15