sk.allworldrating.com
Články

Ako znížiť veľkosť DOM vo WordPress

Alebo v GTmetrix „Znížte počet prvkov DOM“:

Čo je DOM?

Keď váš prehliadač prijme dokument HTML, musí sa previesť do stromovej štruktúry, ktorá sa používa na vykresľovanie a kreslenie pomocou CSS a JavaScriptu.

Táto stromová štruktúra sa nazýva DOM alebo Document Object Model.

  • Uzly Všetky prvky HTML v DOM sa nazývajú uzly. (alias "listy" na strome).
  • Hĺbka - Ako dlho „konár“ v strome trvá, sa nazýva hĺbka. Napríklad na obrázku vyššie má značka img hĺbku 3. (HTML -> body -> div -> img).
  • Detské prvky – všetky dcérske uzly uzla (bez ďalšieho vetvenia) sú deti.

Lighthouse a Google PageSpeed ​​​​Insights začnú označovať stránky, ak je splnená jedna z nasledujúcich podmienok:

  • Celkovo bude mať viac ako 1500 uzlov.
  • Majú hĺbku viac ako 32 uzlov.
  • Rodičovský uzol má viac ako 60 dcérskych uzlov.

Ako veľkosť DOM ovplyvňuje výkon?

Nadmerná veľkosť DOM môže ovplyvniť výkon rôznymi spôsobmi.

  • Vyšší čas analýzy a vykreslenia (FCP) . Veľký strom DOM a zložité pravidlá štýlu robia prehliadaču skvelú prácu. Prehliadač musí analyzovať HTML, zostaviť strom renderu atď. Zakaždým, keď používateľ interaguje alebo sa niečo v HTML zmení, prehliadač to musí znova vypočítať.
  • Zvyšuje využitie pamäte - Váš kód JavaScript môže mať funkcie na prístup k prvkom DOM. Väčší strom DOM núti JavaScript používať viac pamäte na ich spracovanie. Príkladom môže byť selektor dotazu, indocument.querySelectorAll('img')ktorý uvádza všetky obrázky bežne používané v knižniciach s lenivým načítaním.
  • Zvyšuje TTFB – So zvyšujúcou sa veľkosťou DOM sa zväčšuje veľkosť dokumentu HTML (v kB). Keďže cez sieť je potrebné preniesť viac údajov, zvyšuje sa tým TTFB.

Ako technicky zmenšiť veľkosť DOM?

Napríklad je technicky jednoduché zmenšiť veľkosť DOM:

použitie:

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

namiesto:

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

V podstate sa zbavte všetkých možných HTML prvkov. Na ďalšie zmenšenie veľkosti DOM môžete použiť aj Flexbox alebo Grid.

Ale keďže používate WordPress, toto vám veľmi nepomôže!

Ako znížiť veľkosť DOM vo WordPress?

Rozdeľte veľké strany na viacero strán

Máte stránku so všetkým, čo je na webe? Páčia sa vám služby, kontaktné formuláre, produkty, blogové príspevky, referencie atď.?

Skúste ich rozdeliť na viacero stránok a odkazovať na ne z hlavičky/navigačného panela.

Lenivé načítavanie a stránkovanie všetkého možného

Lenivé načítanie všetkých druhov prvkov. Tu je niekoľko príkladov:

  • Lenivé načítanie videa YouTube - Použite WP YouTube Lyte alebo Lazy Load od WP Rocket.
  • Obmedzte počet blogových príspevkov/produktov na stránku – Zvyčajne sa snažím zachovať maximálne 10 blogových príspevkov na stránku a zvyšok stránkovať.
  • Lenivé načítavanie blogových príspevkov/produktov – Pridajte tlačidlo Načítať viac alebo nekonečné posúvanie na načítanie ďalších blogových príspevkov alebo produktov.
  • Lenivé načítavanie komentárov - Používam podmienené načítanie Disqus, pretože používam Disqus . Ak používate vlastné komentáre, použite doplnky ako Lazy Load for Comments .
  • Stránkovanie komentárov - ak máte stovky komentárov, môže to ovplyvniť aj veľkosť DOM. Ak chcete stránkovať komentáre, prejdite do časti Nastavenia -> Diskusia -> Stránkovanie komentárov.
  • Obmedzte počet súvisiacich príspevkov – Skúste obmedziť počet súvisiacich príspevkov na 3 alebo 4.

Poznámka: Lenivé načítanie obrázkov nezmenší veľkosť DOM

Neskrývajte nechcené prvky pomocou CSS

Niekedy možno budete musieť odstrániť prvky zavedené témou/návrhárom. Napríklad pridajte tlačidlo do košíka na stránkach produktov, tlačidlo hodnotenia, informácie o autorovi, dátum vydania atď.

Rýchla oprava je skryť ich pomocou CSS:

.cart-button {display:none;}

Aj keď toto riešenie vyzerá jednoducho, vystavujete používateľov nechcenému kódu (ktorý zahŕňa značky HTML aj štýly CSS).

Skontrolujte nastavenia motívu/doplnku a zistite, či existuje možnosť na jeho odstránenie. V opačnom prípade nájdite príslušný kód PHP a odstráňte ho/komentujte ho.

Používajte dobre napísané témy a tvorcov stránok

Dobrá téma hrá dôležitú úlohu vo veľkosti DOM. Používajte dobre napísané témy ako naprGeneratePress aleboAstra .

Tvorcovia stránok tiež zavádzajú príliš veľa divov. Použite konštruktérov akokyslík, ktoré nezavádzajú nežiaduce bloky div a majú väčšiu kontrolu nad štruktúrou HTML.

Záver

Môže existovať viac doplnkov alebo nastavení tém, ktoré zavádzajú príliš veľa divov. Príkladom môžu byť pluginy „mega menu“, ako napríklad UberMenu.

Niekedy sú rozhodujúce pre používateľskú skúsenosť s vašimi stránkami. Ale niekedy ich používatelia nikdy nepoužívajú.

Možno sa na vaše odkazy v päte nikdy neklikne, pretože väčšina návštevníkov sa posúva iba do 75 %.

Pomocou nástrojov ako HotJar alebo Google Analytics Events zistite, čo návštevníci skutočne používajú a čo nepoužívajú.Analyzujte, merajte a opakujte.

Zaujímavé Články