WordPress'te ‘Aşırı DOM boyutundan kaçının’ uyarısı, sayfanızın çok fazla HTML öğesine sahip olduğu ve bu da yavaşlamasına neden olduğu anlamına gelir.
Bunu düzeltmenin en iyi yolları, WP Rocket gibi bir performans eklentisi kullanmak, resimlerin ve galerilerin nasıl yüklendiğini optimize etmek ve hafif bir tema veya sayfa oluşturucu seçmektir.
Bu uyarı Google Lighthouse veya diğer hız test araçlarında görünebilir ve teknik duyulur. Ancak konsept basittir: web siteniz bir parça koleksiyonudur ve çok fazla parça bir tarayıcıyı bunaltabilir.
WPBeginner olarak, yüksek trafikli web sitelerimizi bu sorunu çözmek için optimize etmekle kalmadık, aynı zamanda sayısız kullanıcının site hızını iyileştirmesine de yardımcı olduk.
Bu makalede, sorunu çözmek ve WordPress performansınızı iyileştirmek için uzman yöntemlerimizden 11 tanesini ayrıntılı olarak açıklayacağız.
'Aşırı DOM Boyutundan Kaçının' Uyarısı Ne Anlama Geliyor?
'Aşırı DOM boyutundan kaçının' uyarısı, bir web sayfasının tarayıcının verimli bir şekilde işlemesi için çok fazla HTML öğesine sahip olduğunda Google PageSpeed Insights gibi hız test araçlarında görünür.
DOM, Document Object Model'in kısaltmasıdır. Web sayfanızdaki tüm nesneleri temsil eden ağaç benzeri bir yapıdır. Bir başlık, paragraf, resim veya düğme gibi her öğe, bu ağaç üzerinde bir 'düğüm'dür.
Bu düğümlerin toplam sayısı DOM boyutunu oluşturur. Bu sayı çok büyüdüğünde, tarayıcının sayfayı oluşturması daha fazla zaman ve kaynak gerektirir, bu da web sitenizi yavaşlatabilir.
Aşırı DOM Boyutu Web Sitesi Performansını Nasıl Etkiler?
Büyük bir DOM boyutu, WordPress web sitenizin performansını birkaç temel şekilde olumsuz etkiler. Metin ve görsellerden formlara ve menülere kadar bir sayfaya eklediğiniz her öğe, DOM düğümü sayısını artırır.
Bu karmaşıklığın aşağıdaki etkileri vardır:
- Daha Yavaş Sayfa Oluşturma: Bir tarayıcı, sayfayı görüntüleyebilmeden önce tüm DOM ağacını ayrıştırmalıdır. Daha büyük bir ağacın işlenmesi daha uzun sürer, bu da ziyaretçinin içeriğinizi görme süresini geciktirir.
- Artan Bellek Kullanımı: Karmaşık bir DOM yapısı, kullanıcının cihazından daha fazla bellek ve işlem gücü gerektirir. Bu, özellikle cep telefonlarında fark edilebilir.
- Kötü Kullanıcı Deneyimi: Bu performans düşüşleri daha yavaş yükleme sürelerine yol açar. Bu, ziyaretçileri hayal kırıklığına uğratabilir ve hatta yüklenmeden sitenizden ayrılmalarına neden olabilir.
- Olumsuz SEO Etkisi: Google gibi arama motorları sayfa hızını bir sıralama faktörü olarak kullanır. Yavaş yüklenen sayfalar WordPress SEO'nuza zarar verebilir ve web sitesi dönüşümlerini azaltabilir.
Google İçin Çok Fazla DOM Öğesi Kaç Tanedir?
Google Lighthouse gibi test araçları, aşırı DOM boyutunu işaretlemek için yalnızca tek bir sayı kullanmaz. Bunun yerine, üç özel kritere bakarlar:
- Toplam DOM Düğümleri: Sayfadaki toplam HTML öğesi (düğüm) sayısı 1.500'ü aşarsa bir uyarı tetiklenir. Uyarının en yaygın nedeni budur.
- Maksimum DOM Derinliği: Öğeler birbirinin içine çok derine yerleştirildiğinde bir uyarı tetiklenir. Lighthouse, yuvalama 32 seviyeden derine gittiğinde bir sayfayı işaretler.
- Maksimum Alt Öğe Sayısı: Tek bir üst öğenin doğrudan içinde 60'tan fazla alt öğesi varsa bir uyarı tetiklenir. Bu genellikle kötü kodlanmış mega menülerde veya galerilerde olur.
Birden çok kaydırıcıya, çok sayıda iç içe geçmiş bölüme sahip karmaşık düzenlere veya çok sayıda yerleştirilmiş öğeye sahip sayfaların bu sınırları aşma olasılığı daha yüksektir. Ancak, bu sorunu düzeltmek için tasarımınızdan ödün vermek zorunda değilsiniz.
Bunu çözmeniz için kapsamlı bir rehber hazırladık. WordPress DOM boyutunu küçültmenin ve performansı artırmanın 11 kanıtlanmış yolu:
- Bir WordPress Hız Optimizasyon Eklentisi Kullanın
- Tema ve Eklentilerinizi Kontrol Edin
- Optimize Edilmiş Bir Sayfa Oluşturucu Kullanın
- Resimlerinizi ve Videolarınızı Optimize Edin
- Lazy Loading Uygulayın
- Çok İçeriği Olan Yorumları veya Gönderileri Sayfalayın
- CSS ve JavaScript Dosyalarını Küçültün
- Oluşturmayı Engelleyen JavaScript ve CSS'yi Azaltın
- WordPress Önbelleğini Etkinleştirin
- Bir WordPress CDN'si kullanın
- WordPress Veritabanınızı Optimize Edin
Belirli bir optimizasyon yöntemi hakkında daha fazla bilgi edinmek için yukarıdaki hızlı bağlantıları kullanmaktan çekinmeyin.
1. Bir WordPress Hız Optimizasyonu Eklentisi Kullanın
İlk önerimiz, güçlü bir WordPress hız optimizasyon eklentisi kurmaktır. Bu eklentiler, web sitenizi daha hızlı hale getirmek için gereken teknik optimizasyonları ele alır.
Bu, eklenti arka planda çalışırken içeriğinizi yönetmeye ve oluşturmaya odaklanmanızı sağlar.
WPBeginner olarak, WP Rocket kullanıyor ve tavsiye ediyoruz. Önbellekleme, dosya optimizasyonu ve tembel yükleme yönetimi için kendi web sitelerimizde kullandık; bu konuda WPBeginner'da sayfa yükleme hızını nasıl artırdığımıza dair makalemizde daha fazla bilgi edinebilirsiniz.
WP Rocket öncelikli olarak bir önbellekleme eklentisi olarak bilinse de, özelliklerinin çoğu büyük bir DOM'un neden olduğu sorunları gidermeye yardımcı olur. Bunlar dosya optimizasyonu, tembel yükleme ve JavaScript'i ertelemeyi içerir.
Bu özellikleri makalenin ilerleyen bölümlerinde açıklayacağız. Daha fazla bilgi için tam WP Rocket incelememizi okuyabilir veya başlamak için kurulum kılavuzumuzu kullanabilirsiniz.
2. Tema ve Eklentilerinizi Kontrol Edin
WordPress eklentileri ve temaları WordPress web sitenize işlevsellik ve stil katarken, aşırı DOM boyutuna da katkıda bulunabilirler.
Kötü kodlanmış temalar ve eklentiler, sayfanızın yapısını şişiren gereksiz HTML öğeleri ekleyebilir. Benzer şekilde, kullanmadığınız ek özelliklere sahip eklentiler ve temalar hala kodlarını yükleyebilir ve DOM'u artırabilir.
Belirli bir eklentinin veya temanın suçlu olup olmadığını kontrol etmek için eklentileri tek tek devre dışı bırakabilir veya geçici olarak varsayılan bir WordPress temasına geçebilirsiniz. Her değişiklikten sonra, DOM boyutu uyarısının kaybolup kaybolmadığını görmek için bir hız testi çalıştırın.
Bu sorunu önlemek için, her zaman resmi WordPress dizini veya tanınmış geliştiriciler gibi saygın kaynaklardan tema ve eklenti seçin. Bu kaynaklar genellikle daha katı kodlama standartlarına sahiptir.
Güvenilir öneriler için, WordPress yazılımlarını test edip incelediğimiz WPBeginner Çözüm Merkezi'ne göz atın.
3. Optimize Edilmiş Bir Sayfa Oluşturucu Kullanın
Sayfa oluşturucular, kodlama yapmadan özel düzenler tasarlamak için mükemmel araçlardır, ancak bazıları aşırı DOM boyutuna katkıda bulunabilir. Stil ve düzen kontrolü için içeriğinizi genellikle fazladan HTML öğelerine sararlar.
Örneğin, kötü optimize edilmiş bir sayfa oluşturucu, tek bir düğmeyi hizalama ve stil verme için birden çok iç içe geçmiş <div> kapsayıcısına sarabilir. Bu kapsayıcıların her biri, toplam sayıyı hızla artıran DOM'a başka bir düğüm ekler.
Sayfa oluşturucunuzun sorun olduğunu düşünüyorsanız, onu bir hazırlık sitesinde devre dışı bırakarak ve DOM boyutunu tekrar kontrol ederek test edebilirsiniz. Tam Site Düzenleyici gibi yerleşik araçları kullanabilirsiniz, ancak bunlar esneklik açısından yetersiz kalabilir.
Esneklik ve performans arasında en iyi denge için, SeedProd gibi hıza duyarlı bir sayfa oluşturucu kullanmanızı öneririz. Testlerimizde, diğer popüler oluşturuculardan tutarlı bir şekilde daha iyi performans gösterdi.
Bunu Elementor vs. Divi vs. SeedProd analizimizde diğerleriyle nasıl karşılaştırıldığını görebilirsiniz.
WPForms ve Duplicator dahil olmak üzere birçok iş ortağı markamız web sitelerini oluşturmak için SeedProd'u kullanıyor.
4. Resimlerinizi ve Videolarınızı Optimize Edin
Görsellerin DOM boyutuyla nasıl ilişkili olduğunu açıklamak önemlidir. Bir görselin dosya boyutu (KB veya MB cinsinden) DOM düğümü sayısını etkilemez. Bir <img> etiketi, görsel dosyasının boyutu ne olursa olsun tek bir düğümdür.
Ancak, resimlerin görüntülenme şekli DOM boyutunu artırabilir. Bazı temalar ve galeri eklentileri, stil, ışık kutusu veya başlıklar için her resmi birden fazla <div> kapsayıcısına sarar. Bu ekstra sarmalayıcı öğeler, resmin kendisi değil, DOM sayısını artıran şeylerdir.
Görüntüleri sıkıştırarak optimize etmek sayfa hızı için kritik öneme sahipken, temiz kod üreten galeri eklentileri de seçmelisiniz. Optimole gibi bir eklenti, görüntü sıkıştırma ve tembel yükleme konusunda yardımcı olabilir.
Videolar için, bunları doğrudan WordPress'e yüklememenizi öneririz.
Bunun yerine, bunları YouTube veya Vimeo gibi hizmetlerde barındırın ve gömün. Bu, sunucunuzun yükünü azaltır ve DOM'unuzu daha temiz tutar.
5. Gecikmeli Yüklemeyi Kurun
Lazy loading (tembel yükleme), kullanıcıların görüntü alanına girmek üzereyken resimler ve videolar gibi kritik olmayan öğelerin yüklenmesini geciktiren bir tekniktir. Bu, tarayıcının sayfanın ilk, görünür kısmını çok daha hızlı oluşturmasını sağlar.
Her şeyi bir kerede yüklemeyerek, lazy loading tarayıcı için ilk işlem yükünü azaltır ve çok daha akıcı bir kullanıcı deneyimi yaratır.
Lazy loading ayarlamak, WP Rocket gibi bir eklentiyle kolaydır. WordPress kontrol panelinizde, Ayarlar » WP Rocket yolunu izleyin ve ‘Medya’ sekmesini açın. Burada, tek bir tıklamayla resimler, videolar ve iframe'ler için tembel yüklemeyi etkinleştirebilirsiniz.
Galeriler için, yerleşik tembel yüklemeye sahip, örneğin Envira Gallery gibi bir galeri eklentisi kullanmanızı öneririz.
Hatta yorumlar bölümünüzü yavaş yükleyebilirsiniz. Performansı daha da artırmak için Thrive Comments gibi bir eklenti kullanın.
6. Çok İçeriği Olan Yorumları veya Gönderileri Sayfalayın
Çok uzun gönderiler veya yorum bölümleri DOM boyutunu önemli ölçüde artırabilir ve yükleme sürelerini yavaşlatabilir. Sayfalama, bu içeriği birden çok küçük sayfaya bölerek bunu çözer.
Bu, içeriği hem tarayıcı hem de okuyucu için daha yönetilebilir hale getirir. WordPress düzenleyicisinde ‘Sayfa Sonu’ bloğunu ekleyerek uzun gönderileri kolayca bölebilirsiniz. Ayrıntılı talimatlar için, WordPress gönderilerini birden çok sayfaya bölme hakkındaki kılavuzumuza bakın.
Benzer şekilde, yorumlarınızı da sayfalara ayırabilirsiniz. WordPress yönetici alanınızda Ayarlar » Tartışma'ya gidin, ‘Yorumları sayfalara ayır’ kutusunu işaretleyin ve sayfa başına yorum sayısını ayarlayın.
WordPress'te yorumları sayfalama hakkında nasıl yorum sayfalayacağınızı öğrenmek için kılavuzumuzda daha fazlasını okuyabilirsiniz.
Performans sorunlarına yol açabileceğinden, sürekli olarak yeni öğeler ekleyen sonsuz kaydırmadan kaçınmanızı öneririz.
7. CSS ve JavaScript Dosyalarını Küçültün
Bu teknik doğrudan DOM düğümlerinin sayısını azaltmasa da, performansı önemli ölçüde artırır ve büyük bir DOM'un olumsuz etkisini azaltır.
Minifikasyon, CSS ve JavaScript dosyalarınızdaki yorumlar, boşluklar ve satır sonları gibi gereksiz karakterleri kaldırır. Bu, dosya boyutlarını küçülterek tarayıcının indirmesini ve işlemesini hızlandırır.
WP Rocket gibi bir eklenti bunu basitleştirir. Ayarlar » WP Rocket'a gidin, 'Dosya Optimizasyonu' sekmesine geçin ve CSS ve JavaScript dosyalarını küçültme özelliklerini etkinleştirin. Daha fazla ayrıntı için CSS ve JavaScript dosyalarını nasıl küçülteceğiniz hakkındaki kılavuzumuza bakın.
Küçültmeden önce sitenizin yedeğini oluşturmanızı öneririz. Nadir durumlarda, küçültme belirli temalar veya eklentilerle sorunlara neden olabilir.
8. Oluşturmayı Engelleyen JavaScript ve CSS'yi Azaltın
Bu, DOM düğümlerini doğrudan azaltmayan ancak dosyaların nasıl yüklendiğini değiştirerek algılanan performansı büyük ölçüde artıran başka bir tekniktir.
Bir tarayıcının sayfanızı yüklemesini bir resim boyamaya benzetin. Oluşturmayı engelleyen kaynaklar, tamamen yüklenene kadar tarayıcıyı web sayfasını boyamayı durdurmaya zorlar. Bunları ertelemek, ana içeriğin önce boyanmasını sağlar, böylece kullanıcı sitenizi daha hızlı görür.
WP Rocket bu sorunu gidermek için özelliklere sahiptir. Dosyaları birleştirerek HTTP isteklerini azaltabilir ve kritik olmayan JavaScript'in yüklenmesini erteleyebilir. Bu, arka plan betikleri yüklenmeyi bitirmemiş olsa bile kullanıcıların içeriğinizi daha hızlı görmesi anlamına gelir.
WordPress'te oluşturmayı engelleyen kaynakları düzeltme hakkındaki makalemizde daha fazla bilgi edinebilirsiniz: WordPress'te oluşturmayı engelleyen JavaScript ve CSS'yi düzeltme.
9. WordPress Önbelleğini Etkinleştirin
Önbellekleme doğrudan DOM düğümü sayısını azaltmasa da, sayfa yükleme sürelerini, özellikle geri dönen ziyaretçiler için önemli ölçüde hızlandırır. Bu, DOM'un çok daha hızlı yüklenmesini ve görüntülenmesini sağlar.
Önbellekleme, sitenizin statik bir sürümünü depolar. Bir kullanıcı tekrar ziyaret ettiğinde, tarayıcısı sayfayı sıfırdan yeniden oluşturmak yerine bu kaydedilmiş sürümü yükleyebilir, bu da çok daha hızlıdır. Bu aynı zamanda sunucunuzdaki yükü azaltır ve DOM'u daha hızlı işlemesi için onu serbest bırakır.
WP Rocket gibi bir eklentiyle önbelleğe alma kurulumu basittir; bu eklenti, etkinleştirme üzerine otomatik olarak en uygun önbelleğe alma ayarlarını etkinleştirir. Önbelleğe alma özelliklerini WP Rocket kurulum kılavuzumuzda daha fazla öğrenebilirsiniz.
10. Bir WordPress CDN Kullanın
Bir CDN (İçerik Dağıtım Ağı), doğrudan değiştirmeden büyük bir DOM'un etkilerini azaltmaya da yardımcı olur. CDN, web sitenizin statik dosyalarının (resimler, CSS, JavaScript) kopyalarını depolayan küresel bir sunucu ağıdır.
Bir kullanıcı sitenizi ziyaret ettiğinde, CDN bu dosyaları fiziksel konumuna en yakın sunucudan teslim eder. Bu, indirme sürelerini büyük ölçüde azaltır ve tarayıcının DOM'u çok daha hızlı işlemeye başlamasını sağlar.
WPBeginner'da Cloudflare'ın CDN'sini kullanıyoruz. Neden seçtiğimizi Sucuri'den Cloudflare'a geçiş hakkındaki yazımızda öğrenebilirsiniz.
Diğer seçenekler için en iyi WordPress CDN hizmetleri listemize göz atın.
11. WordPress Veritabanınızı Optimize Edin
Bu başka bir dolaylı optimizasyondur. Veritabanınız DOM'un bir parçası olmasa da, şişirilmiş bir veritabanı sunucunuzun yanıt süresini yavaşlatabilir. Bu gecikme, sitenizin yüklenmesinin daha uzun sürmesine neden olur, bu da büyük bir DOM'un daha da yavaş hissetmesine neden olabilir.
Zamanla, veritabanınız gönderi revizyonları, spam yorumlar ve eski eklenti verileri gibi gereksiz verilerle dolabilir. Bunları temizlemek web sitenizin daha verimli çalışmasına yardımcı olur.
WordPress veritabanınızı nasıl optimize edeceğinize dair rehberimiz, veritabanınızı güvenli ve hızlı bir şekilde temizlemek için bir eklentiyi nasıl kullanacağınızı gösterir.
Yalnızca DOM Boyutuna Değil, Genel WordPress Performansına Odaklanın
WordPress'te ‘Aşırı DOM boyutundan kaçının’ uyarısını gidermek web sitesi hızı için önemli olsa da, dikkate alınması gereken tek faktör bu değildir.
Çok fazla işlevselliğe veya benzersiz biçimlendirmeye sahip bir web sitesi doğal olarak daha büyük bir DOM'a sahip olabilir ve bu sorun değil. Anahtar, site performansı ve özellikler arasında doğru dengeyi bulmaktır.
Bu nedenle, DOM boyutunun yanı sıra, Temel Web Önemleri gibi diğer metriklere de dikkat etmek isteyebilirsiniz. Bunlar, Google'ın bir web sitesinin kullanıcı deneyimini ölçmek için kullandığı belirli metriklardır.
Aşırı DOM Boyutu Hakkında Sıkça Sorulan Sorular
WordPress'te DOM boyutu sorunlarını düzeltme hakkında en sık aldığımız sorulardan bazılarına burada yanıtlar bulunmaktadır.
Bir web sayfası için iyi bir DOM boyutu nedir?
Google'ın yönergelerine göre, iyi bir hedef DOM boyutunu toplam 1.500 düğümün altında, maksimum yuvalama derinliğini 32 seviyede ve tek bir öğenin 60'tan fazla çocuğa sahip olmamasını sağlamaktır.
Sayfa oluşturucu kullanmak her zaman DOM boyutunu artırır mı?
Zorunlu değil. SeedProd gibi modern, performansa odaklı sayfa oluşturucular temiz ve verimli kod üretmek üzere tasarlanmıştır. Ancak, bazı eski veya kötü kodlanmış sayfa oluşturucular DOM boyutunu artıran birçok gereksiz sarmalayıcı öğe ekleyebilir.
Web sitemin DOM boyutunu ücretsiz olarak nasıl kontrol edebilirim?
Google PageSpeed Insights veya GTmetrix gibi ücretsiz çevrimiçi araçları kullanabilirsiniz. Doğrudan tarayıcınızda da kontrol edebilirsiniz. Google Chrome'da sayfanıza sağ tıklayın, 'İncele'yi seçin, 'Konsol' sekmesine gidin ve document.querySelectorAll('*').length komutunu yazıp Enter'a basın.
WordPress Performansı İçin Ek Kaynaklar
Bu eğitimimizin WordPress'te aşırı DOM boyutunu nasıl düzelteceğinizi öğrenmenize yardımcı olduğunu umuyoruz.
Web sitenizin performansını iyileştirmeye yönelik bu ilgili kılavuzlara da göz atmak isteyebilirsiniz:
- WordPress Hızını ve Performansını Artırmak İçin Nihai Rehber
- WooCommerce Performansını Nasıl Hızlandırırsınız
- Hemen Çıkma Oranını Azaltmanın ve Dönüşümleri Artırmanın Kanıtlanmış Yolları
Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.
Moinuddin Waheed
Doğru eklentiyi kullanmanın bizi birçok zahmetten kurtarabileceğini ve web sitesi performansını artıracak kadar aşırı DOM boyutunu azaltmaya yardımcı olabileceğini fark ettim.
Önbellekleme için wp rocket kullanıyorum ama bu eklentinin bu kadar çok şey başarmak için kullanılabileceğini bilmiyordum.
wp rocket'teki basit ayarları etkinleştirerek css ve js dosyalarını küçültebilir, css ve js'deki oluşturmayı engelleyenleri azaltabiliriz.
Aşırı DOM boyutunu azaltma ve web sitesi performansını artırma konusundaki net adımlar için teşekkürler.
Jiří Vaněk
Çoğu zaman, PageSpeed Insights beni büyük bir DOM konusunda uyardı, ancak nereden başlayacağımı veya nasıl azaltacağımı hiç bilemedim. Bu makalede bu sorunu nasıl ele alacağınıza dair birçok ipucu var. Bu kılavuz net adımlar sunuyor ve bu harika.
Moinuddin Waheed
Yakın zamana kadar sayfa hızı analizlerinde gösterilen bu metriklerin ne olduğunu bilmiyordum.
Ancak bu tür ekstra faydalı makaleler sayesinde bu detayları anlama konusunda kendimi geliştirdim ve bu da iyi sonuçlar elde etmeme yardımcı oldu.