Hur man åtgärdar överdriven DOM-storlek i WordPress (11 experttips)

Varningen 'Undvik en överdriven DOM-storlek' i WordPress innebär att din sida har för många HTML-element, vilket saktar ner den.

De bästa sätten att åtgärda detta är att använda ett prestandatillägg som WP Rocket, optimera hur bilder och gallerier laddas, och välja ett lättviktigt tema eller sidbyggare.

Denna varning kan dyka upp i Google Lighthouse eller andra verktyg för hastighetstestning, och den låter teknisk. Men konceptet är enkelt: din webbplats är en samling delar, och att ha för många kan överväldiga en webbläsare.

Här på WPBeginner har vi inte bara optimerat våra egna webbplatser med hög trafik för att lösa exakt detta problem, utan vi har också hjälpt otaliga användare att förbättra sin webbplatshastighet.

I den här artikeln kommer vi att beskriva 11 av våra expermetoder för att lösa problemet och förbättra din WordPress-prestanda.

Vad betyder varningen 'Undvik en överdriven DOM-storlek'?

Varningen 'Undvik en överdriven DOM-storlek' visas i hastighetstestverktyg som Google PageSpeed Insights när en webbsida har för många HTML-element för att en webbläsare ska kunna bearbeta dem effektivt.

DOM står för Document Object Model. Det är en trädliknande struktur som representerar alla objekt på din webbsida. Varje element, som en rubrik, stycke, bild eller knapp, är en 'nod' i detta träd.

Det totala antalet av dessa noder utgör DOM-storleken. När detta antal blir för stort behöver webbläsaren mer tid och resurser för att rendera sidan, vilket kan sakta ner din webbplats.

Hur påverkar överdriven DOM-storlek webbplatsens prestanda?

En stor DOM-storlek påverkar negativt din WordPress-webbplatsens prestanda på flera viktiga sätt. Varje element du lägger till på en sida, från text och bilder till formulär och menyer, ökar antalet DOM-noder.

Denna komplexitet har följande effekter:

• Långsammare sidrendering: En webbläsare måste tolka hela DOM-trädet innan den kan visa sidan. Ett större träd tar längre tid att bearbeta, vilket försenar tiden det tar för en besökare att se ditt innehåll.
• Ökad minnesanvändning: En komplex DOM-struktur kräver mer minne och processorkraft från användarens enhet. Detta kan vara särskilt märkbart på mobiltelefoner.
• Dålig användarupplevelse: Dessa prestandaproblem leder till långsammare laddningstider. Detta kan frustrera besökare och få dem att lämna din webbplats innan den ens laddas.
• Negativ SEO-påverkan: Sökmotorer som Google använder sidhastighet som en rankingfaktor. Långsamt laddande sidor kan skada din WordPress SEO och minska webbplatskonverteringar.

Hur många DOM-element är för många för Google?

Testverktyg som Google Lighthouse använder inte bara ett nummer för att flagga en överdriven DOM-storlek. Istället tittar de på tre specifika kriterier:

• Totalt antal DOM-noder: En varning utlöses om det totala antalet HTML-element (noder) på sidan överstiger 1 500. Detta är den vanligaste orsaken till varningen.
• Maximal DOM-djup: En varning utlöses om element är nästlade för djupt inuti varandra. Lighthouse flaggar en sida om nästlingen går djupare än 32 nivåer.
• Maximalt antal underordnade element: En varning utlöses om ett enda överordnat element har mer än 60 underordnade element direkt inuti sig. Detta händer ofta med dåligt kodade megamenyer eller gallerier.

Sidor med flera sliders, komplexa layouter med många nästlade sektioner eller talrika inbäddade objekt är mer benägna att överskrida dessa gränser. Du behöver dock inte offra din design för att åtgärda detta problem.

Vi har satt ihop en omfattande guide för dig att lösa detta. Här är 11 beprövade sätt att minska DOM-storleken och förbättra WordPress-prestanda:

1. Använd ett plugin för WordPress-hastighetsoptimering
2. Kontrollera ditt tema och dina plugins
3. Använd en optimerad sidbyggare
4. Optimera dina bilder och videor
5. Implementera Lazy Loading
6. Sidnumrera kommentarer eller inlägg med mycket innehåll
7. Minimera CSS- och JavaScript-filer
8. Minska JavaScript och CSS som blockerar rendering
9. Aktivera WordPress-cachelagring
10. Använd ett WordPress CDN
11. Optimera din WordPress-databas

Använd gärna snabblänkarna ovan för att lära dig mer om en specifik optimeringsmetod.

1. Använd ett WordPress-plugin för hastighetsoptimering

Vår första rekommendation är att installera ett kraftfullt WordPress-plugin för hastighetsoptimering. Dessa plugins hanterar de tekniska optimeringar som krävs för att göra din webbplats snabbare.

Detta gör att du kan fokusera på att hantera och skapa ditt innehåll medan tillägget arbetar i bakgrunden.

Här på WPBeginner använder och rekommenderar vi WP Rocket. Vi har använt det på våra egna webbplatser för att hantera cachning, filoptimering och lat laddning, vilket du kan läsa mer om i vår artikel om hur vi ökar sidladdningshastigheten på WPBeginner.

Även om WP Rocket främst är känt som ett cache-plugin, hjälper många av dess funktioner till att åtgärda problemen som orsakas av en stor DOM. Dessa inkluderar filoptimering, lat laddning och fördröjning av JavaScript.

Vi kommer att förklara dessa funktioner senare i artikeln. Du kan också läsa vår fullständiga WP Rocket-recension för mer information, eller använda vår konfigurationsguide för att komma igång.

2. Kontrollera ditt tema och dina plugins

Medan WordPress-plugins och teman lägger till funktionalitet och stil till din WordPress-webbplats, kan de också bidra till en överdriven DOM-storlek.

Dåligt kodade teman och tillägg kan lägga till onödiga HTML-element, vilket blåser upp sidans struktur. På samma sätt kan tillägg och teman med extra funktioner du inte använder fortfarande ladda sin kod, vilket ökar DOM:en.

För att kontrollera om ett specifikt plugin eller tema är boven, kan du inaktivera plugins ett i taget eller tillfälligt byta till ett standard WordPress-tema. Efter varje ändring, kör ett hastighetstest för att se om varningen om DOM-storlek försvinner.

För att undvika detta problem, välj alltid teman och plugins från välrenommerade källor som den officiella WordPress-katalogen eller välkända utvecklare. Dessa resurser har vanligtvis striktare kodningsstandarder.

För pålitliga rekommendationer, kolla in WPBeginner Solution Center, där vi testar och granskar WordPress-programvara.

3. Använd en optimerad sidbyggare

Sidbyggare är utmärkta verktyg för att designa anpassade layouter utan kod, men vissa kan bidra till en överdriven DOM-storlek. De paketerar ofta ditt innehåll i extra HTML-element för att styra styling och layout.

Till exempel kan en dåligt optimerad sidbyggare linda en enskild knapp i flera nästlade <div>-behållare för justering och styling. Var och en av dessa behållare lägger till en ny nod till DOM, vilket snabbt ökar det totala antalet.

Om du misstänker att din sidbyggare är problemet kan du testa den genom att inaktivera den på en staging-webbplats och kontrollera DOM-storleken igen. Du kan använda inbyggda verktyg som Full Site Editor, men de kan sakna flexibilitet.

För bästa balans mellan flexibilitet och prestanda rekommenderar vi att du använder en hastighetsoptimerad sidbyggare som SeedProd. I våra tester presterar den konsekvent bättre än andra populära byggare.

Du kan se hur det jämförs med andra i vår Elementor vs. Divi vs. SeedProd-analys.

Många av våra partnervarumärken, inklusive WPForms och Duplicator, använder SeedProd för att bygga sina webbplatser.

4. Optimera dina bilder och videor

Det är viktigt att klargöra hur bilder relaterar till DOM-storlek. Filstorleken på en bild (i KB eller MB) påverkar inte antalet DOM-noder. En <img>-tagg är en enda nod, oavsett hur stor bildfilen är.

Sättet som bilder visas på kan dock öka DOM-storleken. Vissa teman och gallerier plugins slår in varje bild i flera <div>-behållare för styling, ljuslådor eller bildtexter. Dessa extra omslutande element är vad som läggs till DOM-antalet, inte själva bilden.

Medan optimering av bilder genom komprimering är avgörande för sidhastighet, bör du också välja galleripolugins som genererar ren kod. En plugin som Optimole kan hjälpa till med bildkomprimering och lat laddning.

För videor rekommenderar vi att du aldrig laddar upp dem direkt till WordPress.

Istället, hosta dem på tjänster som YouTube eller Vimeo och bädda in dem. Detta minskar belastningen på din server och håller din DOM renare.

5. Ställ in Lazy Loading

Lat laddning är en teknik som fördröjer laddningen av icke-kritiska element, som bilder och videor, tills de är på väg att komma in i användarens visningsområde. Detta gör att webbläsaren kan rendera den initiala, synliga delen av sidan mycket snabbare.

Genom att inte ladda allt på en gång minskar lat laddning den initiala bearbetningsarbetet för webbläsaren och skapar en mycket smidigare användarupplevelse.

Att ställa in lat laddning är enkelt med ett plugin som WP Rocket. I din WordPress-instrumentpanel, navigera till Inställningar » WP Rocket och öppna fliken ‘Media’. Här kan du aktivera lat laddning för bilder, videor och iframes med ett enda klick.

För gallerier rekommenderar vi att du använder ett galleriprogram med inbyggd lazy loading, som till exempel Envira Gallery.

Du kan till och med lazy-loada din kommentarssektion med hjälp av ett plugin som Thrive Comments för att ytterligare förbättra prestandan.

6. Sidnumrera kommentarer eller inlägg med mycket innehåll

Mycket långa inlägg eller kommentarsfält kan avsevärt öka DOM-storleken och sakta ner laddningstiderna. Sidnumrering löser detta genom att dela upp innehållet i flera, mindre sidor.

Detta gör innehållet mer hanterbart för både webbläsaren och läsaren. Du kan enkelt dela upp långa inlägg genom att lägga till blocket ‘Sidbrytning’ i WordPress-redigeraren. För detaljerade instruktioner, se vår guide om hur man delar upp WordPress-inlägg i flera sidor.

På liknande sätt kan du paginera dina kommentarer. Gå till Inställningar » Diskussion i ditt WordPress-adminområde, markera rutan bredvid 'Dela upp kommentarer på sidor' och ange antalet kommentarer per sida.

Du kan läsa mer i vår guide om hur man sidnumrerar kommentarer i WordPress.

Vi föreslår att du undviker oändlig scrollning, eftersom det kontinuerligt lägger till nya element i DOM, vilket kan leda till prestandaproblem.

7. Minimera CSS- och JavaScript-filer

Även om denna teknik inte direkt minskar antalet DOM-noder, förbättrar den prestandan avsevärt och minskar den negativa effekten av en stor DOM.

Minifiering tar bort onödiga tecken som kommentarer, mellanslag och radbrytningar från dina CSS- och JavaScript-filer. Detta minskar deras filstorlek, vilket gör dem snabbare för en webbläsare att ladda ner och bearbeta.

Ett plugin som WP Rocket gör detta enkelt. Gå till Inställningar » WP Rocket, växla till fliken 'Filoptimering' och aktivera funktionerna för att minifiera CSS- och JavaScript-filer. För mer information, se vår guide om hur man minifierar CSS- och JavaScript-filer.

Innan minifiering rekommenderar vi att du skapar en säkerhetskopia av din webbplats. I sällsynta fall kan minifiering orsaka problem med vissa teman eller tillägg.

8. Minska JavaScript och CSS som blockerar rendering

Detta är en annan teknik som inte minskar DOM-noder direkt, men som avsevärt förbättrar den upplevda prestandan genom att ändra hur filer laddas.

Tänk dig att en webbläsare som laddar din sida är som att måla en tavla. Render-blockerande resurser tvingar webbläsaren att sluta måla webbsidan tills de är helt laddade. Att skjuta upp dem gör att huvudinnehållet kan målas först, så att användaren ser din webbplats snabbare.

WP Rocket har funktioner för att åtgärda detta. Det kan kombinera filer för att minska HTTP-förfrågningar och skjuta upp laddningen av icke-kritisk JavaScript. Detta innebär att användare ser ditt innehåll snabbare, även om bakgrundsskript inte har laddats klart.

Du kan lära dig mer i vår artikel om hur man åtgärdar renderblockerande resurser i WordPress.

9. Aktivera WordPress-cachning

Även om cachning inte direkt minskar antalet DOM-noder, snabbar den dramatiskt upp sidladdningstider, särskilt för återkommande besökare. Detta gör att DOM laddas och visas mycket snabbare.

Cachelagring lagrar en statisk version av din webbplats. När en användare återbesöker kan deras webbläsare ladda denna sparade version istället för att bygga om sidan från grunden, vilket är mycket snabbare. Detta minskar också belastningen på din server, vilket frigör den att bearbeta DOM snabbare.

Att konfigurera cachning är enkelt med ett program som WP Rocket, som automatiskt aktiverar optimala cachningsinställningar vid aktivering. Du kan lära dig mer om dess cachningsfunktioner i vår installationsguide för WP Rocket.

10. Använd ett WordPress CDN

Ett CDN (Content Delivery Network) hjälper också till att mildra effekterna av en stor DOM utan att direkt ändra den. Ett CDN är ett globalt nätverk av servrar som lagrar kopior av din webbplats statiska filer (bilder, CSS, JavaScript).

När en användare besöker din webbplats levererar CDN dessa filer från servern som ligger närmast deras fysiska plats. Detta minskar drastiskt nedladdningstiderna och gör att webbläsaren kan börja bearbeta DOM mycket snabbare.

Vi använder Cloudflares CDN på WPBeginner. Du kan läsa varför vi valde det i vårt inlägg om att byta från Sucuri till Cloudflare.

För andra alternativ, kolla in vår lista över de bästa WordPress CDN-tjänsterna.

11. Optimera din WordPress-databas

Detta är ytterligare en indirekt optimering. Även om din databas inte är en del av DOM, kan en uppblåst databas sakta ner din servers svarstid. Denna fördröjning gör att det tar längre tid för din webbplats att laddas, vilket kan få en stor DOM att kännas ännu långsammare.

Med tiden kan din databas fyllas med onödig data som inläggsrevisioner, spamkommentarer och gamla plugin-data. Att rensa ut detta hjälper din webbplats att köras mer effektivt.

Vår guide om hur du optimerar din WordPress-databas visar dig hur du använder ett plugin för att rensa din databas säkert och snabbt.

Fokusera på WordPress prestanda som helhet, inte bara DOM-storlek

Även om det är viktigt att åtgärda varningen 'Undvik en överdriven DOM-storlek' i WordPress för webbplatshastighet, är det inte den enda faktorn att ta hänsyn till.

En webbplats med mycket funktionalitet eller unik formatering kan naturligtvis ha en större DOM, och det är okej. Nyckeln är att hitta rätt balans mellan webbplatsens prestanda och funktioner.

Så, förutom DOM-storleken, kanske du vill uppmärksamma andra mätvärden som Core Web Vitals. Dessa är specifika mätvärden som Google använder för att mäta en webbplats användarupplevelse.

Vanliga frågor om överdriven DOM-storlek

Här är svar på några av de vanligaste frågorna vi får om att åtgärda problem med DOM-storlek i WordPress.

Vad är en bra DOM-storlek för en webbsida?

Enligt Googles riktlinjer är ett bra mål att hålla din DOM-storlek under 1 500 totala noder, med ett maximalt nästlingsdjup på 32 nivåer, och inget enskilt element som har mer än 60 barn.

Ökar användningen av en sidbyggare alltid DOM-storleken?

Inte nödvändigtvis. Moderna, prestandafokuserade sidbyggare som SeedProd är utformade för att generera ren och effektiv kod. Vissa äldre eller dåligt kodade sidbyggare kan dock lägga till många onödiga omslagselement som ökar DOM-storleken.

Hur kan jag kontrollera min webbplats DOM-storlek gratis?

Du kan använda gratis onlineverktyg som Google PageSpeed Insights eller GTmetrix. Du kan också kontrollera det direkt i din webbläsare. I Google Chrome, högerklicka på din sida, välj 'Inspektera', gå till fliken 'Konsol' och skriv kommandot document.querySelectorAll('*').length och tryck sedan på Enter.

Ytterligare resurser för WordPress-prestanda

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du åtgärdar överdriven DOM-storlek i WordPress.

Du kanske också vill kolla in dessa relaterade guider om hur du förbättrar din webbplats prestanda:

• Den ultimata guiden för att öka WordPress-hastighet & prestanda
• Hur man snabbar upp WooCommerce-prestanda
• Bevisade sätt att minska avvisningsfrekvensen och öka konverteringarna

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.