Büyük DOM boyutları, etkileşim üzerinde sandığınızdan daha fazla etkiye sahiptir. Bu kılavuzda bu durumun nedeni ve neler yapabileceğiniz açıklanmaktadır.
Bu durum kaçınılmazdır: Bir web sayfası oluşturduğunuzda bu sayfanın bir Belge Nesne Modeli (DOM) olacaktır. DOM, sayfanızı HTML'nin yapısını temsil eder ve JavaScript ile CSS'ye sayfanın yapısına ve içeriğine erişim sağlar.
Ancak sorun, DOM'un boyutunun bir tarayıcının sayfayı hızlı ve verimli bir şekilde oluşturma özelliğini etkilemesidir. Genel olarak, DOM ne kadar büyükse söz konusu sayfayı ilk kez oluşturmak ve sayfa yaşam döngüsünün ilerleyen aşamalarında oluşturma işlemini güncellemek o kadar pahalıdır.
Bu durum, DOM'u değiştiren veya güncelleyen etkileşimler sayfanın hızlı yanıt verme özelliğini etkileyen pahalı bir düzen çalışması tetiklediğinde çok büyük DOM'lara sahip sayfalarda sorun haline gelir. Pahalı sayfa düzenleri, sayfanın Sonraki Boyamayla Etkileşim (INP) metriğini etkileyebilir. Bir sayfanın kullanıcı etkileşimlerine hızlı yanıt vermesini istiyorsanız DOM boyutlarınızın yalnızca gerektiği kadar büyük olduğundan emin olmanız önemlidir.
Bir sayfanın DOM'u ne zaman çok büyük olur?
Lighthouse'a göre, bir sayfanın DOM boyutu 1.400 düğümü aştığında aşırı büyüktür. Lighthouse, bir sayfanın DOM'u 800 düğümü aştığında uyarı vermeye başlar. Aşağıdaki HTML'yi örnek olarak alalım:
<ul>
<li>List item one.</li>
<li>List item two.</li>
<li>List item three.</li>
</ul>
Yukarıdaki kodda dört DOM öğesi vardır: <ul> öğesi ve üç <li> alt öğesi. Web sayfanızda neredeyse bundan çok daha fazla düğüm olacaktır. Bu nedenle, DOM boyutlarını kontrol altında tutmak için neler yapabileceğinizi ve bir sayfanın DOM'unu olabildiğince küçülttükten sonra oluşturma işlemini optimize etmek için diğer stratejileri anlamanız önemlidir.
Büyük DOM'lar sayfa performansını nasıl etkiler?
Büyük DOM'lar sayfa performansını birkaç şekilde etkiler:
- Sayfanın ilk oluşturulması sırasında. CSS bir sayfaya uygulandığında DOM'a benzer bir yapı olan CSS Nesne Modeli (CSSOM) oluşturulur. CSS seçicilerinin özgünlüğü arttıkça CSSOM daha karmaşık hale gelir ve web sayfasını ekrana çizmek için gerekli düzen, stil, kompozisyon ve boyama çalışmalarının yürütülmesi daha uzun sürer. Bu ek çalışma, sayfa yükleme işleminin başlarında gerçekleşen etkileşimlerin gecikmesini artırır.
- Etkileşimler, öğe ekleme veya silme yoluyla ya da DOM içeriklerini ve stillerini değiştirerek DOM'u değiştirdiğinde, bu güncellemeyi oluşturmak için gereken çalışma çok maliyetli bir düzen, stil, kompozisyon ve boyama çalışmasına neden olabilir. Sayfanın ilk oluşturulmasında olduğu gibi, CSS seçici özgülüğünde artış, bir etkileşim sonucunda HTML öğeleri DOM'e eklendiğinde oluşturma işlemine ek yük getirebilir.
- JavaScript, DOM'u sorgularken DOM öğelerine yapılan referanslar bellekte depolanır. Örneğin, bir sayfadaki tüm
<div>öğelerini seçmek içindocument.querySelectorAll'u çağırırsanız sonuç çok sayıda DOM öğesi döndürüyorsa bellek maliyeti önemli olabilir.
Bunların tümü etkileşimi etkileyebilir ancak yukarıdaki listedeki ikinci öğe özellikle önemlidir. Bir etkileşim DOM'da bir değişiklikle sonuçlanırsa sayfadaki INP'nin düşük olmasına neden olabilecek çok fazla çalışma başlatılabilir.
DOM boyutunu nasıl ölçerim?
DOM boyutunu birkaç şekilde ölçebilirsiniz. İlk yöntemde Lighthouse kullanılır. Bir denetim yaptığınızda, geçerli sayfanın DOM'u ile ilgili istatistikler "Teşhis" başlığı altındaki "Aşırı büyük bir DOM boyutundan kaçının" denetiminde yer alır. Bu bölümde, toplam DOM öğesi sayısını, en fazla alt öğeyi içeren DOM öğesini ve en derin DOM öğesini görebilirsiniz.
Daha basit bir yöntem, herhangi bir popüler tarayıcıdaki geliştirici araçlarında JavaScript konsolunu kullanmaktır. DOM'daki HTML öğelerinin toplam sayısını almak için sayfa yüklendikten sonra konsolda aşağıdaki kodu kullanabilirsiniz:
document.querySelectorAll('*').length;
DOM boyutunun güncellemesini anlık olarak görmek istiyorsanız performans izleme aracını da kullanabilirsiniz. Bu aracı kullanarak, mevcut DOM boyutuyla birlikte sayfa düzeni ve stil işlemleri (ve diğer performans yönleri) arasında ilişki kurabilirsiniz.
DOM'un boyutu Lighthouse DOM boyutu uyarı eşiğine yaklaşıyorsa veya bu eşiği aşıyorsa bir sonraki adım, sayfanızın kullanıcı etkileşimlerine yanıt verme özelliğini iyileştirmek için DOM'un boyutunu nasıl küçülteceğinizi belirlemektir. Böylece web sitenizin INP'si de iyileşebilir.
Bir etkileşimden etkilenen DOM öğelerinin sayısını nasıl ölçebilirim?
Laboratuvarda, sayfanın DOM'unun boyutuyla ilgili olabileceğinden şüphelendiğiniz yavaş bir etkileşimin profilini çıkarıyorsanız "Stili Yeniden Hesapla" etiketli bir etkinlik seçerek kaç DOM öğesinin etkilendiğini anlayabilir ve alt paneldeki bağlamsal verileri gözlemleyebilirsiniz.
Yukarıdaki ekran görüntüsünde, çalışmanın stilinin yeniden hesaplanması (seçildiğinde) özelliğinin etkilenen öğelerin sayısını gösterdiğini görebilirsiniz. Yukarıdaki ekran görüntüsü, DOM boyutunun çok sayıda DOM öğesi içeren bir sayfada oluşturma işlemi üzerindeki etkisinin aşırı bir durumunu gösterir. Ancak bu teşhis bilgisi, DOM boyutunun bir etkileşime yanıt olarak sonraki karenin boyanmasının ne kadar sürdüğü konusunda sınırlayıcı bir faktör olup olmadığını belirlemek için her durumda yararlıdır.
DOM boyutunu nasıl küçültebilirim?
DOM boyutunu azaltmanın başlıca yolu, web sitenizin HTML'sinde gereksiz işaretleme olup olmadığını denetlemenin yanı sıra DOM derinliğini azaltmaktır. DOM'unuzun gereksiz yere derin olabileceğinin bir işareti, tarayıcınızın geliştirici araçlarının Öğeler sekmesinde aşağıdakine benzer bir işaretleme görmenizdir:
<div>
<div>
<div>
<div>
<!-- Contents -->
</div>
</div>
</div>
</div>
Bu tür kalıplar gördüğünüzde DOM yapınızı düzleştirerek bunları basitleştirebilirsiniz. Bu sayede DOM öğelerinin sayısını azaltabilir ve sayfa stillerini basitleştirme fırsatı elde edebilirsiniz.
DOM derinliği, kullandığınız çerçevelerin bir belirtisi de olabilir. Özellikle de JSX'e dayalı olanlar gibi bileşen tabanlı çerçeveler, birden fazla bileşeni bir üst kapsayıcıya yerleştirmenizi gerektirir.
Ancak birçok çerçeve, bileşenleri iç içe yerleştirmekten kaçınmak için parça adı verilen öğeleri kullanmanıza olanak tanır. Parçaları özellik olarak sunan bileşen tabanlı çerçeveler şunları içerir ancak bunlarla sınırlı değildir:
Seçtiğiniz çerçevede parçalar kullanarak DOM derinliğini azaltabilirsiniz. DOM yapısının düzleştirilmesinin stil üzerinde yaratacağı etkiden endişeleniyorsanız flexbox veya grid gibi daha modern (ve daha hızlı) düzen modlarını kullanmaktan fayda sağlayabilirsiniz.
Faydalı olabilecek diğer stratejiler
DOM'unuzu olabildiğince küçük tutmak için DOM ağacınızı düzleştirmeye ve gereksiz HTML öğelerini kaldırmaya çalışsanız bile DOM'unuz oldukça büyük olabilir ve kullanıcı etkileşimlerine yanıt olarak değiştiği için çok fazla oluşturma işlemi başlatabilir. Bu durumdaysanız oluşturma işlemini sınırlamak için uygulayabileceğiniz başka stratejiler de vardır.
Ek bir yaklaşımı değerlendirin
Sayfanızın büyük bölümlerinin ilk oluşturulduğunda kullanıcı tarafından görünmediği bir durumda olabilirsiniz. Bu, DOM'un bu bölümlerini başlangıçta atlayarak ancak kullanıcı sayfanın başlangıçta gizli olan yönlerini gerektiren sayfa bölümleriyle etkileşime geçtiğinde bunları ekleyerek HTML'yi yavaşça yükleme fırsatı olabilir.
Bu yaklaşım hem ilk yükleme sırasında hem de sonrasında faydalıdır. İlk sayfa yüklemesi için önceden daha az oluşturma işlemi yaparsınız. Bu, ilk HTML yükünüzün daha hafif olacağı ve daha hızlı oluşturulacağı anlamına gelir. Bu, bu kritik dönemdeki etkileşimlere ana ileti dizisinin dikkati için daha az rekabetle yayınlanma fırsatı verir.
Sayfanın ilk başta yüklenirken gizli olan birçok bölümü varsa bu, yeniden oluşturma işlemini tetikleyen diğer etkileşimleri de hızlandırabilir. Ancak diğer etkileşimler DOM'a daha fazla öğe ekledikçe DOM sayfa yaşam döngüsü boyunca büyüdükçe oluşturma işlemi de artar.
DOM'a zaman içinde öğe eklemek zor olabilir ve bunun bazı dezavantajları vardır. Bu yöntemi kullanıyorsanız büyük olasılıkla kullanıcı etkileşimine yanıt olarak sayfaya eklemeyi düşündüğünüz HTML'yi doldurmak için veri almak üzere ağ istekleri gönderiyorsunuzdur. Aktarım sırasındaki ağ istekleri INP'ye dahil edilmese de algılanan gecikmeyi artırabilir. Mümkünse kullanıcıların bir işlem yapıldığını anlaması için bir yükleme spinner'ı veya verilerin getirilmekte olduğunu belirten başka bir gösterge gösterin.
CSS seçici karmaşıklığını sınırlama
Tarayıcı, CSS'nizdeki seçicileri ayrıştırırken bu seçicilerin mevcut düzene nasıl ve uygulanıp uygulanmadığını anlamak için DOM ağacını taramalıdır. Bu seçiciler ne kadar karmaşık olursa tarayıcının hem sayfanın ilk oluşturulmasını hem de sayfa bir etkileşim sonucunda değişirse daha fazla stil yeniden hesaplaması ve düzen çalışması gerçekleştirmesi gerekir.
content-visibility mülkünü kullanma
CSS, ekran dışındaki DOM öğelerini üşengeç bir şekilde oluşturmanın etkili bir yolu olan content-visibility özelliğini sunar. Öğeler görüntüleme alanına yaklaştıkça isteğe bağlı olarak oluşturulur. content-visibility'ün avantajları yalnızca ilk sayfa oluşturma işleminde önemli miktarda oluşturma işini ortadan kaldırmakla kalmaz, aynı zamanda sayfa DOM'u bir kullanıcı etkileşimi sonucunda değiştiğinde ekran dışındaki öğelerin oluşturma işlemini de atlar.
Sonuç
DOM boyutunuzu yalnızca kesinlikle gerekli olana indirmek, web sitenizin INP'sini optimize etmenin iyi bir yoludur. Bunu yaparak, DOM güncellendiğinde tarayıcının sayfa düzeni ve oluşturma işlemini gerçekleştirmesi için gereken süreyi azaltabilirsiniz. DOM boyutunu önemli ölçüde küçültemeseniz bile, oluşturma işlemini bir DOM alt ağacına ayırmak için kullanabileceğiniz bazı teknikler vardır (ör. CSS kapsayıcı ve content-visibility CSS mülkü).
Ne şekilde yaparsanız yapın, oluşturma işleminin en aza indirildiği bir ortam oluşturmanın yanı sıra sayfanızı etkileşimlere yanıt olarak gerçekleştirdiği oluşturma işleminin miktarını azaltmanın sonucu, web sitenizin kullanıcılarla etkileşime geçtiğinde daha duyarlı hissedilmesi olacaktır. Bu, web siteniz için daha düşük bir INP'ye sahip olacağınız anlamına gelir. Bu da daha iyi bir kullanıcı deneyimi anlamına gelir.