DOM (Document Object Model ) je programovací rozhraní pro dokumenty HTML a XML a název pro strukturu dokumentu HTML, která se skládá z větví a uzlů obsahujících objekty.
Historie objektového modelu dokumentu sahá až k takzvaným"válkám prohlížečů" na konci 90. let mezi Netscape Navigatorem a Microsoft Internet Explorerem, stejně jako k JavaScriptům a JScriptům, prvním skriptovacím jazykům, které byly široce implementovány v JavaScriptových enginech webových prohlížečů.
Struktura DOM ve WordPressu: strom, větve a uzly
DOM ve WordPressu se příliš neliší od jiných webových stránek.
<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 reprezentována jako strom s kořenovým uzlem
(<html>)a jeho podřízenými prvky. - Větve: Každý prvek v
<div>,<header>,<footer>atd. představuje větev stromu. - Uzly: Všechny prvky HTML, například
<p>,<img>nebo<a>, jsou uzly, které visí na větvích. Tyto uzly mohou být interní (obsahují jiné uzly) nebo externí ("listy" stromu, které nemají žádné další potomky).
Hustota větví tedy závisí na typu a počtu prvků, které ji tvoří. Například složité navigační menu ve WordPressu může vzhledem k počtu odkazů a podnabídek generovat několik úrovní větví a desítky uzlů.
Uzly si můžete představit jako všechny prvky HTML na stránce. Čím více prvků máte, tím déle to obvykle trvá, což vede k vyššímu celkovému času bloku(TBT).
Optimalizace ve WordPressu může být obtížná, protože nelze jednoduše odstranit prvky DOM, které tvoří strukturu stránky. Můžeme však tyto prvky selektivně zobrazit a načíst řetězec objektů pod záhybem, čímž se sníží celková velikost DOM.
Proč zmenšit velikost DOM?
Objemný strom DOM může zpomalit načítání webu několika způsoby, zvýšit spotřebu paměti tím, že způsobí delší a pomalejší výpočty stylů, a také zbytečné náklady na data pro uživatele.
Tyto různé scénáře mohou zahrnovat zbytečné načítání uzlů, které nejsou při prvním načtení stránky viditelné, neustálé opakování výpočtů polohy uzlů a stylů a ukládání nadměrného počtu odkazů na uzly, které zatěžují paměť uživatelských zařízení.
Krátkodobé i dlouhodobé přínosy optimalizace rychlosti načítání stránek již byly vysvětleny v tisíci a jednom článku. Stručně řečeno, v krátkodobém horizontu zabráníte tomu, aby lidé odcházeli z vašich stránek znuděni čekáním, a s největší pravděpodobností na nich stráví více času. Rychlost načítání je jedním z faktorů uznávaných Googlem při SEO pozicích a chápu, že je tomu tak i u ostatních vyhledávačů, takže z dlouhodobého hlediska se zvýší cenná organická návštěvnost.
Co způsobuje zvětšování DOM?
Konečná velikost DOM je ovlivněna mnoha faktory, jako je samotná šablona, to, co přidávají různé pluginy, které používáte, a typ obsahu, který přidáváte, jako jsou složité bloky nebo hanebné "posuvníky" obrázků atd. . Také kód generovaný například pomocí tzv. stavitelů.
Například až do roku 2022, kdy jsem Elementor opustil, protože se bránil optimalizaci a málokdy se stalo, že by téměř při každé aktualizaci něco nerozbil, a navíc jsem měl několik špatných zkušeností s jejich technickou podporou, tento builder proměnil webový kód ve skutečnou abecední polévku a noční můru s tisíci
V dubnu téhož roku Elementor začlenil "kontejner" Flexbox jako zcela novou a převratnou novinku, přestože kontejner byl již léta základem GenerateBlocks.
Jak měřit DOM?
Pro měření jsem vybral příspěvek, který ještě není příliš optimalizovaný, je trochu dlouhý a obsahuje různé typy prvků.
Začněme tím nejznámějším a nejoblíbenějším: PageSpeed Insights . Google zde označí jako varování(oranžovou barvou), když má prvek body více než 800 uzlů, a jako chybovou zprávu(červenou barvou), když má prvek body více než 1400 uzlů, a zprávu s tímto doporučením:"Vyhněte se nadměrné velikosti DOM".
V závislosti na obsahu a struktuře každé analyzované stránky najdete více či méně vodítek, které prvky můžete napadnout. Výhodou je, že se obvykle zobrazí obrázek ukazující na daný prvek.
Znovu bych vám rád připomněl, že všechna tato upozornění jsou pouze doporučení a že byste neměli propadat panice nebo být těmito ukazateli posedlí. Existují stránky, které nabízejí dobrý uživatelský zážitek a dobrou vnímanou rychlost s nízkým skóre PageSpeed.
Pomocí GTmetrix získáme obecně stejné výsledky v DOM.
Zde je však velmi užitečný jeho "vodopádový" graf požadavků, který umožňuje na první pohled zkontrolovat všechny položky seřazené podle typu a podle doby jejich načítání.
Nejjednodušší a nejrychlejší způsob je však prostřednictvím libovolného prohlížeče. Otevřete stránku, kterou chcete analyzovat, klikněte pravým tlačítkem myši / "Inspect" a na kartě "Network" (Síť) najdete mnohem podrobnější vodopád, protože jej můžete doplnit posouváním stránky a všechny soubory, které obsahuje, budou přidány. Poté je můžete seřadit podle váhy, typu, času atd.
Pod tímto oknem najdete shrnutí výsledků. Vlevo je uveden počet požadavků. Vpravo modře čas události DOMContentLoaded a červeně čas načtení dané stránky.
Zmenšení velikosti DOM pomocí funkce "Lazy Elements" společnosti Perfmatters.
Perfmatters, ten zásadní doplněk, který mě nikdy neomrzí doporučovat, přidal ve své verzi 2.3.3 z 28. srpna 2024 možnost nazvanou Lazy Elements, která, ačkoli je stále v beta verzi, funguje opravdu dobře a usnadňuje úlohu odlehčení DOM.
Tato funkce umožňuje přidat nesprávně pojmenované"Lazy Load" ke konkrétním elementům a jejich potomkům (children) přidáním libovolné části řetězce atributů (class="example") rodičovského kontejneru.
V dokumentaci k této nové funkci, kterou poskytla společnost Perfmatters, je uvedeno varování, abychom se nepokoušeli použít funkci "Lazy Load" na prvky, které jsou nad záhybem. Tedy to, co se načítá na obrazovce a co uživatel vidí jako první, aniž by musel rolovat dolů.
Dále upozorňujeme, že pokud vidíte, že je něco vizuálně poškozeno, ujistěte se, že jste na stránce použili jedinečný řetězec, který není sdílený s jinými prvky.
Stejně jako u pomalu se načítajících obrázků je obsah umístěn uvnitř . To znamená, že cokoli, co se načítá líně, je technicky stále prohledatelné a indexovatelné společností Google. Nelze však s jistotou říci, jak bude Google zacházet s prvky s Lazy Load v řetězci. Proto doporučují z hlediska SEO nejprve otestovat.
Upozorňuje také, abyste se nepokoušeli použít Lazy Load na prvky obsahující obrázky, které spouštějí "lightbox". A je to tak, podařilo se mi ověřit, že nativní funkce lightboxu WordPressu přestane fungovat, když je do seznamu přidána třída prvku, který ji implementuje.
Jinak funkce "Lazy Elements" funguje bezchybně. Díky této funkci jsem ušetřil spoustu času při ztenčování DOM s dobrými výsledky. Doufám, že Perfmatters bude pokračovat ve vývoji a bude své možnosti vylepšovat a rozšiřovat.
