Aşırı büyük bir DOM boyutundan kaçının

DOM ağacının büyük olması, sayfanızın performansını çeşitli şekillerde yavaşlatabilir:

• Ağ verimliliği ve yük performansı

  Büyük bir DOM ağacı genellikle kullanıcı sayfayı ilk yüklediğinde görünmeyen birçok düğüm içerir. Bu durum, kullanıcılarınız için veri maliyetlerini gereksiz yere artırır ve yükleme süresini yavaşlatır.

• Çalışma zamanı performansı

  Kullanıcılar ve komut dosyaları sayfanızla etkileşim kurarken tarayıcının sürekli olarak düğümlerin konumunu ve stilini yeniden hesaplaması gerekir. Karmaşık stil kurallarıyla birlikte büyük bir DOM ağacı, oluşturma ve etkileşimi ciddi şekilde yavaşlatabilir.

• Bellek performansı

  JavaScript'inizde document.querySelectorAll('li') gibi genel sorgu seçiciler kullanılıyorsa farkında olmadan çok sayıda düğüme referans depoluyor olabilirsiniz. Bu durum, kullanıcılarınızın cihazlarının bellek kapasitesini aşabilir.

Lighthouse DOM boyutu denetlemesinin başarısız olma nedeni

Lighthouse, bir sayfanın toplam DOM öğelerini, sayfanın maksimum DOM derinliğini ve maksimum alt öğelerini bildirir:

Lighthouse, aşağıdaki özelliklere sahip DOM ağaçları içeren sayfaları işaretler:

• Gövde öğesinde 800'den fazla düğüm olduğunda uyarı verir.
• Body öğesi yaklaşık 1.400'den fazla düğüm içerdiğinde oluşan hatalar.

DOM boyutunu optimize etme

Genel olarak, yalnızca gerekli olduğunda DOM düğümü oluşturun ve artık gerekli olmayan düğümleri ortadan kaldırın.

Büyük bir DOM ağacı gönderiyorsanız sayfanızı yüklemeyi ve hangi düğümlerin görüntülendiğini manuel olarak not etmeyi deneyin. Belki de başlangıçta yüklenen dokümandan gösterilmeyen düğümleri kaldırabilir ve bunları yalnızca kaydırma veya düğme tıklama gibi alakalı bir kullanıcı etkileşiminden sonra oluşturabilirsiniz.

Çalışma zamanında DOM düğümleri oluşturursanız Alt Ağaç Değişikliği DOM Değişikliği Kesme Noktaları, düğümlerin ne zaman oluşturulduğunu belirlemenize yardımcı olabilir.

Büyük bir DOM ağacından kaçınamıyorsanız oluşturma performansını artırmak için CSS seçicilerinizi basitleştirebilirsiniz. Daha fazla bilgi için Google'ın Stil Hesaplamalarının Kapsamını ve Karmaşıklığını Azaltma başlıklı makalesine bakın.

Daha fazla bilgi için Büyük DOM boyutları etkileşimi nasıl etkiler ve bu konuda neler yapabilirsiniz? başlıklı makaleyi inceleyin.

Yığına özel rehberlik

Angular

Büyük listeler oluşturuyorsanız Bileşen Geliştirme Kiti (CDK) ile sanal kaydırma özelliğini kullanın.

React

• Sayfada çok sayıda yinelenen öğe oluşturuyorsanız oluşturulan DOM düğümlerinin sayısını en aza indirmek için react-window gibi bir "pencereleme" kitaplığı kullanın.
• shouldComponentUpdate, PureComponent veya React.memo kullanarak gereksiz yeniden oluşturma sayısını en aza indirin.
• Çalışma zamanı performansını artırmak için Effect kancasını kullanıyorsanız yalnızca belirli bağımlılıklar değişene kadar atlama efektleri kullanın.

Kaynaklar

• Aşırı büyük bir DOM boyutundan kaçının denetimi için kaynak kodu
• Stil Hesaplamalarının Kapsamını ve Karmaşıklığını Azaltma