Fixa Lighthouse-varningen 'avoid excessive-DOM size'

Vad är Lighthouse-varningen 'excessive-DOM size'?

Vad är varningen avoid excessive-DOM size i Lighthouse? Lighthouse flaggar sidor som har antingen:

• fler än 1 500 DOM-noder totalt.
  Det innebär att det finns fler än 1500 HTML-element på vår sida.
• ett maximalt noddjup större än 32 noder.
  Detta inträffar när ett element är nästlat i minst 32 överordnade element.
• en överordnad nod med fler än 60 underordnade noder.
  Det kan hända när ett överordnat element (som en tabell eller lista) har fler än 60 underordnade element (tabellrader eller listelement)

Varningen 'avoid excessive DOM size' påverkar inte direkt några Lighthouse-mätvärden. I teorin kan sidor med en stor DOM-storlek laddas ganska snabbt. I praktiken gör de det ofta inte. En överdriven DOM-storlek kommer troligen indirekt att påverka viktiga Lighthouse-mätvärden som Largest Contentful Paint (LCP) och Cumulative Layout Shift (CLS).

En snabb påminnelse: Vad är DOM?

DOM står för Document Object Model. DOM är en trädstrukturerad objektrepresentation av din HTML där varje HTML-element (till exempel: body eller h1) representeras av sin egen nod.

Vad orsakar en överdriven DOM-storlek?

En överdriven DOM-storlek kan ha ett antal orsaker. En överdriven DOM-storlek orsakas vanligtvis av:

• Dåligt kodade plugins i ditt CMS.
• DOM-noder skapade av JavaScript.
• Page Builders som genererar uppblåst HTML (till exempel: Elementor eller WP Bakery).
• Text som kopieras och klistras in i en WYSIWYG-editor (som TinyMCE).
• Dålig mallkodning.

Hur påverkar 'excessive-DOM size' pagespeed

En stor DOM påverkar inte direkt Lighthouse-mätvärdena. Det gör dock renderingen av en webbsida onödigt komplicerad, vilket gör det nästan omöjligt att uppnå det höga Lighthouse-poänget. Din webbläsare behöver göra mer arbete innan webbsidan kan visas på skärmen. Det finns 3 problem med en stor DOM.

• Storleken på din HTML är större eftersom din kod är uppblåst. Detta ökar tiden det tar att ladda ner din sida.
• En stor DOM-storlek saktar ner renderingsprestandan. Din webbläsare behöver göra fler (DOM-)beräkningar vid första laddning och varje gång en användare eller ett skript interagerar med din sida.
• Din webbläsare kan använda mycket mer minne vid interaktion med DOM via JavaScript.

Så fixar du 'avoid excessive-DOM size'

För att fixa varningen 'avoid excessive-DOM size' behöver du först spåra dess ursprung. Lighthouse ger dig en indikation på var Maximum DOM Depth och Maximum Child Elements finns. Därifrån behöver du söka lite. Använd DOM-inspektören i din webbläsare och undersök DOM. Försök ta reda på vad som skapar ett stort antal DOM-noder. Det finns 5 vanliga orsaker:

1. Dåligt kodade plugins i ditt CMS.
   När ett plugin, till exempel ett slider- eller kalenderplugin, skapar ett stort antal DOM-noder kan du överväga att ersätta detta plugin med ett mer strömlinjeformat plugin.
2. DOM-noder skapade av JavaScript.
   Ett JavaScript, till exempel en chattwidget, kan injicera ett stort antal DOM-noder i DOM. I detta fall, ta bort JavaScript-filen eller hitta en ersättning med samma funktionalitet
3. Page Builders som genererar uppblåst HTML
   Page builders som Elementor eller WP Bakery skapar ofta uppblåst kod med ett stort antal DOM-noder. Det finns ingen enkel lösning för detta. PageBuilders är ofta en del av arbetsflödet. Lösningen inkluderar att rensa upp din uppblåsta kod och ändra ditt arbetsflöde.
4. Text som kopieras och klistras in i en WYSIWYG-editor
   De flesta WYSIWYG-editorer som TinyMCE gör ett dåligt jobb med att rensa kopierad kod, särskilt när den klistras in från en annan rich text-källa som Microsoft Word. Den kopierar inte bara texten utan även stilarna. Dessa stilar kan vara inbäddade i ett stort antal DOM-noder. Lösningen på detta problem är enkel. Sluta klistra in innehåll i din editor och rensa upp sidor som redan har inklistrad, uppblåst text.
5. Dålig (mall-)kodning.
   När en stor DOM-storlek skapas av din editor eller orsakas av din mall kan det bli besvärligt. Det innebär att uppblåst kod är en del av din webbplats kärna. Du kommer att behöva byta editor, skriva om delar av din mall eller till och med börja om från början.

Lösningsalternativ för 'avoid excessive-DOM size'

Ibland är det inte möjligt att ta bort den överdrivna DOM-storleken utan att skriva om stora delar av din webbplats och ändra hela ditt arbetsflöde. Det finns några lösningsalternativ för att minska påverkan av en överdriven DOM-storlek. Dessa lösningsalternativ är långt ifrån perfekta och kan introducera en helt ny uppsättning utmaningar som i vissa fall kan påverka din SEO eller indexering.

• Ladda delar av din webbsida med lazy loading.
  För att snabba upp den initiala renderingen kan du överväga att använda lazy loading för delar av din webbplats. Till exempel sidfoten.
• Förbättra sidrendering med content visibility.
  CSS-egenskapen content-visibility talar om för en webbläsare att hoppa över styling, layout och paint tills du behöver det, vilket kan minska påverkan av den överdrivna nodstorleken.
• Dela upp stora sidor i flera sidor.
  Att dela upp stora sidor i flera sidor kan minska antalet DOM-noder när innehållet i sig skapar många DOM-noder.
• Implementera infinite scroll.
  Infinite scroll är i grunden lazy loading. När du scrollar genom upprepade element som bilder (Pinterest) eller stora datatabeller kan infinite scroll snabba upp din sida avsevärt.
• Undvik minnesintensivt JavaScript.
  När du hanterar ett stort antal DOM-noder på din sida, var extra försiktig med JavaScript. document.getElementsByTagName('div'); kan ladda ett stort antal DOM-noder vilket ökar minnesanvändningen.
• Undvik komplicerade CSS-deklarationer.
  När du hanterar ett stort antal DOM-noder på din sida, var extra försiktig med komplicerade CSS-deklarationer. div:last-child; behöver kontrollera last-child-statusen för varje div på din sida.