Çok büyük DOM: binlerce HTML öğesi sayfayı nasıl yavaşlatır?

PageSpeed Insights “Aşırı büyük DOM boyutundan kaçının” diyor ve sayfanızda 4.000'den fazla öğe var. Kullanıcı bunu doğrudan görmez, ama her tıklamada ve kaydırmada sayfanın biraz daha ağır hareket ettiğini hisseder.

KTYAPTECH SEO Analyzer bu sorunu CONTENT-EXCESSIVE-DOM-SIZE-001 koduyla, “Çok büyük DOM” başlığı altında ve orta önem derecesiyle raporlar (İçerik). Bu rehber, bulgunun ne anlama geldiğini, neden önemli olduğunu ve adım adım nasıl düzeltileceğini anlatıyor.

Çok büyük DOM nedir?

DOM (Document Object Model), tarayıcının HTML'den oluşturduğu öğe ağacıdır. Öğe sayısı, ağacın derinliği ve tek bir öğenin çocuk sayısı arttıkça tarayıcının stil hesaplama, düzen (layout) ve yeniden çizim işleri ağırlaşır.

SEO Analyzer, öğe sayısı belirlenen eşiği aştığında bu bulguyu verir.

Neden önemli? SEO ve kullanıcı deneyimine etkisi

Büyük DOM, özellikle orta ve düşük seviye telefonlarda etkileşim gecikmesini (INP) artırır, bellek tüketimini yükseltir ve sayfanın ilk render süresini uzatır.

JavaScript'in DOM'u sorgulaması ve güncellemesi de yavaşlar; bu, arayüzün takılmasına neden olur.

Sorun nasıl tespit edilir?

• SEO Analyzer raporundaki “Çok büyük DOM” bulgusunda öğe sayısını görün.
• Lighthouse raporunda DOM boyutu denetiminde en çok çocuğa sahip öğeyi ve en derin yolu inceleyin.
• Konsolda document.querySelectorAll('*').length ile toplam öğe sayısını ölçün.

Adım adım çözüm

1. DOM'u en çok büyüten bölümleri belirleyin: menüler, listeler, kaydırıcılar, gizli içerikler.
2. Uzun listeleri sayfalayın veya yalnızca ekrandaki öğeleri render eden sanallaştırma kullanın.
3. Açılmayana kadar görünmeyen bileşenleri (mega menü alt katmanları, modallar, sekmeler) ihtiyaç duyulduğunda oluşturun.
4. Gereksiz iç içe sarmalayıcı öğeleri kaldırın; CSS Grid ve Flexbox çoğu sarmalayıcı ihtiyacını ortadan kaldırır.
5. Aynı içeriği mobil ve masaüstü için iki kez render edip birini gizlemek yerine tek, duyarlı bir yapı kullanın.
6. Ekran dışındaki büyük bölümler için CSS content-visibility: auto özelliğini değerlendirin.

Mobil ve masaüstü için çift içerik

Birçok tema menüyü, başlığı veya ürün listesini bir kez mobil, bir kez masaüstü için render eder ve CSS ile birini gizler. Bu DOM'u ikiye katlar; ayrıca Google'ın mobil öncelikli dizine ekleme sırasında gizli içeriği nasıl değerlendireceği konusunda karışıklık yaratır.

Sık yapılan hatalar

• Mobil ve masaüstü için aynı bileşeni iki kez render etmek.
• Tüm liste öğelerini tek seferde yüklemek.
• Sayfa oluşturucu (page builder) eklentilerinin ürettiği derin sarmalayıcıları görmezden gelmek.

Düzeltmeyi nasıl doğrularsınız?

• Öğe sayısını yeniden ölçün.
• Lighthouse'ta TBT ve INP ile ilgili iyileşmeyi kontrol edin.
• SEO Analyzer'ı yeniden çalıştırın.

Sık sorulan sorular

DOM boyutu için hedef nedir?

Lighthouse, yaklaşık 1.400 öğenin üzerini uyarı olarak işaretler. Kesin bir sınır değildir; ne kadar küçük, o kadar iyi.

DOM boyutu SEO'yu doğrudan etkiler mi?

Dolaylı olarak: sayfa deneyimini ve Core Web Vitals değerlerini etkiler.

Özet

Büyük DOM, etkileşimi ve render'ı yavaşlatır. Listeleri sayfalayın veya sanallaştırın, gizli bileşenleri ihtiyaç anında oluşturun, gereksiz sarmalayıcıları kaldırın ve içeriği iki kez render etmeyin.

Sitenizde bu ve benzeri sorunların olup olmadığını görmek için KTYAPTECH Ücretsiz SEO Analizi aracını kullanabilirsiniz: rapordaki her bulgunun yanında, sorunu anlatan çözüm rehberine giden bir bağlantı bulunur.