Bir Web Sitesinin DOM boyutunu küçültme tuşları

Bir web sayfasında iyi SEO konumlandırması elde etmeyi etkileyen yönlerden biri, yükleme performansıdır. Ve bu, bir sayfanın DOM boyutunun önemli bir rol oynadığı bir konudur.

Bu nedenle, bir DOM'nin nasıl aşırı büyük kabul edilebileceğini ve nasıl azaltılacağını açıklayacağız.

Hadi başlayalım!

DOM nedir?

Basitçe söylemek gerekirse, DOM hakkında konuştuğumuzda , tarayıcının her sayfa yüklediğinde oluşturduğu nesnelerin yapısından bahsediyoruz . Adını Document Object Model kısaltmasına borçludur.

Bazıları diğerlerine bağlı olan farklı nesnelerin bulunduğu hiyerarşik bir yapıdır. Diğer ikincil öğelerin bağlı olduğu ana nesne olduğundan, yapı bir ağaca benzer. DOM, sayfanın HTML yapısını bir dizi etiketten oluşan bir ağaç olarak temsil eder.

Başka bir deyişle, tarayıcı bize göstermek için bir sayfa hazırladığında, HTML yapısına dayalı olarak bir sayfanın tüm öğelerinden oluşan bir nesne ağacı oluşturur.

Tarayıcı bir HTML belgesi aldığında, onu DOM veya DOM ağacı dediğimiz bu ağaç benzeri yapıya dönüştürmek zorundadır. JavaScript kodu bu DOM'a erişebilir ve onu değiştirebilir.

DOM boyutu web performansınızı nasıl etkiler?

Gerçek şu ki, DOM'nin boyutu bir sayfanın performansını etkiler. Aşırı büyük bir DOM , aşağıdaki etkilere sahip olduğundan Web Sitesinin hızını yavaşlatabilir :

• Ağ verimliliği ve yük performansı. DOM aşırı büyükse, genellikle kullanıcı sayfayı ilk yüklediğinde görünmeyen, veri tüketimini gereksiz yere artıran ve sitenin daha yavaş yüklenmesini sağlayan HTML öğeleri içerir.
• Çalışma zamanı performansı. Kullanıcılar ve komut dosyaları bir sayfayla etkileşime girdikçe, tarayıcının HTML etiketlerinin konumunu ve stilini sürekli olarak yeniden hesaplaması gerekir.
• Bellek performansı . DOM ağacı çok büyükse, tarayıcının onu işlemek için daha fazla belleğe ihtiyacı olabilir.

DOM'un boyutu teknik olarak nasıl küçültülür?

DOM boyutunu web performansını olumsuz etkilemeyecek şekilde küçültmek için, gerekli olmayan tüm HTML öğelerini kaldırmanız gerekir . Gördüğümüz gibi gerekli önlemleri almazsak sayfayı yavaşlatmasının birkaç nedeni var.

Bu kodu kullanmak yerine;

 <div id = ”navigation-main”>   <ul>           etc ..   </ul> </div>

Bu diğerini kullanmak daha iyi olur;

 <ul id = ”navigation-main”>   etc .. </ul>

Ağaç yapısı ile ilgili olarak aşağıdaki terimleri bilmemiz gerekir:

• Nodes : DOM'nin tüm HTML öğeleri. Ağacın 'yaprakları' olarak da bilinirler.
• İkincil Düğümler : Daha fazla dalı olmayan düğümler.

Bununla birlikte, en iyi şey, ağacın derinliğinin aşağıdakilerden oluşmasıdır :

• 32 düğümden az.
• Her düğüm başına 60'tan az ikincil düğüm.

Google, Web Siteleri geliştirirken sayfaların 1.500'den az DOM düğümü içermesini önerir; bu, tasarımların çok karmaşık olmaması gerektiği anlamına gelir.

WordPress'te DOM'nin boyutu nasıl azaltılır

WordPress'te DOM boyutunu küçültmenin birkaç yolu vardır:

Büyük sayfaları birden çok sayfaya ayırın

Sitenizin farklı içerik türlerini gösteren tek bir sayfanız var mı? Örneğin, iletişim formları, blog gönderileri, ürünler vb.

Bu durumda, tüm bu öğeleri farklı sayfalarda sınıflandırmak ve bunları gezinme çubuğu aracılığıyla bağlamak daha iyidir.

Tembel yükleme eklentisini etkinleştirin ve tüm olası öğeleri sayfalara bölün

Buna izin veren tüm öğelerde tembel yükleme modülünü etkinleştirebilirsiniz . Bunu YouTube'daki videolarla, Youtube Lite veya WordPress WP-Rocket'ten Lazy Load kullanarak yapabilirsiniz.

Blog sayfası başına gönderi sayısını sınırlamak da önemlidir . Makul bir maksimum gönderi sayısı, sayfa başına 10 olacaktır. Bu uygulama, her sayfada görünmesi gereken ürün sayısı için de geçerlidir.

Sayfa başına gönderi sayısını değiştirme seçeneği vardır. Ayarlar Menüsü > Okuma alt menüsüne gidin, Blog Sayfaları gösterimini en yüksek değerde değiştirin ve Değişiklikleri Kaydet .

Ayrıca ilgili yayınların sayısını maksimum üç veya dört ile sınırlandırmanızı öneririz.

Varsayılan WP temasında bulunan gereksiz öğeleri kaldırın

Bazı durumlarda, ürün sayfalarındaki "Sepete Ekle" düğmesi, yayın tarihi, yazar bilgileri vb. gibi WordPress temanızla birlikte gelen belirli öğeleri varsayılan olarak kaldırmanız gerekebilir .

Bu öğeleri kaldırma seçeneği olup olmadığını görmek için WordPress temasının yapılandırmasını kontrol edin ve yoksa, bunları kaldırmak için ilgili PHP kodunu arayın.

İyi kodlanmış temalar veya sayfa oluşturucular kullanın

WordPress temasının kalitesi, DOM'nin boyutunu doğrudan etkiler. Bu nedenle, Astra veya GeneratePress gibi iyi kodlanmış temaların kullanılması tavsiye edilir.

Sayfa oluşturucular da genellikle çok fazla div etiketi ekler, bu nedenle istenmeyen öğeleri enjekte etmeyen ve HTML yapısı üzerinde daha fazla kontrole izin veren Oksijen Oluşturucular gibi çözümleri kullanmak önemlidir.

HotJar gibi araçlar, kullanıcıların ne kullandığını ve onlar için neyin işe yaramadığını görmenizi sağlar. Doğru DOM boyutunu elde etmek için yakın bir analiz yapmak çok önemlidir.

Son düşünceler

Aşırı Dom Boyutu, web performansınıza zarar vererek sayfa yükleme süresini yavaşlatır. Gereksiz öğeler olmadan HTML yapınızı basit tutun . DOM ağacınızı kontrol edin ve sitenize değer katmayan düğümlerden kurtulun. Sadece Web Sitenizi hızlandırmakla kalmayacak, aynı zamanda daha iyi bir UX sunacaksınız.

Google, şüphesiz önümüzdeki aylarda yayınlanacak Sayfa Deneyimi güncellemesinde DOM boyutunu dikkate alacaktır. Yeterli bir tane olduğundan emin olun, böylece web performansınızı etkilemez.