Undgå en overdreven DOM størrelse – Document Object Model
DOM størrelse er noget som ikke ret mange tænker over kan have en indflydelse på hastigheden. Men det har nu engang indflydelse på hjemmesidens hastighed, at DOM bliver for dyb og for stor.
DOM repræsenterer strukturen af et HTML dokument, hvilket er det en hjemmeside er bygget op af. Man kan sige at DOM gør de forskellige elementer på hjemmesiden, til objekter.
Hvad er DOM (Dokument Objekt Modellen)?
Document Object Model (DOM) er en programmeringsfalde, der repræsenterer strukturen af et HTML- eller XML-dokument. Det giver en platformuafhængig repræsentation af dokumentet, som kan manipuleres ved hjælp af forskellige programmeringssprog som JavaScript.
DOM organiserer dokumentets elementer i en træstruktur, hvor hver del af dokumentet er repræsenteret som en node. Disse noder kan være elementer, attributter, tekststykker osv. Hver node har forskellige egenskaber og metoder, der giver udvikleren mulighed for at ændre og manipulere dokumentets indhold, struktur og udseende.
DOM’en giver udviklere mulighed for at interagere med dokumentindholdet og opdatere det efter behov. Den tillader også adgang til og manipulation af CSS-regler, events og attributter til yderligere forbedring af brugeroplevelsen.
En af de vigtigste anvendelser af DOM er at tilføje dynamisk funktionalitet til websider. Ved hjælp af JavaScript eller andre programmeringssprog kan udviklere oprette interaktive elementer, validere formularer, ændre indholdet på siden og meget mere. DOM’en fungerer som broen mellem dokumentets struktur og programmeringssproget, hvilket gør det muligt at oprette dynamiske og responsive websider.
Et eksempel på DOM-manipulation kan være at tilføje et nyt element til et eksisterende HTML-dokument. Ved at oprette en ny node og tilføje den som et barn til det ønskede element i DOM’en kan udvikleren indsætte nyt indhold i dokumentet uden at genindlæse hele siden.
DOM’en er blevet en central del af webudvikling og er bredt understøttet af moderne browsere. Det giver udviklere mulighed for at oprette avancerede og interaktive websider ved hjælp af standardiserede metoder og funktioner.
Hvorfor skal man undgå overdreven DOM størrelse?
Jo det skal man fordi jo flere DOM elementer der er på en side, jo mere er der for browsere at tolke og læse igennem. Jo dybere en træstruktur der er, jo mere er der også at tage højde for og skulle beregne og tegne.
Prøv at forestille dig en ligning inden for matematikkens verden, jo mere avanceret den bliver, altså jo flere lag, jo sværere bliver den også at regne ud, og jo længere tid tager det at regne den ud og komme frem til et resultat.
På samme måde er det faktisk med DOM elementer/noder. Jo dybere og jo flere noder der er, jo svære bliver det og jo mere kræver det af brugerens enhed, at fortolke og beregne de dom noder.
Så også her gælder det at holde det så simpelt som muligt.
Bruger du WordPress og fx Elementor, så vil du opleve at Google slår ud på lige netop den del. Og det er fordi Elementor ikke holder det simpelt, det er ikke WordPress skyld, men Elementor. De der kender mig, vil vide at jeg er meget imod Elementor. Ja man kan selvfølgelig lave mange flotte hjemmesider med Elementor, men det kan man også på andre måder hvis bare man er smart i sin tankegang.
Hvordan fjerner man overdreven DOM-Størrelse?
En overdreven DOM størrelse kan have negative konsekvenser for både brugeroplevelsen og websitets ydeevne. Google anbefaler derfor at undgå en sådan situation, da det kan påvirke sidens indlæsningstid og interaktivitet. For at reducere DOM størrelsen er det vigtigt at fokusere på optimering af HTML-koden. Nedenstående er nogle professionelle teknikker og tips til at mindske DOM’ens størrelse:
- Fjern unødvendige HTML-elementer: Gennemgang af HTML-koden og identificering af elementer, der ikke bidrager væsentligt til websidens funktionalitet eller brugeroplevelse, er afgørende. Fjern eller erstat disse elementer for at reducere DOM’ens størrelse. Dette kan være en svær omgang, og reelt kræve at du ved noget om både HTML og CSS. For ofte ses div bokse inde i mange andre div bokse, fordi det tool man bruger, fx Elementor, Divi, Visual Composer, laver alt for mange divs inde i divs for at kunne style og lave det som de nu har tænkt det skulle laves. Så reelt er den rette vej, Ikke at bruge sådanne værktøjer, eller lærer at omskrive de plugins så du selv kan bestemme eksakt hvor meget DIV der sommer ind. Ret ofte kommer der noget der ligner 3-5 lag for at lave noget der reelt kun behøvede maks 2 lag.
- Brug CSS i stedet for inline-styling: Inline-styling tilføjer unødig vægt til DOM’en. Ved at flytte styling til eksterne CSS-filer kan man reducere kodeduplikation og gøre koden mere vedligeholdelsesvenlig samtidig med, at DOM’ens størrelse mindskes.
- Undgå dybt indlejrede DOM-strukturer: Hvis DOM-træet har mange niveauer af indlejrede elementer, kan det føre til en stor og kompleks DOM-struktur. Prøv at holde strukturen mere flad ved at undgå unødige niveauer af indlejring.
- Optimer JavaScript-kode: En tung JavaScript-eksekvering kan skabe og manipulere mange DOM-elementer, hvilket resulterer i en stor DOM-størrelse. Optimér JavaScript-koden ved at minimere unødvendige operationer og bruge mere effektive løsninger som DOM-caching og batchopdateringer.
- Udskyd indlæsning af ikke-kritiske ressourcer: Hvis ikke-kritiske ressourcer, som f.eks. billeder eller scripts, først indlæses, når de er synlige for brugeren, kan man forhindre DOM’ens unødvendige vækst. Brug teknikker som lazy loading eller asynkron indlæsning, hvor det er muligt.
- Brug virtuel DOM: Anvendelsen af virtuel DOM kan reducere den faktiske DOM-størrelse ved at gøre ændringer på et virtuelt træ og derefter opdatere den rigtige DOM på en mere effektiv måde.
- Husk at SVG kode, Billeder, Javascript etc også er en del af DOM, og hvornår det indlæses har indflydelse på hvornår dele af DOM loades.
