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.
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.
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.
Bir sayfa çeşitli nedenlerden dolayı büyük bir DOM boyutuna sahip olabilir. En yaygın olanlardan bazılarına bakalım:
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 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.
"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:
Ç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.
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.
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.
Ü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.
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.
Görsel içerik hızla web tasarımının temel direği haline geliyor; mevcut eğilimler, kullanıcıların çevrimiçi ortamlarda çekici görsel görüntüler tercihinin önümüzdeki aylarda artacağını gösteriyor. Sitenizde ilginç görsel görüntülere sahip olmak, kendinizi diğer dijital pazarlamacılardan ayırmanın en kolay yollarından biridir. Şirketiniz orijinal, yüksek kaliteli ürünler sunuyorsa, aynı zamanda yüksek kaliteli görsellere de sahip olmalıdır.
Hedef kitlenize yönelteceğiniz açık bir mesaja sahip bir video üretmek için sadece videoyu çekmek ve dağıtmak yetmez. Video üretebilmek için prodüksiyonun her aşamasında en iyi şekilde çalışmak gerekir. Peki video prodüksiyonunun aşamaları nelerdir? Bu yazımızda bundan bahsettik.
Dijital çağda, işletmelerin online varlık kazanması ve hedef kitlelerine organik olarak ulaşabilmesi için SEO (Search Engine Optimization) stratejileri önem taşımaktadır. SEO, arama motorlarında üst sıralarda yer almanızı sağlayarak potansiyel müşterilere daha kolay erişmenizi sağlar. SEO danışmanlığı ve SEO stratejilerini anlamak için öncelikle bazı terimleri anlamamız gerekiyor.
Aklınıza takılan herhangi bir soru için hemen bizimle iletişime geçebilirsiniz.
Mail Adresimiz
WhatsApp İletişim
