Aşırı Büyük DOM Boyutu Nedir?
DOM(Document Object Model) HTML etiketlerinin ağaç yapısının genel adıdır. Sayfa hızına etkisi, sayfa oluşturulurken(render) ne kadar kompleks HTML yapınız olursa o kadar sayfanızın yavaşlayacağı yönündedir.
Lighthouse'a göre DOM yapısının kompleksliğinin 3 ölçü birimi var. Bu ölçü birimlerinin referans noktalarıyla birlikte vermek gerekirse;
- Toplam etiket sayısı 1500'den az olmalıdır
- Maksimum etiket derinliği 32'den az olmalıdır
- Maksimum alt etiketi 60'dan az olmalıdır
Yukarıdaki örnek toplam etiket sayısı olarak kötü, maksimum etiket derinliği olarak iyi ancak maksimum etiket derinliği olarak kötüdür.
DOM öğeleriyle ilgili optimizasyon tamamen frontend paydaşının sorumluluğundadır. Sayfanın kodları ilk oluşturulurken gelişigüzel ya da kafaya göre belirlenecek her etiketin proje tamamlandıktan sonra bir bedeli vardır. Bu sebeple tüm frontend geliştiricileri bir dakikalık saygı duruşuna ve gözünü açmaya davet ediyoruz.
DOM'unuzun şişmesinin sayfa performasını kötü etkilediği noktalar;
- Fazla sayıda düğüme(etikete) sahip sayfalar yüksek boyutta olacağı için network yoğunluğu ve yükleme zorluğu yaşayacaklardır. Böylece TTFB'yi yükseltir.
- Yüklenen düğümler çalışma zamanında oluşturulurken(render) pozisyonlarını, stillerini oluşturmak zaman alacaktır. Böylece FCP'yi yükseltir.
- Düğümlerin sayısı arttıkça javascript manipülasyonları ile gerekli yük hafızaya(memory) biniyor. Bu da TFT'yi arttırıyor.
Çok basit bir örnek vererek DOM iyileştirmesini anlatmak gerekirse somutlaştırmak gerekirse, aşağıdaki örnekte hem DOM sayısı hem de derinlik azalmış oluyor.
<div id="nav-element">
<ul>
bunu yapmak yerine
</ul>
</div>
<ul id="nav-element">
bunu yapmak gerekiyor
</ul>
DOM boyutunu düşürebilmek için en çok tavsiye edeceğimiz iki nokta lazy load ve sayfalama kullanımıdır. Listeleme sayfalarındaki kart yapıları çok fazla DOM içerdiği için infinite scroll ya da sayfalama önerilir. Sayfalamadaki öğe sayısına karar verirken mutlaka DOM ölçüsü değerlendirme kriteri olmalıdır. Genelde sayfalamadaki ürün sayısına karar verilirken düşünülen süre 15-20 saniyedir ancak DOM boyutunu düşünerek bu kısım aslında frontend paydaşı tarafında hesaplanmalıdır.
Çok basit çözümlerden biri de sayfada görünmeyen öğelerin CSS ile gizlenmeksizin hiç HTML'e eklenmemesidir. Öğe bir şekilde gösterilmek istenirse sonradan çağırılarak kullanıcıya gösterilir. CSS ile öğe saklamanın DOM'u büyüttüğünün farkında olmalısınız.
Kaynaklar