Või GTmetrixis "DOM-i elementide arvu vähendamine":
Mis on DOM?
Kui teie brauser saab HTML-dokumendi, tuleb see teisendada puustruktuuriks, mida kasutatakse CSS-i ja JavaScriptiga renderdamiseks ja joonistamiseks.
Seda puustruktuuri nimetatakse DOM-iks või dokumendiobjekti mudeliks.
- Sõlmed Kõiki DOM-i HTML-i elemente nimetatakse sõlmedeks. (ehk "lehed" puul).
- Sügavus – Seda, kui kaua “oks” puus kulgeb, nimetatakse sügavuseks. Näiteks ülaltoodud diagrammil on märgendi img sügavus 3. (HTML -> body -> div -> img).
- Lapse elemendid – kõik sõlme alamsõlmed (ilma edasise hargnemiseta) on lapsed.
Lighthouse ja Google PageSpeed Insights hakkavad lehti märgistama, kui on täidetud üks järgmistest tingimustest.
- Kokku on rohkem kui 1500 sõlme.
- Sügavus on üle 32 sõlme.
- Ülemsõlmel on rohkem kui 60 alamsõlme.
Kuidas DOM-i suurus jõudlust mõjutab?
Liigne DOM-i suurus võib jõudlust mitmel viisil mõjutada.
- Kõrgem sõelumis- ja renderdusaeg (FCP) . Suur DOM-puu ja keerulised stiilireeglid teevad brauseri jaoks suurepärast tööd. Brauser peab sõeluma HTML-i, koostama renderduspuu jne. Iga kord, kui kasutaja suhtleb või midagi HTML-is muutub, peab brauser selle uuesti arvutama.
- Suurendab mälukasutust - Teie JavaScripti koodil võib olla DOM-i elementidele juurdepääsu funktsioone. Suurem DOM-puu sunnib JavaScripti nende töötlemiseks rohkem mälu kasutama. Näiteks päringuvalija, in
document.querySelectorAll('img')mis loetleb kõik laisalt laaditavates teekides tavaliselt kasutatavad pildid. - Suurendab TTFB-d – Kui DOM-i suurus suureneb, suureneb HTML-dokumendi suurus (KB-des). Kuna võrgu kaudu tuleb üle kanda rohkem andmeid, suurendab see TTFB-d.
Kuidas DOM-i suurust tehniliselt vähendada?
Näiteks DOM-i suurust on tehniliselt lihtne vähendada:
kasutamine:
<ul id="navigation-main">etc..</ul>selle asemel:
<div id="navigation-main"><ul>etc..</ul></div>Põhimõtteliselt vabanege kõigist võimalikest HTML-i elementidest. DOM-i suuruse edasiseks vähendamiseks saate kasutada ka Flexboxi või Gridi.
Kuid kuna kasutate WordPressi, ei aita see teid palju!
Kuidas WordPressis DOM-i suurust vähendada?
Jagage suured lehed mitmeks leheküljeks
Kas teil on leht kõigega saidil? Nagu teenused, kontaktvormid, tooted, ajaveebipostitused, iseloomustused jne?
Proovige need mitmeks leheküljeks jagada ja neile päisest/navigeerimisribalt linkida.
Laisk laadimine ja kõige võimaliku lehekülgede vahetamine
Igasuguste elementide laisk laadimine. siin on mõned näidised:
- YouTube'i video laisk laadimine - Kasutage WP YouTube Lyte või Lazy Load by WP Rocket.
- Piirake ajaveebipostituste/toodete arvu lehel – Tavaliselt püüan hoida ühele lehele maksimaalselt 10 blogipostitust ja ülejäänu lehekülgede korrastamiseks.
- Blogipostituste/toodete laisk laadimine - Lisage nupp Laadi rohkem või lõputu kerimine, et laadida rohkem ajaveebi postitusi või tooteid.
- Kommentaaride laisk laadimine - Kasutan Disqusi tingimuslikku laadimist, kuna kasutan Disqusi. Kui kasutate oma kommentaare, kasutage lisandmooduleid nagu Lazy Load for Comments .
- Kommentaaride lehekülgede jagamine - kui teil on sadu kommentaare, võib see mõjutada ka DOM-i suurust. Kommentaaride lehekülgede muutmiseks avage Seaded -> Arutelu -> Kommentaaride lehekülgede muutmine.
- Piirake seotud postituste arvu – Proovige piirata seotud postituste arvu 3 või 4-ni.
Märkus: piltide laisk laadimine ei vähenda DOM-i suurust
Ärge peitke soovimatuid elemente CSS-iga
Mõnikord peate võib-olla eemaldama teema/disaineri poolt lisatud elemente. Näiteks lisa tootelehtedel ostukorvi nupp, hindamisnupp, autori andmed, avaldamise kuupäev jne.
Kiire lahendus on peita need CSS-iga:
.cart-button {display:none;}Kuigi see lahendus tundub lihtne, avaldate kasutajad soovimatule koodile (mis hõlmab nii HTML-i märgistust kui ka CSS-i stiili).
Kontrollige oma teema/plugina seadeid, et näha, kas on võimalik seda eemaldada. Vastasel juhul otsige üles vastav PHP kood ja eemaldage/kommenteerige see.
Kasutage hästi kirjutatud teemasid ja lehtede koostajaid
Hea teema mängib DOM-i suuruses olulist rolli. Kasutage hästi kirjutatud teemasid, näiteksGeneratePress võiAstra .
Lehekülje koostajad võtavad kasutusele ka liiga palju dive. Kasutage selliseid konstruktoreidhapnik, mis ei lisa soovimatuid div-plokke ja omavad suuremat kontrolli HTML-i struktuuri üle.
Järeldus
Võib olla rohkem pistikprogramme või teemaseadeid, mis toovad sisse liiga palju dive. Näiteks võib tuua "megamenüü" pistikprogrammid, nagu UberMenu.
Mõnikord on need teie saidi kasutajakogemuse jaoks kriitilised. Kuid mõnikord ei kasuta kasutajad neid kunagi.
Võib-olla ei klõpsata teie jaluse linke kunagi, kuna enamik külastajaid kerib ainult kuni 75%.
Kasutage selliseid tööriistu nagu HotJar või Google Analytics Events, et teada saada, mida külastajad tegelikult kasutavad ja mida mitte.Analüüsige, mõõtke ja korrake.
