DOM (Belge Nesne Modeli) HTML etiketlerinin ağaç yapısının genel adıdır. Sayfa hızı üzerindeki etkisi öyledir ki, sayfa oluşturma sırasında HTML yapınız ne kadar karmaşıksa sayfanız o kadar yavaş olur.

Lighthouse'a göre işin karmaşıklığı DOM yapısı üç metrik kullanılarak ölçülür. Bu metriklere referans noktalarını sağlamak için:

  • Toplam etiket sayısı şu şekilde olmalıdır: 1500 daha ucuz
  • Maksimum etiket derinliği şu şekilde olmalıdır: 32 daha ucuz
  • Maksimum sayıda alt etiket olmalıdır 60 daha ucuz

Yukarıdaki örnekte toplam etiket sayısı zayıf, maksimum etiket derinliği iyi ancak maksimum alt etiket sayısı zayıf.

DOM öğelerini optimize etmek tamamen ön uç paydaşın sorumluluğundadır. Sayfa kodu ilk oluşturulduğunda rastgele veya keyfi olarak seçilen her etiketin, proje tamamlandıktan sonra bir maliyeti vardır. Bu nedenle tüm frontend geliştiricilerini bir anlık sessizliğe ve gözlerini açmaya davet ediyoruz.

Şişirilmiş bir DOM'un sayfa performansını olumsuz etkilediği noktalar şunlardır:

  • Çok sayıda düğüme (etikete) sahip sayfalarda karşılaşılacak Büyük boyutlarından dolayı ağ tıkanıklığı ve yükleme zorluğu, böylece TTFB'yi (İlk Bayta Kadar Geçen Süre) artırır.
  • Oluşturulacak yüklü düğümler oluşturuluyor pozisyonları ve tarzları zaman alırböylece FCP'yi (First Contentful Paint) artırır.
  • Düğüm sayısı arttıkça gerekli yük de artar. JavaScript manipülasyonları hafızayı zorluyor, TFT'yi (İnteraktif Süre) artırıyor.

DOM optimizasyonunu çok basit bir örnekle açıklamak için, DOM'un hem sayısının hem de derinliğinin azaltıldığı aşağıdakileri göz önünde bulundurun:

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

Bunu yapmak yerine:

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

Bunu yapmak gerekir: DOM boyutunu küçültmek için en çok önerilen iki yöntem tembel yükleme ve sayfalandırmadır. Listeleme sayfalarındaki kart yapıları çok fazla DOM içerdiğinden sonsuz kaydırma veya sayfalandırma önerilir. Sayfalandırmada öğe sayısına karar verirken mutlaka DOM ölçüm kriterleri dikkate alınmalıdır. Genellikle dikkate alınan zaman sayfalandırmadaki ürün sayısı 15-20 saniyedir, ancak bu kısım aslında DOM boyutu dikkate alınarak ön uç paydaş tarafında hesaplanmalıdır.

Çok basit çözümlerden biri öğe eklememek CSS ile gizlenmeden sayfada HTML'de görünmeyenler. Bir öğenin görüntülenmesi gerekiyorsa daha sonra çağrılmalı ve kullanıcıya gösterilmelidir. CSS ile öğeleri gizlemenin DOM'u büyüttüğünü bilmelisiniz.

kaynaklar: