Teknik SEO’da Etkili DOM İyileştirme Rehberi

Site hızı ile alakalı geliştirmelere hakim olan herkesin sıkça duyduğu “DOM odaklı iyileştirmeler” doğru bir şekilde uygulandığında fazlasıyla iyi geri dönüşlere sahip olmanızı sağlayabilir. SEO araçlarından aldığınız “Aşırı büyük bir DOM boyutundan kaçının”, “DOM Yükünü azaltın” gibi geri bildirimlerin nasıl çözümlendirilebileceğini bu yazımda sizlere dile getireceğim. Haydi kısa bir tanımla işe koyulalım.

DOM Nedir?

Bir web sayfası tarayıcıda açıldığında, HTML kodları belirli bir mantık çerçevesinde katman katman düzenlenerek bir yapı haline getirilir. Bu düzen, sayfanın iskeletini oluşturan DOM’dur. Arama motorları, sayfanızdaki verileri çözümlerken bu iskeleti referans alır. Ancak DOM’un fazla karmaşık, şişkin veya yavaş işlemesi, Google botlarının sayfanızı verimli şekilde taramasını engelleyebilir. SEO dünyasında yükleme süresinin artması ve tarama bütçesinin verimsiz kullanılması gibi problemler de birleştiğinde, arama sıralamalarınız olumsuz etkilenebilir ve organik trafikte kayıplar yaşayabilirsiniz.

Aşırı DOM Yükü Sayfa Hızını Nasıl Etkiler?

Aşırı DOM boyutu uyarısı Lighthouse metriklerini ve bu metrikleri ele alan diğer sonuçları doğrudan olumsuz etkiler. Örneğin yüksek bir dom boyutu tarayıcının bir web sayfasını incelemesini, analiz etmesini, taramasını nasıl nitelendirirseniz nitelendirin gereksiz yere karmaşık hale getirir, işin sonunda kullanıcı sayfayı açmaya çalıştığında yavaş çalıştığını düşündüğü bir web sayfasıyla karşılaşır ve kötü bir sayfa deneyimi ile karşı karşıya kaldığı için yüksek ihtimalle o sayfadan ayrılır. Özetle, gereksiz <div> katmanları ve derin DOM yapıları, sayfanın hem yüklenme hızını hem de etkileşim hızını düşürür. Hafif, temiz ve mantıklı bir DOM yapısı hem tarayıcıya nefes aldırır hem de kullanıcıya harika bir deneyim sunar.

DOM Boyutu Nasıl Azaltılır?

Sayfalardaki kodlama yapısı,düzeni,section kullanımları, HTML elementi sayısı ve bu elementlerin ne kadar derin olduğu yüklenme süresini doğrudan tetikleyen bir unsurlardır. Bu unsurların sorunlu olması DOM nedir kısmında anlattığım üzere Ligthouse yada Gtmetrix gibi SEO odaklı araçlarda "Avoid an excessive DOM size" (Aşırı DOM boyutundan kaçının) gibi uyarılar almanıza sebep olur. Tarayıcılar ve Google botları için her zaman temiz ve düzenli bir kod yapısı kullanmalıyız.

Yukarıda dom yükünü artıracak örnekte tarayıcı tek bir ürün kartını oluşturmak için 10’dan fazla düğümü hesaplamak zorunda. Eğer ki sayfanızda bu ürün kartından 50 tane varsa DOM boyutu katlanarak büyür.

Bu örnekte ise ürün kartı sonucu sadece 4 düğümde elde ediliyor. Aslında her iki kod yapısı da aynı şeyi hedefliyor ancak birisi karman çorman olmak yerine direkt olarak tarayıcının hızlı bir şekilde ürün kartını taramasını sağlıyor. Bu yaklaşım performans odaklı sitelerde INP (Interaction to Next Paint) ve LCP (Largest Contentful Paint) değerlerini iyileştirmenin en etkili yoludur. CSS'in gücünü her zaman kullanın, HTML'i sadece bir iskelet oluşturmak için kendinize saklayın.

Hızlı Web Siteleri İçin JS ve CSS İyileştirme Teknikleri

Çok klasik ve her yerde gördüğünüz bir konu başlığı dimi 😀 ancak DOM yüküne değiniyorsak bu konudan bahsetmemiz elzem durumda. Peki bu her yerde duyduğunuz, gördüğünüz Javascript ve CSS nasıl optimize ediliyor? yada optimize etmesi gereken kişiler nasıl yönlendirilmeli hadi birazda buna değinelim. Hangi tarayıcı kullanırsanız kullanın tarayıcı tarafından bir HTML dosyası okunurken CSS ve JS dosyasıyla karşılaşıldığında DOM oluşturma süreci durur, dosya indirilip arka planda işlenilir burada bir duraksama olur bu duraksama süreci render-blocking olarak bilinir. Kısacası bu duraksama sürecinde sayfanızın kullanıcıya gözükme süreci gecikir.

bu render blocking durumunu en aza indirmek yada ortadan kadırabilmek için sayfanızın ilk açılışında önemli olmayan JS kodları içerek eklentileri yada dosyaları erteleyerek kullanıcıya daha hızlı bir açılış sayfası sunabilirsiniz. Yukarıda “DOM Boyutu Nasıl Azaltılır” başlığında temiz kod yapısına değinmiştim şimdi ise farklı bir trick ile işinizi JS tarafında kolaylaştıracak bir detaya değineceğim “defer” defer niteliği tarayıcıya erteleme emri veren sen arkaplanda yüklenmeye devam et burada ben varım diyen bir niteliktir. Bunu bir örnekle anlattığımda tüm taşları yerine oturtacaksınız

Bu örnekte gördüğünüz gibi “app.js” dosyası tarayıcı tarafından hemen çalıştırılmak istenecek. Yani sayfa taranırken tarayıcı app.js satırına geldiğinde scripti indirip anında çalıştırmaya başlayacak. Bu da render-blocking etkisi oluşturacak; tarayıcı, script yüklenip çalıştırılana kadar sayfanın geri kalanını işleyemeyecek ve bu sırada sayfa kısa bir süreliğine duraksayacak.

Bu örnekte ise “app.js” dosyası defer ile çağrılıyor. Bu da tarayıcıya, Bu scripti indir ama sayfayı engellemeden, HTML tamamen tarandıktan sonra çalıştır demek oluyor. Yani tarayıcı hem sayfayı render etmeye devam ediyor hem de arka planda scripti indiriyor. Sonuç olarak render-blocking oluşmuyor ve sayfa kullanıcıya çok daha hızlı bir şekilde görünür hâle geliyor.

Kod Etiketlerinin Doğru Kullanımı

HTML ve HTML5 odaklı kullanılan çoğu etiket arama motorlarına sayfada ne yaptığınızın ipucunu önden verir. Yaptığımız her şeyi bir <div> içerisine sığdırmak yerine, içeriği anlamlı kılacak etiketler kullanmanız önemlidir. Hadi bunuda anlamlı anlamsız olarak örneklendirelim;

bu örnekte kullanılan <div> ordusu aslında hiçbir anlam taşımıyor ve sayfanın semantik yapısına hiçbir katkısı yok. Bu gereksiz oluşturulan <div> katanları DOM’u gereğinden fazla derinleştiriyor buda tarayıcının açılış sayfasını parse etmesini durduk yere uzatıyor. Sonuç olarak Google Lighthouse bu tür yapılarla karşılaştığında ise “Avoid large DOM depth” uyarısı veriyor. Aynı içerik aslında sadece tek bir kapsayıcı ile direkt olarak çözülebilirdi.

Data Attributes Öğeleri ve DOM Arasındaki İlişki

data-* öğeleri (ya da data attribute’lar), HTML içinde bir elemente ek bilgi taşımak için kullanılan özel niteliklerdir. Buda onları JavaScript’e bilgi ve veri aktarmak için oldukça kullanışlı yapar. Bu nitelikler sayesinde JavaScriptler bilgilere kolayca erişebilir ve DOM üzerinden veri taşıma yolunu oldukça esnekleştirir. Ancak bu nitelikler kullanılırken dikkat edilmesi gereken çok ama çok önemli bir nokta mevcut, data-* içine gereksiz seviyede büyük veri gömmek HTML boyutunu bir balon gibi şişirir buda DOM’un parse edilme süresini anlamsız şekilde uzatır. Özellikle video yada yüzlerce bileşen içeren sayfalarda bu durum performansı ciddi şekilde etkileyebilir. Her başlığı somutlaştırdık bunuda bir örnekle anlatalım.

Herhangi video sayfasını tasaraladığımızı varsayalım aşağıda görmüş olduğunuz örnekte her video kartı, data-video niteliklerinin içine devasa bir JSON gömüyor:

buradaki sorunları tek tek ele alalım;

DOM her video kartında kilobaytlarca veri taşımak zorunda kalıyor.
Sayfa başında 20–30 kart varsa HTML dosyası gereksiz şekilde büyüyor.
Tarayıcı her bir data-video içeriğini okumaya çalıştığı için parse süresi uzuyor.
Lighthouse “Avoid large DOM size” ve “Avoid large payloads” uyarısı verebiliyor.

Data attribute’lar, DOM üzerinden minimal veri geciktirmeyi amaçlar. Büyük JSON’ları HTML içerisinde saklamak yerine sadece bir ID gibi küçük bir referansı hafızaya atmalı ve diğer verileri gerekirse API ile çekmeliyiz. Örnek vermek gerekirse HTML ve JS kısmı tam olarak aşağıda ki gibi olmalı:

buradaki yaklaşım sayesinde DOM kuş gibi hafif şekilde çalışacak ve tarayıcının parse süresi aşırı derecede kısalacak. Çünkü HTML dosyası artık gereksiz JSON bloklarını barındırmıyor hem dosya boyutu azalıyor hem de tarayıcı daha az iş yapmak zorunda kalıyor. Doğal olarak INP ve LCP değerleriniz fazlasıyla iyileşiyor, böylece data-* attribute, asıl amacı olan küçük ve anlamlı veriyi DOM içinde taşımak için doğru şekilde kullanılmış oluyor.

DOM’u temizlemek, sayfanı gereksiz yüklerden arındırmak demek. Artık tarayıcı daha hızlı çalışıyor, kullanıcı beklemiyor ve sen de sayfanın performansını görüp içten bir “güzel iş” diyebiliyorsun. Küçük ama etkili bu iyileştirmeler, sayfanın hem hızını hem kullanıcı deneyimini yükseltiyor. DOM’u hafifletmek, SEO’da fark yaratan küçük ama önemli bir adım ve sayfan bu sayede hem güçlü hem de çevik hale geliyor.

Diğer yazılarımda görüşmek üzere 👋👋