Vagy a GTmetrixben "Csökkentse a DOM-elemek számát":
Mi az a DOM?
Amikor a böngészője HTML-dokumentumot kap, azt egy fastruktúrává kell alakítani, amelyet a CSS és JavaScript segítségével történő rendereléshez és rajzoláshoz használnak.
Ezt a fastruktúrát DOM-nak vagy dokumentumobjektum-modellnek nevezik.
- Csomók A DOM minden HTML-elemét csomópontnak nevezzük. (más néven "levelek" a fán).
- Mélység – Meddig tart egy „ág” a fában, azt mélységnek nevezzük. Például a fenti diagramon az img címke mélysége 3. (HTML -> body -> div -> img).
- Gyermek elemek – egy csomópont összes gyermek csomópontja (további elágazás nélkül) gyermek.
A Lighthouse és a Google PageSpeed Insights akkor kezdi meg az oldalak megjelölését, ha az alábbi feltételek valamelyike teljesül:
- Összesen több mint 1500 csomópont.
- Mélysége több mint 32 csomó.
- A szülőcsomópontnak több mint 60 gyermekcsomópontja van.
Hogyan befolyásolja a DOM mérete a teljesítményt?
A túlzott DOM-méret különböző módon befolyásolhatja a teljesítményt.
- Magasabb elemzési és megjelenítési idő (FCP) . A nagy DOM-fa és az összetett stílusszabályok nagyszerű munkát végeznek a böngészőben. A böngészőnek elemeznie kell a HTML-t, fel kell építenie a renderelési fát stb. Minden alkalommal, amikor a felhasználó interakcióba lép, vagy valami megváltozik a HTML-ben, a böngészőnek újra ki kell számítania azt.
- Növeli a memóriahasználatot - A JavaScript-kód tartalmazhat funkciókat a DOM-elemekhez való hozzáféréshez. Egy nagyobb DOM fa arra kényszeríti a JavaScriptet, hogy több memóriát használjon a feldolgozásához. Példa erre egy lekérdezésválasztó, in
document.querySelectorAll('img')amely felsorolja a lusta betöltésű könyvtárak által általában használt összes képet. - Növeli a TTFB-t – A DOM méretének növekedésével a HTML dokumentum mérete növekszik (KB-ban). Mivel több adatot kell átvinni a hálózaton, ez növeli a TTFB-t.
Hogyan csökkenthető technikailag a DOM mérete?
Például technikailag egyszerű a DOM méretének csökkentése:
használat:
<ul id="navigation-main">etc..</ul>ahelyett:
<div id="navigation-main"><ul>etc..</ul></div>Alapvetően szabaduljon meg az összes lehetséges HTML-elemtől. A Flexbox vagy a Grid segítségével tovább csökkentheti a DOM méretét.
De mivel WordPress-t használ, ez nem sokat segít!
Hogyan lehet csökkenteni a DOM méretét a WordPressben?
Nagy oldalak felosztása több oldalra
Van olyan oldala, ahol minden megtalálható az oldalon? Például szolgáltatások, kapcsolatfelvételi űrlapok, termékek, blogbejegyzések, ajánlások stb.?
Próbálja meg felosztani őket több oldalra, és hivatkozzon rájuk a fejlécből/navbarból.
Lusta betöltés és minden lehetséges oldalszámozás
Mindenféle elem lusta betöltése. Íme néhány példa:
- YouTube videó lusta betöltése - Használja a WP YouTube Lyte vagy a Lazy Load by WP Rocket alkalmazást.
- Korlátozza az oldalankénti blogbejegyzések/termékek számát – Általában arra törekszem, hogy oldalanként legfeljebb 10 blogbejegyzés maradjon, a többit pedig lapozgassam.
- Blogbejegyzések/termékek lusta betöltése – További blogbejegyzések vagy termékek betöltéséhez adjon hozzá egy Load More gombot vagy végtelen görgetést.
- Lusta hozzászólások betöltése - Disqus feltételes betöltést használok, mivel Disqus-t használok. Ha saját megjegyzéseit használja, használjon olyan bővítményeket, mint a Lazy Load for Comments .
- A megjegyzések oldalszámozása - ha több száz megjegyzésed van, ez a DOM méretét is befolyásolhatja. A megjegyzések oldalszámozásához lépjen a Beállítások -> Vita -> Megjegyzések lapozása menüpontra.
- Korlátozza a kapcsolódó bejegyzések számát – Próbálja korlátozni a kapcsolódó bejegyzések számát 3-ra vagy 4-re.
Megjegyzés: a képek lusta betöltése nem csökkenti a DOM méretét
Ne rejtse el a nem kívánt elemeket a CSS segítségével
Néha előfordulhat, hogy el kell távolítania egy téma/tervező által bevezetett elemeket. Például a termékoldalakon helyezzen el egy gombot a kosárba, egy értékelő gombot, a szerző adatait, a megjelenés dátumát stb.
Egy gyors megoldás, ha elrejti őket CSS-sel:
.cart-button {display:none;}Annak ellenére, hogy ez a megoldás egyszerűnek tűnik, nem kívánt kódnak teszi ki a felhasználókat (amely HTML-jelölést és CSS-stílust egyaránt tartalmaz).
Ellenőrizze a téma/bővítmény beállításait, hogy megtudja, van-e lehetőség eltávolítani. Ellenkező esetben keresse meg a megfelelő PHP-kódot, és távolítsa el / kommentálja.
Használjon jól megírt témákat és oldalkészítőket
A jó téma fontos szerepet játszik a DOM méretében. Használj jól megírt témákat, plGeneratePress vagyAstra .
Az oldalkészítők túl sok divet is bevezetnek. Használj olyan konstruktorokat, mint ploxigén, amelyek nem vezetnek be nem kívánt div blokkokat, és jobban szabályozzák a HTML-struktúrát.
Következtetés
Előfordulhat, hogy több bővítmény vagy témabeállítás túl sok div-t vezet be. Példa erre a „megamenü” bővítmények, például az UberMenu.
Néha kritikusak a webhely felhasználói élménye szempontjából. De néha soha nem használják a felhasználók.
Talán soha nem kattintanak a lábléc hivatkozásaira, mert a legtöbb látogató csak 75%-ig görget.
Használjon olyan eszközöket, mint a HotJar vagy a Google Analytics Events, hogy megtudja, hogy a látogatók valójában mit használnak és mit nem.Elemezze, mérje és ismételje meg.
