Fiks «avoid excessive-DOM size» Lighthouse-advarselen

Hva er «excessive-DOM size» Lighthouse-advarselen?

Hva er avoid excessive-DOM size-advarselen i Lighthouse? Lighthouse flagger sider som har enten:

• mer enn 1 500 DOM-noder totalt.
  Dette betyr at det er mer enn 1500 HTML-elementer på siden din.
• en maksimal nodedybde på mer enn 32 noder.
  Dette skjer når et element er nestet i minst 32 overordnede elementer.
• en overordnet node med mer enn 60 barnenoder.
  Dette kan skje når et overordnet element (som en tabell eller en liste) har mer enn 60 barn (tabellrader eller listeelementer)

Advarselen «avoid excessive DOM size» påvirker ikke direkte noen Lighthouse-metrikker. I teorien kan sider med stor DOM-størrelse lastes ganske raskt. I praksis gjør de det ofte ikke. En for stor DOM-størrelse vil mest sannsynlig indirekte påvirke viktige Lighthouse-metrikker som Largest Contentful Paint (LCP) og Cumulative Layout Shift (CLS).

En rask påminnelse: Hva er DOM?

DOM står for Document Object Model. DOM er en trestrukturert objektrepresentasjon av HTML-en din, der hvert HTML-element (for eksempel: body eller h1) er representert av sin egen node.

Hva forårsaker en for stor DOM-størrelse?

En for stor DOM-størrelse kan ha mange årsaker. En for stor DOM-størrelse er vanligvis forårsaket av:

• Dårlig kodede plugins i CMS-et ditt.
• DOM-noder opprettet av JavaScript.
• Page Builders som genererer oppblåst HTML (for eksempel: Elementor eller WP Bakery).
• Tekst som er kopiert og limt inn i en WYSIWYG-editor (som TinyMCE).
• Dårlig malkoding.

Hvordan påvirker «excessive-DOM size» sidehastigheten

En stor DOM påvirker ikke direkte Lighthouse-metrikkene. Den gjør imidlertid gjengivelse av en nettside unødvendig komplisert, noe som gjør det nesten umulig å oppnå en høy Lighthouse-poengsum. Nettleseren din må gjøre mer arbeid før nettsiden kan vises på skjermen. Det er 3 problemer med en stor DOM.

• Størrelsen på HTML-en din er større fordi koden er oppblåst. Dette vil øke tiden det tar å laste ned siden din.
• En stor DOM-størrelse vil bremse gjengivelsesytelsen. Nettleseren din må gjøre flere (DOM-)beregninger ved første innlasting og hver gang en bruker eller et skript samhandler med siden din.
• Nettleseren din kan bruke mye mer minne når den samhandler med DOM via JavaScript.

Hvordan fikse «avoid excessive-DOM size»

For å fikse «avoid excessive-DOM size»-advarselen må du først spore opphavet. Lighthouse vil gi deg en indikasjon på hvor Maximum DOM Depth og Maximum Child Elements befinner seg. Derfra må du gjøre litt søking. Bruk DOM-inspektøren i nettleseren din og undersøk DOM. Prøv å finne ut hva som skaper et stort antall DOM-noder. Det er 5 vanlige årsaker:

1. Dårlig kodede plugins i CMS-et ditt.
   Når en plugin, for eksempel en slider eller en kalender-plugin, oppretter et stort antall DOM-noder, kan du vurdere å erstatte denne pluginen med en mer strømlinjeformet plugin.
2. DOM-noder opprettet av JavaScript.
   Et JavaScript, for eksempel en chat-widget, kan injisere et stort antall DOM-noder i DOM. I dette tilfellet fjern JavaScript-filen eller finn en erstatning med samme funksjonalitet
3. Page Builders som genererer oppblåst HTML
   Page builders som Elementor eller WP Bakery lager ofte oppblåst kode med et stort antall DOM-noder. Det finnes ingen enkel løsning for dette. Page Builders er ofte en del av arbeidsflyten. Løsningen inkluderer å rydde opp i den oppblåste koden og endre arbeidsflyten din.
4. Tekst som er kopiert og limt inn i en WYSIWYG-editor
   De fleste WYSIWYG-editorer som TinyMCE gjør en dårlig jobb med å rydde opp i innlimt kode, spesielt når den er limt inn fra en annen rik tekstkilde som Microsoft Word. Den kopierer ikke bare teksten, men også stilene. Disse stilene kan være innebygd i et stort antall DOM-noder. Løsningen på dette problemet er enkel. Slutt å lime inn innhold i editoren din og rydd opp i sider som allerede har innlimt, oppblåst tekst.
5. Dårlig (mal-)koding.
   Når en stor DOM-størrelse er opprettet av editoren din eller forårsaket av malen din, kan ting bli vanskelig. Dette betyr at oppblåst kode er en del av nettstedets kjerne. Du må bytte editor, skrive om deler av malen din, eller til og med starte fra bunnen av.

Løsninger for «avoid excessive-DOM size»

Noen ganger er det ikke mulig å fjerne den for store DOM-størrelsen uten å skrive om store deler av nettstedet ditt og endre hele arbeidsflyten din. Det finnes noen løsninger for å redusere effekten av en for stor DOM-størrelse. Disse løsningene er langt fra perfekte og kan introdusere helt nye utfordringer som kan påvirke SEO eller indeksering i noen tilfeller.

• Lazy load deler av nettsiden din.
  For å fremskynde den første gjengivelsen kan du vurdere å lazy loade deler av nettstedet ditt. For eksempel bunnteksten.
• Forbedre sidegjengivelse med content visibility.
  CSS content-visibility-egenskapen forteller nettleseren å hoppe over styling, layout og painting til du trenger det, noe som kan redusere effekten av den for store nodestørrelsen.
• Del opp store sider i flere sider.
  Å dele opp store sider i flere sider kan redusere antall DOM-noder når selve innholdet opprettet mange DOM-noder.
• Implementer infinite scroll.
  Infinite scroll er i bunn og grunn lazy loading. Når du blar gjennom gjentatte elementer som bilder (Pinterest) eller store datatabeller, kan infinite scroll fremskynde siden din betraktelig.
• Unngå minnekrevende JavaScript.
  Når du håndterer et stort antall DOM-noder på siden din, vær ekstra forsiktig med JavaScript. document.getElementsByTagName('div'); kan laste et stort antall DOM-noder som øker minnebruken.
• Unngå kompliserte CSS-deklarasjoner.
  Når du håndterer et stort antall DOM-noder på siden din, vær ekstra forsiktig med kompliserte CSS-deklarasjoner. div:last-child; må sjekke last-child-statusen for hver div på siden din.