DOM (Belge Nesne Modeli), HTML ve XML belgeleri için bir programlama arayüzüdür ve nesneler içeren dallar ve düğümlerden oluşan bir HTML belgesinin yapısına verilen addır.
Belge Nesne Modelinin geçmişi, 1990'ların sonlarında Netscape Navigator ve Microsoft Internet Explorer arasındaki"tarayıcı savaşlarına" ve web tarayıcılarının JavaScript motorlarında yaygın olarak uygulanan ilk komut dosyası dilleri olan JavaScript ve JScript'e kadar uzanmaktadır.
WordPress'te DOM yapısı: ağaç, dallar ve düğümler
WordPress'teki DOM diğer web sitelerinden çok farklı değildir.
<html> <-- Árbol (nodo raíz)
│
├── <head> <-- Rama
│ ├── <title> <-- Nodo (hoja)
│ └── <meta> <-- Nodo (hoja)
│
└── <body> <-- Rama
├── <header> <-- Rama
│ └── <h1> <-- Nodo (hoja)
│
├── <div> <-- Rama
│ ├── <p> <-- Nodo (interno)
│ └── <img> <-- Nodo (hoja)
│
└── <footer> <-- Rama
└── <a> <-- Nodo (hoja)
- Ağaç: Tüm sayfa, kök düğümü
(<html>)ve alt öğeleri olan bir ağaç olarak temsil edilir. - Dallar: Bir
<div>,<header>,<footer>,vb. içindeki her öğe ağacın bir dalını temsil eder. - Düğümler:
<p>,<img>veya<a>gibi tüm HTML öğeleri, dallardan sarkan düğümlerdir. Bu düğümler dahili (diğer düğümleri içeren) veya harici (ağacın başka çocuğu olmayan "yaprakları") olabilir.
Bu nedenle, dalların yoğunluğu onu oluşturan öğelerin türüne ve sayısına bağlı olacaktır. Örneğin, WordPress'teki karmaşık bir navigasyon menüsü, bağlantıların ve alt menülerin sayısı nedeniyle birkaç dal seviyesi ve düzinelerce düğüm oluşturabilir.
Düğümleri bir sayfadaki tüm HTML öğeleri olarak düşünebilirsiniz. Ne kadar çok öğeniz varsa, genellikle o kadar uzun sürer ve bu da daha yüksek bir Toplam Blok Süresine(TBT) yol açar.
Bir sayfanın yapısını oluşturan DOM öğelerini basitçe kaldıramayacağınız için bu, WordPress'te optimize edilmesi zor bir şey olabilir. Ancak, bu öğeleri seçerek görüntüleyebilir ve katlamanın altına bir dizi nesne yükleyerek DOM'un toplam boyutunu azaltabiliriz.
Neden DOM'un boyutunu küçültmelisiniz?
Büyük bir DOM ağacı, sitenizin yüklenme süresini çeşitli şekillerde yavaşlatabilir, daha uzun ve daha yavaş stil hesaplamalarına neden olarak bellek kullanımını artırabilir ve kullanıcılar için gereksiz veri maliyetleri oluşturabilir.
Bu farklı senaryolar, kullanıcı sayfayı ilk yüklediğinde görünmeyen düğümlerin gereksiz yere yüklenmesini, düğüm konumu ve stil hesaplamalarının sürekli olarak tekrarlanmasını ve kullanıcıların cihazlarının belleğini aşırı yükleyen düğümlere aşırı sayıda referansın depolanmasını içerebilir.
Sayfa yükleme hızını optimize etmenin kısa ve uzun vadeli faydaları zaten bin bir makalede açıklanmıştır. Kısacası, kısa vadede insanların beklemekten sıkılarak sitenizden ayrılmasını önlersiniz ve büyük olasılıkla sitenizde daha fazla zaman geçirirler. Yükleme hızı, SEO konumlandırmasında Google tarafından kabul edilen faktörlerden biridir ve anladığım kadarıyla diğer arama motorları için de öyle, bu nedenle uzun vadede değerli organik trafik artacaktır.
DOM'un boyutunun artmasına ne sebep olur?
DOM'un nihai boyutu, şablonun kendisi, kullandığınız farklı eklentilerin ekledikleri ve karmaşık bloklar veya görüntülerin hain "kaydırıcıları" gibi eklediğiniz içerik türü gibi birçok faktörden etkilenir. Ayrıca örneğin "Oluşturucular" tarafından oluşturulan kod.
Örneğin, Elementor'u terk ettiğim 2022 yılına kadar, çünkü optimizasyona direniyordu ve neredeyse her güncellemede bir şeyi bozmadığı nadirdi, ayrıca teknik destekleriyle birkaç kötü deneyim yaşadım, bu oluşturucu web kodunu gerçek bir alfabe çorbasına ve binlerce
Aynı yılın Nisan ayında Elementor, Flexbox "Kont eyneri " ni çok yeni ve devrim niteliğinde bir yenilik olarak bünyesine kattı; oysa konteyner zaten yıllardır GenerateBlocks 'un temelini oluşturuyordu.
DOM nasıl ölçülür?
Ölçüm için henüz çok optimize edilmemiş, biraz uzun ve farklı türde öğeler içeren bir gönderi seçtim.
En iyi bilinen ve en popüler olanla başlayalım: PageSpeed Insights . Google, gövde öğesi 800 ' den fazla düğüme sahip olduğunda bir uyarı(turuncu renkte) ve gövde öğesi 1.400'den fazla düğüme sahip olduğunda bir hata mesajı(kırmızı renkte) ve şu öneriyi içeren bir mesaj olarak işaretler:"Aşırı DOM boyutundan kaçının".
Analiz ettiğiniz her sayfanın içeriğine ve yapısına bağlı olarak, hangi unsurlara saldırabileceğinize dair az ya da çok ipucu bulacaksınız. Bunun avantajı, genellikle söz konusu unsuru işaret eden bir görüntü göstermesidir.
Tüm bu uyarıların yalnızca tavsiye niteliğinde olduğunu ve bu metriklere takılıp paniğe kapılmamanız gerektiğini bir kez daha hatırlatmak isterim. Düşük PageSpeed skorlarına rağmen iyi bir kullanıcı deneyimi ve iyi bir algılanan hız sunan sayfalar vardır.
GTmetrix ile genellikle DOM üzerinde aynı sonuçları alacağız.
Bununla birlikte, burada taleplerin "şelale" grafiği, türe ve yüklenme sürelerine göre sıralanmış tüm öğeleri bir bakışta incelemek için çok kullanışlıdır.
Ancak en kolay ve en hızlı yol herhangi bir tarayıcı kullanmaktır. Analiz edilecek sayfayı açın ve sağ tıklayın / "incele" ve "Ağ" sekmesinde çok daha ayrıntılı bir şelale bulacaksınız çünkü sayfayı kaydırarak tamamlayabilirsiniz ve içerdiği tüm dosyalar eklenecektir. Daha sonra bunları ağırlık, tür, zaman vb. göre sıralayabilirsiniz.
Bu pencerenin altında sonuçların bir özetini bulacaksınız. Solda, istek sayısı. Sağda, mavi renkte DOMContentLoaded olay zamanı ve kırmızı renkte o sayfanın yüklenme süresi.
Perfmatters'ın "Tembel Öğeleri" ile DOM boyutunu azaltın.
Tavsiye etmekten asla bıkmadığım Perfmatters , 28 Ağustos 2024 tarihli 2.3.3 sürümüne , henüz Beta aşamasında olmasına rağmen DOM'u hafifletme görevini kolaylaştırmak için gerçekten iyi çalışan Lazy Elements adlı bir seçenek ekledi.
Bu fonksiyon, bir üst konteynerin bir öznitelik dizesinin (class="example") herhangi bir bölümünü ekleyerek belirli öğelere ve bunların alt öğelerine (çocuklar) yanlış adlandırılmış"Lazy Load" eklemeyi sağlar.
Perfmatters tarafından bu yeni işlevsellik hakkında sağlanan belgelerde, "Tembel Yükleme "yi katlamanın üstündeki öğelere uygulamaya çalışmamamız konusunda uyarılıyoruz. Yani, ekrana yüklenen ve kullanıcının aşağı kaydırmadan gördüğü ilk şey.
Ayrıca, bir şeyin görsel olarak bozuk olduğunu görürseniz, sayfada diğer öğelerle paylaşılmayan benzersiz bir dize kullandığınızdan emin olun.
Yavaş yüklenen görüntülerde olduğu gibi, içerik bir . Bu, tembel olarak yüklenen herhangi bir şeyin teknik olarak hala Google tarafından taranabilir ve dizine eklenebilir olduğu anlamına gelir. Ancak, Google'ın bir dizede Lazy Load bulunan öğelere nasıl davranacağını kesin olarak söyleyemezler. Bu yüzden SEO açısından önce test etmeyi öneriyorlar.
Ayrıca, bir "ışık kutusu" başlatan görüntüler içeren öğelere Tembel Yükleme uygulamayı denemeyin uyarısında bulunuyor. Ve böylece, yerel WordPress lightbox işlevinin, onu uygulayan bir öğenin sınıfı listeye eklendiğinde çalışmayı durdurduğunu doğrulayabildim.
Aksi takdirde, "Lazy Elements" mükemmel çalışıyor. Bu özellik sayesinde DOM'u inceltmek için çok zaman kazandım ve iyi sonuçlar elde ettim. Perfmatters 'ın seçeneklerini geliştirmek ve genişletmek için geliştirmeye devam edeceğini umuyorum.
