Hvordan redusere DOM-størrelsen i WordPress

Eller i GTmetrix "Reduser antall DOM-elementer":

Hva er DOM?

Når nettleseren din mottar et HTML-dokument, må det konverteres til en trestruktur, som brukes til å gjengi og tegne med CSS og JavaScript.

Denne trestrukturen kalles DOM eller Document Object Model.

Knuter Alle HTML-elementer i DOM kalles noder. (aka "blader" på treet).
Dybde – Hvor lenge en «gren» går i et tre kalles dybde. For eksempel, i diagrammet ovenfor, har img-taggen en dybde på 3. (HTML -> body -> div -> img).
Barneelementer – alle underordnede noder til en node (uten ytterligere forgrening) er underordnede.

Lighthouse og Google PageSpeed Insights begynner å flagge sider hvis en av følgende betingelser er oppfylt:

Totalt for å ha mer enn 1500 noder.
Har en dybde på mer enn 32 knop.
Overordnet node har mer enn 60 underordnede noder.

Hvordan påvirker DOM-størrelse ytelsen?

For stor DOM-størrelse kan påvirke ytelsen på forskjellige måter.

Høyere analysering og gjengivelsestid (FCP) . Et stort DOM-tre og komplekse stilregler gjør en god jobb for nettleseren. Nettleseren må analysere HTML-en, bygge gjengivelsestreet osv. Hver gang brukeren samhandler eller noe i HTML-en endres, må nettleseren beregne det på nytt.
Øker minnebruken - JavaScript-koden din kan ha funksjoner for å få tilgang til DOM-elementer. Et større DOM-tre tvinger JavaScript til å bruke mer minne til å behandle dem. Et eksempel kan være en spørringsvelger, idocument.querySelectorAll('img')som viser alle bilder som vanligvis brukes av biblioteker som laster lat.
Øker TTFB – Når størrelsen på DOM øker, øker størrelsen på HTML-dokumentet (i KB). Siden mer data må overføres over nettverket, øker dette TTFB.

Hvordan redusere DOM-størrelsen teknisk?

For eksempel er det teknisk enkelt å redusere størrelsen på DOM:

bruk:

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

i stedet for:

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

I utgangspunktet, bli kvitt alle mulige HTML-elementer. Du kan også bruke Flexbox eller Grid for å redusere DOM-størrelsen ytterligere.

Men siden du bruker WordPress, vil dette ikke hjelpe deg mye!

Hvordan redusere DOM-størrelsen i WordPress?

Del store sider i flere sider

Har du en side med alt på siden? Som tjenester, kontaktskjemaer, produkter, blogginnlegg, attester osv.?

Prøv å dele dem opp i flere sider og lenke til dem fra overskriften/navigasjonslinjen.

Lat lasting og paginering av alt mulig

Lat lasting av alle slags elementer. Her er noen eksempler:

YouTube-video lat lasting - Bruk WP YouTube Lyte eller Lazy Load av WP Rocket.
Begrens antall blogginnlegg/produkter per side – Jeg prøver vanligvis å beholde maksimalt 10 blogginnlegg per side og paginere resten.
Lat lasting av blogginnlegg/produkter – Legg til en Last mer-knapp eller uendelig rull for å laste inn flere blogginnlegg eller produkter.
Late lasting av kommentarer - Jeg bruker Disqus betinget lasting siden jeg bruker Disqus . Hvis du bruker dine egne kommentarer, bruk plugins som Lazy Load for Comments .
Paginering av kommentarer - hvis du har hundrevis av kommentarer, kan dette også påvirke DOM-størrelsen. For å paginere kommentarer, gå til Innstillinger -> Diskusjon -> Paginere kommentarer.
Begrens antall relaterte innlegg – Prøv å begrense antallet relaterte innlegg til 3 eller 4.

Merk: lat innlasting av bilder vil ikke redusere størrelsen på DOM

Ikke skjul uønskede elementer med CSS

Noen ganger må du kanskje fjerne elementer introdusert av et tema/designer. Legg for eksempel til en knapp i handlekurven på produktsidene, en prisknapp, forfatterinformasjon, publiseringsdato osv.

En rask løsning er å skjule dem med CSS:

.cart-knapp {display:ingen;}

Selv om denne løsningen ser enkel ut, utsetter du brukere for uønsket kode (som inkluderer både HTML-markering og CSS-styling).

Sjekk innstillingene for tema/plugin for å se om det er et alternativ for å fjerne det. Ellers finn den relevante PHP-koden og fjern/kommenter den.

Bruk velskrevne temaer og sidebyggere

Et godt tema spiller en viktig rolle i DOM-størrelse. Bruk velskrevne temaer somGenererTrykk ellerAstra .

Sidebyggere introduserer også for mange div. Bruk konstruktører somoksygen, som ikke introduserer uønskede div-blokker og har mer kontroll over HTML-strukturen.