Jak snížit velikost DOM ve WordPress

Nebo v GTmetrix "Snižte počet prvků DOM":

Co je DOM?

Když váš prohlížeč obdrží dokument HTML, musí být převeden do stromové struktury, která se používá pro vykreslování a kreslení pomocí CSS a JavaScriptu.

Tato stromová struktura se nazývá DOM nebo Document Object Model.

Uzly Všechny prvky HTML v DOM se nazývají uzly. (aka "listy" na stromě).
Hloubka – Jak dlouho „větev“ prochází ve stromu, se nazývá hloubka. Například ve výše uvedeném diagramu má značka img hloubku 3. (HTML -> tělo -> div -> img).
Dětské prvky – všechny podřízené uzly uzlu (bez dalšího větvení) jsou potomky.

Lighthouse a Google PageSpeed Insights začnou označovat stránky, pokud je splněna jedna z následujících podmínek:

Celkem mít více než 1500 uzlů.
Mít hloubku více než 32 uzlů.
Nadřazený uzel má více než 60 podřízených uzlů.

Jak velikost DOM ovlivňuje výkon?

Nadměrná velikost DOM může ovlivnit výkon různými způsoby.

Vyšší doba analýzy a vykreslení (FCP) . Velký strom DOM a složitá pravidla stylu odvádějí pro prohlížeč skvělou práci. Prohlížeč musí analyzovat HTML, sestavit strom renderu atd. Pokaždé, když uživatel interaguje nebo se něco v HTML změní, prohlížeč to musí znovu vypočítat.
Zvyšuje využití paměti - Váš kód JavaScript může mít funkce pro přístup k prvkům DOM. Větší strom DOM nutí JavaScript používat více paměti k jejich zpracování. Příkladem může být selektor dotazu, indocument.querySelectorAll('img')který uvádí všechny obrázky běžně používané knihovnami s líným načítáním.
Zvyšuje TTFB – S rostoucí velikostí DOM se zvětšuje i velikost HTML dokumentu (v kB). Protože je po síti potřeba přenést více dat, zvyšuje se tím TTFB.

Jak technicky zmenšit velikost DOM?

Například je technicky snadné zmenšit velikost DOM:

používání:

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

namísto:

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

V podstatě se zbavte všech možných HTML prvků. Můžete také použít Flexbox nebo Grid k dalšímu zmenšení velikosti DOM.

Ale protože používáte WordPress, moc vám to nepomůže!

Jak snížit velikost DOM ve WordPressu?

Rozdělte velké stránky na více stránek

Máte stránku se vším, co je na webu? Líbí se vám služby, kontaktní formuláře, produkty, blogové příspěvky, reference atd.?

Zkuste je rozdělit na více stránek a odkazovat na ně ze záhlaví/navigačního panelu.

Líné načítání a stránkování všeho možného

Líné načítání všemožných prvků. Zde jsou nějaké příklady:

Líné načítání videa na YouTube - Použijte WP YouTube Lyte nebo Lazy Load od WP Rocket.
Omezte počet blogových příspěvků/produktů na stránku – Obvykle se snažím udržet maximálně 10 blogových příspěvků na stránku a zbytek stránkovat.
Líné načítání blogových příspěvků/produktů – Přidejte tlačítko Načíst více nebo nekonečné posouvání a načtěte více blogových příspěvků nebo produktů.
Líné načítání komentářů - Používám podmíněné načítání Disqus, protože používám Disqus . Pokud používáte vlastní komentáře, použijte pluginy jako Lazy Load for Comments .
Stránkování komentářů - pokud máte stovky komentářů, může to také ovlivnit velikost DOM. Chcete-li stránkovat komentáře, přejděte do Nastavení -> Diskuse -> Stránkování komentářů.
Omezte počet souvisejících příspěvků – Zkuste omezit počet souvisejících příspěvků na 3 nebo 4.

Poznámka: líné načítání obrázků nezmenší velikost DOM

Neschovávejte nežádoucí prvky pomocí CSS

Někdy může být nutné odstranit prvky zavedené motivem/návrhářem. Přidejte například tlačítko do košíku na stránkách produktů, tlačítko pro hodnocení, informace o autorovi, datum vydání atd.

Rychlá oprava je skrýt je pomocí CSS:

.cart-button {display:none;}

I když toto řešení vypadá jednoduše, vystavujete uživatele nežádoucímu kódu (který zahrnuje jak značky HTML, tak styly CSS).

Zkontrolujte nastavení motivu/pluginu a zjistěte, zda existuje možnost jeho odstranění. V opačném případě najděte příslušný kód PHP a odeberte/okomentujte jej.

Používejte dobře napsaná témata a tvůrce stránek

Dobré téma hraje důležitou roli ve velikosti DOM. Používejte dobře napsaná témata jakoGeneratePress neboAstra .

Tvůrci stránek také zavádějí příliš mnoho divů. Použijte konstruktéry jakokyslík, které nezavádějí nežádoucí bloky div a mají větší kontrolu nad strukturou HTML.