da.allworldrating.com
Artikler

Sådan reduceres DOM-størrelsen i WordPress

Eller i GTmetrix "Reducer antallet af DOM-elementer":

Hvad er DOM?

Når din browser modtager et HTML-dokument, skal det konverteres til en træstruktur, som bruges til at rendere og tegne med CSS og JavaScript.

Denne træstruktur kaldes DOM eller Document Object Model.

  • Knob Alle HTML-elementer i DOM kaldes noder. (aka "blade" på træet).
  • Dybde – Hvor længe en "gren" går i et træ kaldes dybde. For eksempel, i diagrammet ovenfor, har img-tagget en dybde på 3. (HTML -> body -> div -> img).
  • Barneelementer – alle underordnede knudepunkter i en knude (uden yderligere forgrening) er underordnede.

Lighthouse og Google PageSpeed ​​​​Insights begynder at markere sider, hvis en af ​​følgende betingelser er opfyldt:

  • I alt at have mere end 1500 noder.
  • Har en dybde på mere end 32 knob.
  • Den overordnede node har mere end 60 underordnede noder.

Hvordan påvirker DOM-størrelse ydeevnen?

For stor DOM-størrelse kan påvirke ydeevnen på forskellige måder.

  • Højere parse og gengivelsestid (FCP) . Et stort DOM-træ og komplekse stilregler gør et godt stykke arbejde for browseren. Browseren skal parse HTML'en, bygge render-træet osv. Hver gang brugeren interagerer eller noget i HTML'en ændres, skal browseren beregne det igen.
  • Øger hukommelsesforbrug - Din JavaScript-kode kan have funktioner til at få adgang til DOM-elementer. Et større DOM-træ tvinger JavaScript til at bruge mere hukommelse til at behandle dem. Et eksempel kunne være en forespørgselsvælger idocument.querySelectorAll('img')som viser alle de billeder, der almindeligvis bruges af biblioteker med lazy-loading.
  • Øger TTFB – Når størrelsen af ​​DOM øges, øges størrelsen af ​​HTML-dokumentet (i KB). Da der skal overføres flere data over netværket, øges TTFB.

Hvordan reducerer man DOM-størrelsen teknisk?

For eksempel er det teknisk nemt at reducere størrelsen af ​​DOM:

brug:

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

i stedet for:

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

Dybest set slippe af med alle mulige HTML-elementer. Du kan også bruge Flexbox eller Grid til yderligere at reducere DOM-størrelsen.

Men da du bruger WordPress, vil dette ikke hjælpe dig meget!

Hvordan reducerer man DOM-størrelsen i WordPress?

Opdel store sider i flere sider

Har du en side med alt på siden? Ligesom tjenester, kontaktformularer, produkter, blogindlæg, udtalelser osv.?

Prøv at opdele dem i flere sider og linke til dem fra headeren/navigationslinjen.

Doven indlæsning og paginering af alt muligt

Doven indlæsning af alle slags elementer. Her er nogle eksempler:

  • YouTube-video doven indlæsning - Brug WP YouTube Lyte eller Lazy Load af WP Rocket.
  • Begræns antallet af blogindlæg/produkter pr. side – Jeg forsøger normalt at beholde maks. 10 blogindlæg pr. side og paginere resten.
  • Doven indlæsning af blogindlæg/produkter – Tilføj en Load More-knap eller uendelig rul for at indlæse flere blogindlæg eller produkter.
  • Dovne indlæsning af kommentarer - Jeg bruger Disqus betinget indlæsning, da jeg bruger Disqus . Hvis du bruger dine egne kommentarer, skal du bruge plugins som Lazy Load for Comments.
  • Sideinddeling af kommentarer - hvis du har hundredvis af kommentarer, kan dette også påvirke DOM-størrelsen. For at sideinddele kommentarer skal du gå til Indstillinger -> Diskussion -> Sideinddele kommentarer.
  • Begræns antallet af relaterede indlæg – Prøv at begrænse antallet af relaterede indlæg til 3 eller 4.

Bemærk: doven indlæsning af billeder reducerer ikke størrelsen af ​​DOM

Skjul ikke uønskede elementer med CSS

Nogle gange skal du muligvis fjerne elementer introduceret af et tema/designer. Tilføj for eksempel en knap til indkøbskurven på produktsiderne, en prisknap, forfatteroplysninger, udgivelsesdato osv.

En hurtig løsning er at skjule dem med CSS:

.cart-knap {display:ingen;}

Selvom denne løsning ser enkel ud, udsætter du brugerne for uønsket kode (som inkluderer både HTML-markering og CSS-styling).

Tjek dine tema-/pluginindstillinger for at se, om der er mulighed for at fjerne det. Ellers find den relevante PHP-kode og fjern/kommenter den.

Brug velskrevne temaer og sidebyggere

Et godt tema spiller en vigtig rolle i DOM-størrelse. Brug velskrevne temaer som f.eksGenererTryk ellerAstra .

Sidebyggere introducerer også for mange divs. Brug konstruktører somilt, som ikke introducerer uønskede div-blokke og har mere kontrol over HTML-strukturen.

Konklusion

Der kan være flere plugins eller temaindstillinger, der introducerer for mange divs. Et eksempel ville være "mega menu" plugins såsom UberMenu.

Nogle gange er de kritiske for brugeroplevelsen på dit websted. Men nogle gange bliver de aldrig brugt af brugere.

Måske bliver der aldrig klikket på dine sidefodslinks, fordi de fleste besøgende kun ruller op til 75 %.

Brug værktøjer som HotJar eller Google Analytics Events til at finde ud af, hvad de besøgende rent faktisk bruger, og hvad de ikke bruger.Analyser, mål og gentag.

Interessante Artikler