Web sitesi performansı, kullanıcı deneyimi ve SEO açısından giderek daha önemli hale geliyor. Sayfaların hızlı açılması kadar kullanıcı etkileşimlerine hızlı yanıt vermesi ve farklı cihazlarda sorunsuz çalışması da güçlü bir web deneyiminin temelini oluşturuyor.
Özellikle içerik ve fonksiyon açısından büyüyen web sitelerinde sayfa yapısının zamanla karmaşıklaşması performans sorunlarını beraberinde getirebiliyor. DOM Size da teknik performans analizlerinde JavaScript, Rendering, Main Thread ve Core Web Vitals ile birlikte değerlendirilmesi gereken konular arasında yer alıyor.
DOM Nedir?
DOM (Document Object Model), bir web sayfasındaki HTML belgesinin tarayıcı tarafından nesnelerden oluşan hiyerarşik bir yapıya dönüştürülmesini ifade eder.
Tarayıcı bir HTML sayfasını aldığında içerisindeki başlıkları, paragrafları, bağlantıları, görselleri, butonları, formları ve diğer öğeleri belirli bir yapı içerisinde yorumlar. Ortaya çıkan yapı genellikle DOM Tree (DOM Ağacı) olarak adlandırılır.
Basitleştirilmiş bir HTML yapısını düşünelim:
<body>
<main>
<h1>Ürünler</h1>
<div>
<p>Ürün açıklaması</p>
<button>Sepete Ekle</button>
</div>
</main>
</body>
Buradaki body, main, h1, div, p ve button gibi HTML öğeleri DOM ağacında farklı Node (Düğüm) noktaları oluşturur.
JavaScript de DOM üzerinden sayfadaki öğelere erişebilir, içerikleri değiştirebilir veya yeni elementler oluşturabilir. Dolayısıyla DOM, web sayfasının tarayıcı içerisindeki çalışma biçiminin temel parçalarından biridir.
DOM Size Nedir?
DOM Size, bir web sayfasında oluşturulan DOM yapısının büyüklüğünü ifade eder. Genellikle sayfadaki toplam DOM node sayısı, DOM ağacının derinliği ve belirli bir üst öğenin altında bulunan alt öğelerin yoğunluğu gibi unsurlar üzerinden değerlendirilir.
Basit bir web sayfasında birkaç yüz DOM elementi bulunabilirken karmaşık sayfalarda sayı binlere ulaşabilir.
Özellikle:
- Çok sayıda ürün kartı,
- Karmaşık navigasyon menüleri,
- Filtre alanları,
- Açılır pencereler,
- Slider yapıları,
- Tekrarlanan HTML blokları,
- Üçüncü taraf widget’lar DOM boyutunun büyümesine neden olabilir.
DOM Tree Nasıl Çalışır?
DOM yapısı hiyerarşik şekilde çalışır. Bir element başka bir elementin içerisinde yer alabilir ve böylece Parent-Child Relationship olarak ifade edilen üst-alt öğe ilişkileri oluşur.
Örneğin:
HTML
└── Body
└── Main
├── Heading
└── Product List
├── Product
├── Product
└── Product
Ürün sayısı ve her ürünün içerisindeki HTML öğeleri arttıkça DOM ağacı da büyür.
Örneğin tek bir ürün kartının 20 DOM node’undan oluştuğunu ve kategori sayfasında 100 ürünün aynı anda oluşturulduğunu düşünelim. Yalnızca ürün kartları yaklaşık 2.000 node oluşturabilir.
Navigasyon, footer, filtreler ve diğer bileşenler eklendiğinde toplam DOM büyüklüğü daha da artabilir.
DOM Size Site Performansını Nasıl Etkiler?
Büyük bir DOM her durumda web sitesinin yavaş olduğu anlamına gelmez. Performans cihaz, JavaScript kullanımı, CSS yapısı, tarayıcı ve diğer teknik faktörlerle birlikte değerlendirilmelidir.
Bununla birlikte gereksiz ölçüde büyük ve karmaşık DOM yapıları tarayıcının gerçekleştirdiği bazı işlemlerin maliyetini artırabilir.
Rendering Süreci
Tarayıcı sayfayı ekranda gösterebilmek için HTML ve CSS üzerinde çeşitli işlemler gerçekleştirir. DOM büyüdükçe tarayıcının üzerinde çalışması gereken yapı da genişler.
Özellikle karmaşık CSS ve yoğun JavaScript kullanımıyla birleştiğinde büyük DOM yapıları Rendering performansı üzerinde ek yük oluşturabilir.
JavaScript İşlemleri
JavaScript sıklıkla DOM içerisindeki elementlere erişir, yeni elementler ekler veya mevcut yapıyı değiştirir.
DOM çok büyük olduğunda belirli JavaScript işlemlerinin maliyeti artabilir. Özellikle sık gerçekleştirilen DOM manipülasyonları Main Thread üzerindeki iş yükünü yükseltebilir.
Stil Hesaplamaları
Tarayıcı, hangi CSS kurallarının hangi elementlere uygulanacağını hesaplar. Çok sayıda element ve karmaşık seçiciler bulunduğunda Style Calculation süreçleri daha maliyetli hale gelebilir.
DOM üzerinde değişiklik gerçekleştiğinde tarayıcının bazı stilleri yeniden hesaplaması gerekebilir.
Bellek Kullanımı
Her DOM node’u tarayıcı açısından belirli bir kaynak kullanır. Binlerce element içeren karmaşık sayfalar özellikle düşük donanımlı mobil cihazlarda daha fazla bellek tüketebilir.
Bu nedenle masaüstünde sorunsuz görünen bir sayfanın daha sınırlı cihazlarda aynı performansı göstermeyebileceğini göz önünde bulundurmak gerekir.
DOM Size SEO’yu Etkiler mi?
DOM Size doğrudan bir SEO sıralama faktörü olarak düşünülmemelidir. Google’ın yalnızca DOM node sayısına bakarak sayfaları daha yüksek veya daha düşük sıraladığı şeklinde bir yaklaşım doğru değildir.
SEO açısından asıl konu, büyük DOM yapısının web performansı ve kullanıcı deneyimi üzerinde oluşturabileceği sonuçlardır.
Özellikle gereksiz HTML yapıları, yoğun JavaScript ve yavaş render süreçleri teknik SEO çalışmalarında değerlendirilmesi gereken alanlardır.
Bu nedenle DOM Size’ı tek başına bir SEO metriği yerine Technical SEO, Page Speed, rendering ve kullanıcı deneyimiyle ilişkili teknik bir performans göstergesi olarak ele almak daha doğru olur.
DOM Size Nasıl Ölçülür?
Bir web sayfasının DOM yapısını incelemek için farklı geliştirici ve performans araçlarından yararlanılabilir.
Chrome DevTools
Google Chrome içerisindeki Chrome DevTools, sayfanın DOM yapısını detaylı şekilde incelemeyi sağlar.
Elements paneli üzerinden HTML elementlerinin nasıl yapılandığı görülebilir. Performance araçlarıyla da sayfanın çalışma sürecindeki render, layout ve JavaScript işlemleri daha detaylı analiz edilebilir.
Lighthouse
Lighthouse, web sayfalarının performans ve teknik yapılarını değerlendirmek için kullanılan araçlardan biridir. Performans analizlerinde aşırı büyük DOM yapılarıyla ilişkili teşhis ve geliştirme önerileriyle karşılaşılabilir.
PageSpeed Insights
Google PageSpeed Insights, bir sayfanın hem laboratuvar hem de mevcut olduğunda gerçek kullanıcı verilerini incelemek için kullanılabilir.
DOM kaynaklı performans problemleri diğer JavaScript, render ve main thread sorunlarıyla birlikte değerlendirilebilir.
E-Ticaret Sitelerinde DOM Size Neden Önemlidir?
E-ticaret siteleri DOM açısından en hızlı karmaşıklaşabilen yapılardan biridir. Bir PLP üzerinde ürün kartlarının yanı sıra filtreler, sıralama seçenekleri, navigasyon, kampanya alanları ve kişiselleştirilmiş bileşenler bulunabilir.
Her ürün kartının içerisinde:
- Ürün görseli,
- Marka,
- Ürün adı,
- Fiyat,
- İndirim bilgisi,
- Puanlama,
- Favori butonu,
- Kampanya etiketi gibi birçok element yer alabilir.
Ürün sayısı arttıkça aynı HTML yapısı tekrar tekrar oluşturulur. Dolayısıyla PLP optimizasyonu yapılırken yalnızca görsel boyutlarına veya API hızına değil oluşturulan DOM yapısına da bakmak gerekir.