DOM Boyutu Hatası Nasıl Çözülür

DOM Boyutu Hatası Nasıl Çözülür

Bu makaleyi okuyorsanız, Google Lighthouse'dan ya da bir SEO tool'dan gelen 'Avoid an excessive DOM size' uyarısıyla karşılaşmışsınız demektir. Web sayfanızda çok fazla DOM düğümü veya HTML etiketi varsa ya da bu node(bir HTML belgesinde bulunan her şey bir node olarak tanımlanır.) veya etiketler çok derin bir şekilde iç içe geçmişse web sayfanızın DOM boyutu büyük demektir.

Bu durum, jerky scrolling ve sayfa yükleme süreleri gibi site performansı sorunlarına yol açabilir. Öte yandan, optimize edilmiş bir DOM boyutu daha iyi bir kullanıcı deneyimi sunar. Dom boyutunu optimize etmek SEO puanınızı arttırarak dönüşümlerin artmasını sağlar.

Web sitenize yüzeysel CSS3 animasyonları veya JavaScript widget'ları eklediyseniz, büyük bir DOM boyutunun etkilerini yaşıyor olabilirsiniz.

E-ticaret mağazası de dahil olmak üzere web sitesi sahiplerinin, DOM boyutunu bir sıralama sinyali olarak kesinlikle hesaba katacağı için sitelerini Google Sayfa Deneyimi güncellemesine uygun hale getirmesi gerekiyor.

Bu yazıda, DOM'un ne olduğuna bir göz atacak ve sitenizin kullanıcı deneyimini nasıl etkileyebileceğini açıklayacağız. Bu arada, site sayfalarınızı daha iyi performans için optimize etmenize yardımcı olacak bazı uygulanabilir ipuçlarını da paylaşacağız.

DOM Nedir?

Tarayıcınız bir web sayfasını her yüklediğinde DOM (Document Object Model) adı verilen nesnelerden oluşan bir ağaç yapısı oluşturur. DOM, HTML'nizdeki nesnelerin bir ağaç diyagramıdır. Body veya h1 gibi her HTML öğesini kendi node(düğüm) ile gösterir.

HTML DOM Şeması

DOM, birbirlerine bağlı olan veya olmayan farklı nesnelerin hiyerarşik yapısını temsil eder. Daha önce de belirtildiği gibi, web sayfasının HTML yapısını bir dizi etiketten oluşan bir ağaç olarak görüntüler. Web tarayıcınız bir sayfayı görüntülemek için hazırlamaya başladığında, HTML yapısına göre tüm sayfa öğelerinin bir nesne ağacı diyagramını oluşturur. Sonuç olarak, bir HTML dosyası aldığında, bunu DOM veya DOM ağacı adı verilen ağaç yapılı bir forma dönüştürerek başlar. JavaScript kullanarak DOM'a erişebilir ve onu değiştirebilirsiniz.

İşte DOM ile ilgili bazı anahtar terimler:

  • Nodes: DOM'daki her öğe veya etiket, DOM ağacında bir düğüm veya yaprak olarak adlandırılır.
  • Depth: DOM'un bir dalındaki öğe sayısına derinlik denir.
  • Child Element: Daha fazla dallanmayan son düğüme alt öğe denir.

Neden Aşırı DOM Boyutu Hatası Alıyorsunuz?

Bir sayfa çeşitli nedenlerden dolayı büyük bir DOM boyutuna sahip olabilir. En yaygın olanlardan bazılarına bakalım:

  • Kötü kodlanmış eklentiler veya temalar
  • JavaScript tarafından üretilen DOM düğümleri
  • Şişirilmiş HTML kodu üreten sayfa oluşturucular
  • WYSIWYG düzenleyicide kopyalanıp yapıştırılan metin

Bunun nedeni, şişirilmiş kodun HTML'nizin boyutunu artırarak web sayfanızın indirilmesi için gereken süreyi geciktirmesidir.

Aşırı DOM boyutu, oluşturma performansını olumsuz etkiler. Sonuç olarak, kullanıcının tarayıcısı ilk yüklemede ve kullanıcı veya bir komut dosyası web sayfanızla her etkileşime girdiğinde ek hesaplamalar yapacaktır. Web tarayıcıları ayrıca JavaScript aracılığıyla DOM'u işlerken daha fazla bellek tüketir.

Aşırı DOM Boyutundan Kaçınmak Ne Anlama Gelir?

Aşırı DOM boyutu, sayfanızda çok fazla DOM düğümü (veya HTML etiketi) olduğunda veya bunlar çok derin iç içe geçtiğinde meydana gelir. Bu, kullanıcının tarayıcısının web sayfanızı işlemek için ek güç tüketmesine neden olarak yavaş sayfa yüklenmesine ve düşük sayfa hızı puanlarına yol açar.

JavaScript ve CSS yürütmesinin genellikle yavaş olmasının nedenlerinden biri, tarayıcının daha fazla düğümü işlemek zorunda kalması ve bunun sonucunda sayfa oluşturmada gecikme yaşanmasıdır.

Aşırı DOM boyutu bellek kullanımının artmasına, sayfa işlemede gecikmeye ve tarama maaliyetlerinin artmasına neden olur. DOM nesnelerini değiştirmek, kullanıcınıza hangi sayfa öğelerini göstermek istediğiniz üzerinde kontrol sahibi olmanızı sağlar.

Basitçe söylemek gerekirse, DOM boyutunu küçük tutmak site performansını ve kullanıcı deneyimini iyileştirmenizi sağlar. Bu da Core Web Vitals puanınızı artıracaktır.

"Avoid an excessive DOM size" Hatası Nasıl Çözülür?

"Aşırı DOM boyutu uyarısından kaçının" sorununu çözmeden önce, bu sorunun kaynağını araştırarak nedenlerini belirlemelisiniz. Lighthouse'u kullanarak Maksimum DOM Derinliği ve Maksimum Alt Öğeleri öğrenebilirsiniz. Daha sonra, web tarayıcınızın DOM denetçisini kullanarak biraz arama yapmanız ve DOM'u kontrol etmeniz gerekecektir. Amacınız, aşırı sayıda DOM düğümünün nedenlerini bulmak olmalıdır.

İşte en yaygın dört hata:

Kötü kodlanmış eklentiler veya temalar kullanmayın

Çok sayıda DOM düğümü oluşturabilecek takvim eklentisi veya kaydırıcı gibi bir eklenti kullanıyor olabilirsiniz. Bu durumda, daha optimize edilmiş bir eklenti ile değiştirebilirsiniz. Benzer şekilde, kötü kodlanmış temalar ve şablonlar da web sitenizin performansını olumsuz etkileyebilir. Bunu, web sitenizdeki şişirilmiş kodlardan kurtularak, kolaylaştırılmış bir editör kullanarak veya şablonunuzun bazı kısımlarını değiştirerek düzeltebilirsiniz.

JavaScript tarafından oluşturulan DOM düğümlerini en aza indirin

Bazen JavaScript çok sayıda DOM düğümü oluşturabilir. Örneğin, bir sohbet widget'ı sayfanızın DOM'una aşırı sayıda DOM düğümü ekleyebilir. Bunu JavaScript dosyasından kurtularak veya optimize edilmiş bir widget kullanarak düzeltebilirsiniz.

Şişirilmiş HTML oluşturan sayfa oluşturucuları kullanmayın

WP Bakery ve Elementor gibi sayfa oluşturucular bazen aşırı sayıda DOM düğümü ile şişirilmiş kod üretebilir. Genellikle iş akışının ayrılmaz bir parçası olduklarından, bunları birlikte kaldırmayı zorlaştırır. Ancak, şişirilmiş koddan kurtularak ve iş akışınızı değiştirerek bu sorunu çözebilirsiniz. Elementor, DOM boyutunu artıran ek HTML etiketleri oluşturur. Elementor'un arkasındaki geliştiriciler, şişkinliği azaltmak için son zamanlarda DOM iyileştirmeleriyle adımlar attılar.

Düşük kaliteli temalar da DOM boyutunu doğrudan etkileyebilir. Bu nedenle performansı optimize edilmiş bir tema kullanmanızı öneririz.

Çoğu sayfa oluşturucu çok fazla div etiketi ekler. Kolaylaştırılmış çözümler kullanarak gereksiz öğeler eklemekten kaçınabilir ve sitenizin HTML yapısı üzerinde daha fazla kontrol sahibi olabilirsiniz. Benzer şekilde, HotJar gibi araçları kullanarak site kullanıcılarınızın ne kullandığını ve onlar için neyin işe yaradığını öğrenebilirsiniz. DOM boyutunu azaltmak için yakın bir analiz yapmak çok önemlidir.

CSS ile Öge Gizleme

Ürün sayfalarındaki sepete ekle düğmesi, derecelendirme düğmesi veya yazar bilgileri gibi bir sayfa oluşturucu veya tema tarafından eklenen öğelerin CSS ile gizlenmesini önermiyoruz.

Genellikle bu, aşağıdaki CSS kodu gibi bir şey kullanılarak yapılır:

.author-name {
display:none;
}


Bu yöntem faydalı değildir çünkü site kullanıcılarınıza HTML işaretlemesi ve CSS stilleri içeren gereksiz kodlar sunmaya devam ediyor olabilirsiniz.

Temanızın veya eklentilerinizin ayarlarına giderek bu öğeleri kaldırmanız mümkün olabilir. Alternatif olarak, bunları ilgili PHP kodundan da kaldırabilirsiniz. İstenmeyen öğeleri bir sayfadan tamamen kaldırmak daha iyidir, bu da özel bir WooCommerce kancası kullanılarak yapılabilir.

Sizin İçin

Diğer Blog Yazılarımız

İlginizi Çekebilir

ithinkso olarak sektördeki tecrübelerimizi sizinle paylaşmayı ve işletmenizin büyümesine yardımcı olacak stratejileri sunmayı amaçlıyoruz. Bizimle bu yolculuğa katıldığınız için teşekkür ederiz.

Yüksek Dönüşüm Sağlayan Görüntülü Reklamlar Nasıl Oluşturulur?

Ürünlerinizin ve hizmetlerinizin çevrimiçi reklamının yapılması söz konusu olduğunda, görüntülü reklamlar bunu yapmanın en iyi yollarından biridir. Ancak bunları yalnızca oluşturmak için oluşturmak istemezsiniz; sahip olduğunuz her görüntülü reklamın sizin için olabildiğince çok çalıştığından emin olmak istersiniz. Yüksek dönüşüm sağlayan görüntülü reklam oluşturmak için yazımıza bir göz atın.

En İyi 5 SEO Aracı

SEO dünyası, adeta karmaşık bir şehir gibidir, ve bu şehirde yol almak her zaman kolay değildir. Arama motorlarında üst sıralarda yer almak için çeşitli dolambaçlı yollar ve sırlarla dolu bu gizemli şehir, her web sitesi sahibinin keşfetmesi gereken bir yerdir. Neyse ki, size bu yolculukta rehberlik edecek ve para harcamadan organik trafik oluşturmanıza yardımcı olacak 2023'ün en iyi ve ücretsiz SEO araçları mevcut.

Web Tasarımında Görsel Etki

Kullanıcılarınıza profesyonellik ve sofistike bir hava iletmek istiyorsanız, web sitenizin iyi görünmesi gerektiği doğrudur. Bunun yanında sitenizin estetik cazibesini oluşturmak için kullandığınız öğeler, fark edebileceğinizden daha fazla psikolojik etkiye sahiptir. Aslında tasarımcıların renk, içerik ve görüntüler gibi farklı tasarım öğelerine erişme ve bunları kullanma şekli, web sitenize göz attıkları zaman kullanıcının ruh hali, tutumu ve deneyimi üzerinde büyük bir etkiye sahip olabilir.

Size Nasıl Yardımcı Olabiliriz?

Aklınıza takılan herhangi bir soru için hemen bizimle iletişime geçebilirsiniz.

İletişime Geç!

Mail Adresimiz

WhatsApp İletişim

shape