sv.allworldrating.com
Artiklar

Hur man minskar DOM-storleken i WordPress

Eller i GTmetrix "Minska antalet DOM-element":

Vad är DOM?

När din webbläsare tar emot ett HTML-dokument måste det konverteras till en trädstruktur, som används för att rendera och rita med CSS och JavaScript.

Denna trädstruktur kallas DOM eller Document Object Model.

  • Knutar Alla HTML-element i DOM kallas noder. (aka "löv" på trädet).
  • Djup – Hur länge en "gren" går i ett träd kallas djup. Till exempel, i diagrammet ovan har img-taggen ett djup på 3. (HTML -> body -> div -> img).
  • Barnelement – alla underordnade noder till en nod (utan ytterligare förgrening) är underordnade.

Lighthouse och Google PageSpeed ​​​​Insights börjar flagga sidor om något av följande villkor är uppfyllt:

  • Totalt för att ha mer än 1500 noder.
  • Har ett djup på mer än 32 knop.
  • Den överordnade noden har fler än 60 underordnade noder.

Hur påverkar DOM-storleken prestanda?

Överdriven DOM-storlek kan påverka prestandan på olika sätt.

  • Högre analys- och renderingstid (FCP) . Ett stort DOM-träd och komplexa stilregler gör ett bra jobb för webbläsaren. Webbläsaren måste analysera HTML, bygga renderingsträdet, etc. Varje gång användaren interagerar eller något i HTML-koden ändras måste webbläsaren beräkna det igen.
  • Ökar minnesanvändningen - Din JavaScript-kod kan ha funktioner för att komma åt DOM-element. Ett större DOM-träd tvingar JavaScript att använda mer minne för att bearbeta dem. Ett exempel skulle vara en frågeväljare, idocument.querySelectorAll('img')som listar alla bilder som vanligtvis används av bibliotek som laddar lat.
  • Ökar TTFB – När storleken på DOM ökar, ökar storleken på HTML-dokumentet (i KB). Eftersom mer data behöver överföras över nätverket ökar detta TTFB.

Hur minskar man DOM-storleken tekniskt?

Till exempel är det tekniskt enkelt att minska storleken på DOM:en:

användande:

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

istället för:

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

I princip, bli av med alla möjliga HTML-element. Du kan också använda Flexbox eller Grid för att ytterligare minska DOM-storleken.

Men eftersom du använder WordPress kommer detta inte att hjälpa dig mycket!

Hur minskar man DOM-storleken i WordPress?

Dela upp stora sidor i flera sidor

Har du en sida med allt på sidan? Som tjänster, kontaktformulär, produkter, blogginlägg, vittnesmål, etc.?

Prova att dela upp dem i flera sidor och länka till dem från sidhuvudet/navigeringsfältet.

Latladdning och paginering av allt möjligt

Latladdning av alla möjliga element. Här är några exempel:

  • YouTube-video lata laddas - Använd WP YouTube Lyte eller Lazy Load av WP Rocket.
  • Begränsa antalet blogginlägg/produkter per sida – Jag brukar försöka hålla högst 10 blogginlägg per sida och paginera resten.
  • Lata laddar blogginlägg/produkter – Lägg till en Ladda mer-knapp eller oändlig rullning för att ladda fler blogginlägg eller produkter.
  • Lata laddar kommentarer - Jag använder Disqus villkorad laddning eftersom jag använder Disqus . Om du använder dina egna kommentarer, använd plugins som Lazy Load for Comments .
  • Sidindelning av kommentarer - om du har hundratals kommentarer kan detta också påverka DOM-storleken. För att paginera kommentarer, gå till Inställningar -> Diskussion -> Paginera kommentarer.
  • Begränsa antalet relaterade inlägg – Försök att begränsa antalet relaterade inlägg till 3 eller 4.

Obs: lat inläsning av bilder kommer inte att minska storleken på DOM

Dölj inte oönskade element med CSS

Ibland kan du behöva ta bort element som introducerats av ett tema/designer. Lägg till exempel till en knapp i varukorgen på produktsidorna, en prisknapp, författarinformation, publiceringsdatum etc.

En snabb lösning är att dölja dem med CSS:

.cart-knapp {display:ingen;}

Även om den här lösningen ser enkel ut, utsätter du användare för oönskad kod (som inkluderar både HTML-kodning och CSS-stil).

Kontrollera dina tema-/plugininställningar för att se om det finns ett alternativ att ta bort det. Annars hitta den relevanta PHP-koden och ta bort/kommentera den.

Använd välskrivna teman och sidbyggare

Ett bra tema spelar en viktig roll i DOM-storlek. Använd välskrivna teman somGeneratePress ellerAstra .

Sidbyggare introducerar också för många div. Använd konstruktörer somsyre, som inte introducerar oönskade div-block och har mer kontroll över HTML-strukturen.

Slutsats

Det kan finnas fler plugins eller temainställningar som introducerar för många divs. Ett exempel skulle vara "mega meny" plugins som UberMenu.

Ibland är de avgörande för användarupplevelsen av din webbplats. Men ibland används de aldrig av användare.

Dina sidfotslänkar kanske aldrig klickas på eftersom de flesta besökare bara rullar upp till 75 %.

Använd verktyg som HotJar eller Google Analytics Events för att ta reda på vad besökarna faktiskt använder och vad de inte använder.Analysera, mät och upprepa.

Intressanta Artiklar