Veya GTmetrix'te "DOM öğelerinin sayısını azaltın":
DOM nedir?
Tarayıcınız bir HTML belgesi aldığında, bunun CSS ve JavaScript ile işleme ve çizim için kullanılan bir ağaç yapısına dönüştürülmesi gerekir.
Bu ağaç yapısına DOM veya Belge Nesne Modeli denir.
- düğüm DOM'daki tüm HTML öğelerine düğüm adı verilir. (aka "yapraklar" ağaçta).
- Derinlik – Bir “dalın” ağaçta ne kadar sürdüğüne derinlik denir. Örneğin yukarıdaki şemada img etiketinin derinliği 3'tür. (HTML -> body -> div -> img).
- alt öğeler – bir düğümün tüm alt düğümleri (daha fazla dallanma olmadan) çocuklardır.
Lighthouse ve Google PageSpeed Insights, aşağıdaki koşullardan biri karşılandığında sayfaları işaretlemeye başlar:
- Toplamda 1500'den fazla düğüme sahip olmak.
- 32 knot'tan fazla derinliğe sahip olun.
- Ana düğümün 60'tan fazla alt düğümü vardır.
DOM boyutu performansı nasıl etkiler?
Aşırı DOM boyutu, performansı farklı şekillerde etkileyebilir.
- Daha Yüksek Ayrıştırma ve Oluşturma Süresi (FCP) . Büyük bir DOM ağacı ve karmaşık stil kuralları, tarayıcı için harika bir iş çıkarır. Tarayıcının HTML'yi ayrıştırması, oluşturma ağacını oluşturması vb. gerekir. Kullanıcı her etkileşimde bulunduğunda veya HTML'deki bir şey değiştiğinde, tarayıcının onu yeniden hesaplaması gerekir.
- Bellek kullanımını artırır - JavaScript kodunuzun DOM öğelerine erişme işlevleri olabilir. Daha büyük bir DOM ağacı, JavaScript'i onları işlemek için daha fazla bellek kullanmaya zorlar. Bir örnek, bir sorgu seçici olabilir.
Document.querySelectorAll('img')tembel yükleme kitaplıkları tarafından yaygın olarak kullanılan tüm görüntüleri listeler. - TTFB'yi artırır – DOM'nin boyutu arttıkça HTML belgesinin boyutu da artar (KB olarak). Ağ üzerinden daha fazla verinin aktarılması gerektiğinden, bu TTFB'yi artırır.
DOM boyutu teknik olarak nasıl küçültülür?
Örneğin, DOM'nin boyutunu küçültmek teknik olarak kolaydır:
kullanım:
<ul id="navigation-main">etc..</ul>onun yerine:
<div id="navigation-main"><ul>etc..</ul></div>Temel olarak, olası tüm HTML öğelerinden kurtulun. DOM boyutunu daha da azaltmak için Flexbox veya Grid kullanabilirsiniz.
Ancak WordPress kullandığınız için bu size pek yardımcı olmaz!
WordPress'te DOM boyutu nasıl azaltılır?
Büyük sayfaları birden çok sayfaya bölün
Sitedeki her şeyi içeren bir sayfanız var mı? Hizmetler, iletişim formları, ürünler, blog gönderileri, referanslar vb. gibi mi?
Bunları birden çok sayfaya bölmeyi ve bunlara başlık/gezinme çubuğundan bağlantı vermeyi deneyin.
Mümkün olan her şeyin tembel yüklenmesi ve sayfalandırılması
Her türlü öğenin tembel yüklenmesi. İşte bazı örnekler:
- YouTube videosu geç yükleniyor - WP Rocket tarafından WP YouTube Lyte veya Lazy Load kullanın.
- Sayfa başına blog gönderilerinin/ürünlerin sayısını sınırlayın – Genellikle sayfa başına en fazla 10 blog yazısı tutmaya ve gerisini sayfalara ayırmaya çalışırım.
- Tembel yükleme blog gönderileri/ürünler – Daha fazla blog gönderisi veya ürün yüklemek için Daha Fazla Yükle düğmesi veya sonsuz kaydırma ekleyin.
- Tembel yükleme yorumları - Disqus kullandığımdan beri Disqus koşullu yükleme kullanıyorum. Kendi yorumlarınızı kullanıyorsanız, Lazy Load for Comments gibi eklentileri kullanın.
- Yorumların sayfalandırılması - Yüzlerce yorumunuz varsa, bu DOM boyutunu da etkileyebilir. Yorumları sayfalara ayırmak için Ayarlar -> Tartışma -> Yorumları Sayfalandır'a gidin.
- İlgili gönderilerin sayısını sınırlayın – İlgili gönderilerin sayısını 3 veya 4 ile sınırlandırmayı deneyin.
Not: Geç yüklenen resimler DOM'nin boyutunu küçültmez
İstenmeyen öğeleri CSS ile gizleme
Bazen bir tema/tasarımcı tarafından tanıtılan öğeleri kaldırmanız gerekebilir. Örneğin ürün sayfalarında sepete buton, puan butonu, yazar bilgisi, yayın tarihi vb.
Bunları CSS ile gizlemek için hızlı bir düzeltme:
.cart düğmesi {ekran:yok;}Bu çözüm basit görünse de, kullanıcıları istenmeyen koda maruz bırakıyorsunuz (hem HTML işaretlemesini hem de CSS stilini içerir).
Kaldırma seçeneği olup olmadığını görmek için tema/eklenti ayarlarınızı kontrol edin. Aksi takdirde ilgili PHP kodunu bulun ve kaldırın/yorum yapın.
İyi yazılmış temalar ve sayfa oluşturucular kullanın
İyi bir tema, DOM boyutunda önemli bir rol oynar. gibi iyi yazılmış temalar kullanınGenerateBasın veyaastra .
Sayfa oluşturucular ayrıca çok fazla div sunar. gibi yapıcılar kullanınoksijen, istenmeyen div blokları oluşturmayan ve HTML yapısı üzerinde daha fazla kontrole sahip olan.
Çözüm
Çok fazla div tanıtan daha fazla eklenti veya tema ayarı olabilir. Bir örnek, UberMenu gibi "mega menü" eklentileri olabilir.
Bazen sitenizin kullanıcı deneyimi için kritik öneme sahiptirler. Ancak bazen kullanıcılar tarafından asla kullanılmazlar.
Çoğu ziyaretçi yalnızca %75'e kadar kaydırma yaptığı için altbilgi bağlantılarınız hiç tıklanmıyor olabilir.
Ziyaretçilerin gerçekte ne kullandığını ve ne kullanmadığını öğrenmek için HotJar veya Google Analytics Etkinlikleri gibi araçları kullanın.Analiz edin, ölçün ve tekrarlayın.
