Büyük DOM boyutlarının etkileşim üzerinde sandığınızdan daha fazla etkisi vardır. Bu kılavuzda bunun nedenleri 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'nin boyutunun, tarayıcının bir sayfayı hızlı ve verimli bir şekilde oluşturma becerisini etkilemesidir. Genel anlamda, bir DOM ne kadar büyükse başlangıçta bu sayfayı oluşturmak ve sayfa yaşam döngüsünde oluşturma işlemini daha sonra güncellemek de o kadar pahalı olur.
Bu durum, DOM'yi değiştiren veya güncelleyen etkileşimler, sayfanın hızlı yanıt verme becerisini etkileyen pahalı düzen işlerini tetiklediğinde çok büyük DOM'lere sahip sayfalarda sorunlu hale 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. Bir sayfanın DOM'si 800 düğümü aştığında Lighthouse uyarı göndermeye 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 bunun üç <li> alt öğesi. Neredeyse kesinlikle web sayfanızda 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'sini mümkün olduğunca küçük hale getirdikten sonra oluşturma işlemini optimize etmeye yönelik diğer stratejileri anlamanız önemlidir.
Büyük DOM'ler sayfa performansını nasıl etkiler?
Büyük DOM'ler, sayfa performansını birkaç şekilde etkiler:
- Sayfanın ilk oluşturulması sırasında. Bir sayfaya CSS uygulandığında, DOM'ye benzer ve CSS Nesne Modeli (CSSOM) olarak bilinen bir yapı oluşturulur. CSS seçicilerin belirginliği arttıkça CSSOM daha karmaşık hale gelir ve web sayfasını ekrana çizmek için gereken düzen, stil, birleştirme ve boyama işlerini yürütmek için daha fazla zaman gerekir. Bu ek çalışma, sayfa yükleme sırasında erken gerçekleşen etkileşimler için etkileşim gecikmesini artırır.
- Etkileşimler, öğe ekleme veya silme yoluyla ya da DOM içeriklerini ve stillerini değiştirerek DOM'de değişiklik yaptığında, bu güncellemeyi oluşturmak için gereken çalışma; düzen, stil, birleştirme ve boyama gibi yüksek maliyetli çalışmalara 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 sorguladığında 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öntem Lighthouse'u kullanı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 çok 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 boyutunun uyarı eşiğine yaklaşıyorsa veya tamamen başarısız oluyorsa 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 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çeneği etkinleştirildiğinde etkilenen öğelerin sayısının gösterildiği görülüyor. 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 küçültmenin esas yolu, gereksiz işaretlemeler için web sitenizin HTML'sini denetlemenin ötesinde DOM derinliğini azaltmaktır. Tarayıcınızın geliştirici araçlarının Öğeler sekmesinde şuna benzer bir işaretleme görüyorsanız, DOM'nizin gereksiz şekilde derin oluşturulmuş olabileceğine dair bir işaret olabilir:
<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. Bunu yapmak, DOM öğelerinin sayısını azaltır ve muhtemelen sayfa stillerini basitleştirmenize olanak tanır.
DOM derinliği, kullandığınız çerçevelerin bir belirtisi de olabilir. Özellikle, JSX'e dayananlar gibi bileşen tabanlı çerçeveler birden çok bileşeni bir üst kapsayıcıya iç içe 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ı bir ö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ı birleştirmenin stil üzerindeki etkisinden endişe ediyorsanız flexbox veya ızgara gibi daha modern (ve daha hızlı) düzen modları kullanmak işinize yarayabilir.
Göz önünde bulundurulması gereken diğer stratejiler
DOM ağacınızı düzleştirmek ve DOM'unuzu mümkün olduğunca küçük tutmak için gereksiz HTML öğelerini kaldırmak için gereken tüm çabayı gösterseniz 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 çalışması başlatabilir. Kendinizi bu konumda bulursanız oluşturma işlemini sınırlandırmak için göz önünde bulundurabileceğiniz başka stratejiler de vardır.
Eklemeli bir yaklaşım kullanın
Sayfanızın büyük bölümlerinin, ilk oluşturulduğunda kullanıcı tarafından başlangıçta görülmediği bir konumda olabilirsiniz. Bu, başlangıçta DOM'nin bu bölümlerini atlayarak HTML'yi geç yüklemek için bir fırsat olabilir, ancak kullanıcı, sayfanın başlangıçta gizlenen yönlerini gerektiren bölümleriyle etkileşimde bulunduğunda bu bölümleri ekleyin.
Bu yaklaşım hem ilk yükleme sırasında hem de sonrasında faydalıdır. İlk sayfa yüklemesinde, daha az oluşturma işi yaparsınız. Bu, ilk HTML yükünü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.
Zaman içinde DOM'ye eklemek zor olabilir ve bunun kendine özgü avantajları vardır. Bu yolu kullanıyorsanız büyük olasılıkla, kullanıcı etkileşimine yanıt olarak sayfaya eklemek istediğiniz HTML'yi doldurmak üzere veri almak için ağ isteklerinde bulunuyorsunuzdur. 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ı anlayabilmesi 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 geçerli 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 sayfayı ilk kez oluşturması hem de bir etkileşimin sonucu olarak sayfa değişirse artan stil yeniden hesaplamaları ve sayfa düzeniyle çalışması için o kadar çok işlem yapması 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ü alanına yaklaştıkça istek üzerine oluşturulur. content-visibility özelliğinin avantajları, ilk sayfa oluşturma sırasında önemli bir oluşturma işinin önünü kesmekle kalmaz, aynı zamanda kullanıcı etkileşimi sonucunda sayfa DOM'u değiştirildiğinde ekran dışındaki öğelerin oluşturma işlemini de atlar.
Sonuç
DOM boyutunuzu sadece kesinlikle gerekli olacak şekilde küçültmek, web sitenizin INP'sini optimize etmenin iyi bir yoludur. Böylece, DOM güncellendiğinde tarayıcının düzen ve oluşturma işlerini 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 da web siteniz için daha düşük INP olacağı anlamına gelir ve bu da daha iyi bir kullanıcı deneyimi anlamına gelir.