DOM (dokumenttiobjektimalli) on HTML-tunnisteiden puurakenteen yleinen nimi. Sen vaikutus sivun nopeuteen on sellainen, että mitä monimutkaisempi HTML-rakenne on sivun renderöinnin aikana, sitä hitaampi sivusi on.

Lighthousen mukaan monimutkaisuus DOM-rakennetta mitataan kolmella mittarilla. Voit tarjota näille mittareille niiden viitepisteet seuraavasti:

  • Tunnisteiden kokonaismäärän tulee olla vähemmän kuin 1500
  • Tunnisteen enimmäissyvyyden tulee olla vähemmän kuin 32
  • Alatason tunnisteiden enimmäismäärän tulee olla vähemmän kuin 60

Yllä olevassa esimerkissä tunnisteiden kokonaismäärä on huono, tagien enimmäissyvyys on hyvä, mutta alitunnisteiden enimmäismäärä on huono.

DOM-elementtien optimointi on täysin käyttöliittymän sidosryhmän vastuulla. Jokaisella satunnaisesti tai mielivaltaisesti valitulla tunnisteella, kun sivukoodia luodaan ensimmäisen kerran, on kustannukset projektin valmistuttua. Siksi kutsumme kaikki käyttöliittymäkehittäjät hetkeksi hiljaisuuteen ja avaamaan silmänsä.

Kohteita, joissa liioiteltu DOM vaikuttaa negatiivisesti sivun suorituskykyyn, ovat:

  • Sivut, joilla on suuri määrä solmuja (tunnisteita), kokevat verkon ruuhkat ja latausvaikeudet niiden suuren koon vuoksi, mikä lisää TTFB:tä (Time to First Byte).
  • Luodaan ladattuja solmuja heidän asemansa ja tyylinsä vievät aikaa, mikä lisää FCP:tä (First Contentful Paint).
  • Solmujen määrän kasvaessa tarvittava kuormitus JavaScript-manipulaatiot rasittavat muistia, lisää TFT:tä (Time to Interactive).

Havainnollistaaksesi DOM-optimointia hyvin yksinkertaisella esimerkillä, harkitse seuraavaa, jossa sekä DOM:n määrä että syvyys vähenevät:

<div id="nav-element">
 <ul>
 </ul>
</div>

Tämän sijaan:

<ul id="nav-element">
</ul>

Tämä on välttämätöntä: Kaksi suosituinta tapaa pienentää DOM-kokoa ovat laiska lataus ja sivutus. Koska listaussivujen korttirakenteet sisältävät paljon DOM:ia, suositellaan ääretöntä vierittämistä tai sivutusta. DOM-mittauskriteerit kannattaa ehdottomasti ottaa huomioon sivutusmäärää päätettäessä. Yleensä harkittu aika tuotteiden lukumäärä sivutuksella on 15-20 sekuntia, mutta tämä osa pitäisi itse asiassa laskea käyttöliittymän sidosryhmien puolelta DOM-koon huomioon ottaen.

Yksi hyvin yksinkertaisista ratkaisuista on olla lisäämättä elementtejä jotka eivät näy sivulla HTML:lle piilottamatta niitä CSS:llä. Jos elementti on näytettävä, se tulee kutsua myöhemmin ja näyttää käyttäjälle. Sinun tulee olla tietoinen siitä, että elementtien piilottaminen CSS:llä suurentaa DOM:ia.

Lähteet: