Büyük DOM boyutlarının etkileşim üzerinde düşündüğünüzden daha fazla etkisi vardır. Bu kılavuzda, nedenleri ve neler yapabileceğiniz açıklanmaktadır.
Başka herhangi bir yöntemi yoktur: Bir web sayfası oluştururken bu sayfada bir Belge Nesne Modeli (DOM) bulunur. DOM, sayfanızın HTML yapısını temsil eder ve JavaScript ve CSS'nin, sayfanın yapısına ve içeriğine erişmesine izin verir.
Ancak sorun, DOM'un boyutunun tarayıcının bir sayfayı hızlı ve verimli bir şekilde oluşturma yeteneğini etkilemesidir. Genel anlamda, DOM ne kadar büyükse bu sayfayı başlangıçta oluşturmak ve oluşturma işlemini sayfa yaşam döngüsünde sonradan güncellemek de o kadar pahalı olur.
Bu durum, DOM'u değiştiren veya güncelleyen etkileşimlerin, sayfanın hızlı yanıt verme kabiliyetini etkileyen pahalı düzen çalışmasını tetiklediğinde, çok büyük DOM'lara sahip sayfalarda sorun haline gelir. Pahalı düzen çalışmaları, sayfanın Sonraki Boyamayla Etkileşimi (INP) 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'si 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ıdır. Bir sayfanın DOM'u 800 düğümü aştığında Lighthouse uyarı vermeye başlar. Örneğin, aşağıdaki HTML'yi ele 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. Web sayfanız büyük olasılıkla bundan çok daha fazla düğüme sahip olacaktır. Bu nedenle, DOM boyutlarını kontrol altında tutmak için neler yapabileceğinizi ve 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'lar sayfa performansını nasıl etkiler?
Büyük DOM'ler, sayfa performansını birkaç şekilde etkiler:
- Sayfanın ilk oluşturma işlemi sırasında. CSS bir sayfaya uygulandığında, CSS Nesne Modeli (CSSOM) olarak bilinen DOM'a benzer bir yapı oluşturulur. CSS seçicilerin belirlilik düzeyi arttıkça CSSOM daha karmaşık hale gelir ve web sayfasını ekrana çekmek için gereken düzen, stil, birleştirme ve boyama işlerinin yürütülmesi için daha fazla zaman gerekir. Bu ek çalışma, sayfa yükleme işleminin başlarında 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'da değişiklik yaptığında, bu güncellemeyi oluşturmak için gereken işler çok maliyetli düzen, stil, birleştirme ve boyama işlemleriyle sonuçlanabilir. Sayfanın ilk oluşturma işleminde olduğu gibi, bir etkileşim sonucunda HTML öğeleri DOM'ye eklendiğinde, CSS seçicinin belirginliğindeki artış, oluşturma işine katkıda bulunabilir.
- 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.querySelectorAllyöntemini çağırırsanız sonuç çok sayıda DOM öğesi döndürürse bellek maliyeti yüksek olabilir.
Bunların tümü etkileşimi etkileyebilir ancak yukarıdaki listede yer alan ikinci öğe özellikle önemlidir. Bir etkileşim DOM'da bir değişikliğe yol açarsa sayfada kötü bir INP'ye yol açabilecek birçok işlem başlatılabilir.
DOM boyutunu nasıl ölçerim?
DOM boyutunu birkaç şekilde ölçebilirsiniz. İlk yöntem Lighthouse kullanır. Bir denetim çalıştırdığınızda, geçerli sayfanın DOM'siyle ilgili istatistikler "Teşhis" başlığının altındaki "Aşırı miktarda DOM boyutundan kaçının" denetiminde olur. Bu bölümde, DOM öğelerinin toplam sayısını (en fazla alt öğeyi içeren DOM öğesi) ve en derin DOM öğesini görebilirsiniz.
Daha basit bir yöntem, önde gelen tarayıcılardaki geliştirici araçlarında JavaScript konsolunun kullanılmasını içerir. DOM'daki HTML öğelerinin toplam sayısını elde etmek için, sayfa yüklendikten sonra konsolda aşağıdaki kodu kullanabilirsiniz:
document.querySelectorAll('*').length;
DOM boyutu güncellemesini gerçek zamanlı olarak görmek isterseniz performans izleme aracını da kullanabilirsiniz. Bu aracı kullanarak düzen ve stil işlemlerini (ve diğer performans özelliklerini) geçerli DOM boyutuyla ilişkilendirebilirsiniz.
DOM'nin boyutu, Lighthouse DOM boyutunun uyarı eşiğine yaklaşıyorsa veya tamamen başarısız oluyorsa bir sonraki adım, web sitenizin INP'sinin iyileştirilebilmesi amacıyla 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.
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 oluşturuyorsanız profil oluşturucuda "Stili Yeniden Hesapla" etiketli herhangi bir etkinlik parçasını seçerek etkilenmiş DOM öğelerinin sayısını belirleyebilir ve alt paneldeki bağlam verilerini gözlemleyebilirsiniz.
Yukarıdaki ekran görüntüsünde, seçilen çalışma stili için yeniden hesaplanan stilde, etkilenen öğe sayısının gösterildiğine dikkat edin. Yukarıdaki ekran görüntüsünde, çok sayıda DOM öğesi içeren bir sayfada DOM boyutunun oluşturma işi üzerindeki etkisinin aşırı bir örneği gösterilse de bu teşhis bilgileri, DOM boyutunun, bir etkileşime yanıt olarak bir sonraki karenin boyanması için ne kadar zaman alacağı konusunda sınırlayıcı bir faktör olup olmadığını belirlemede her durumda yararlıdır.
DOM boyutunu nasıl küçültebilirim?
Web sitenizin HTML'sini gereksiz işaretlemeler açısından denetlemenin ötesinde, DOM boyutunu küçültmenin temel yolu 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 yere derin olabileceğine dair bir işaret olabilir:
<div>
<div>
<div>
<div>
<!-- Contents -->
</div>
</div>
</div>
</div>
Buna benzer kalıplar gördüğünüzde, muhtemelen DOM yapınızı düzleştirerek bunları basitleştirebilirsiniz. Böylece, DOM öğelerinin sayısı azalır ve muhtemelen sayfa stillerini basitleştirme fırsatı elde edersiniz.
DOM derinliği, kullandığınız çerçevelerin belirtisi de olabilir. Özellikle JSX'e dayananlar gibi bileşen tabanlı çerçeveler, birden fazla bileşeni bir üst kapsayıcı içine yerleştirmenizi gerektirir.
Ancak birçok çerçeve, parça olarak bilinen unsurları kullanarak bileşenleri iç içe yerleştirmekten kaçınmanızı sağlar. Özellik olarak parçalar sunan bileşen tabanlı çerçeveler aşağıdakileri 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 üzerindeki etkisiyle ilgili endişeleriniz varsa flexbox veya grid gibi daha modern (ve daha hızlı) düzen modlarını kullanmanın size faydası olabilir.
Göz önünde bulundurulması gereken diğer stratejiler
DOM ağacınızı düzeltmek ve gereksiz HTML öğelerini kaldırarak DOM'unuzu mümkün olduğunca küçük tutmak için çaba sarf etseniz bile, ağ hâlâ oldukça büyük olabilir ve kullanıcı etkileşimlerine göre değiştiği için çok fazla oluşturma işi başlatabilir. Bu pozisyondaysanız oluşturma işini sınırlandırmak için değerlendirebileceğiniz başka stratejiler de vardır.
Ek bir yaklaşım düşünün
Sayfa ilk oluşturulduğunda sayfanızın büyük bölümlerinin başlangıçta kullanıcı tarafından görülemediği bir konumda olabilirsiniz. Bu, başlangıçta DOM'un bu bölümlerini atlayarak HTML'yi geç yükleme fırsatı olabilir. Ancak bu bölümleri kullanıcı sayfanın başlangıçta gizli olan bölümlerini gerektiren bölümleriyle etkileşimde bulunduğunda ekleyin.
Bu yaklaşım, hem ilk yükleme sırasında hem de daha sonra faydalı olabilir. İlk sayfa yüklemesinde, oluşturma işlemini önceden daha az yaparsınız. Bu, başlangıçtaki HTML yükünün daha hafif olacağı ve daha hızlı oluşturulacağı anlamına gelir. Bu sayede, bu önemli dönemde etkileşimlerde ana ileti dizisinin dikkatini çekmek için daha az rekabetle yürütülmek üzere daha fazla fırsat elde edilir.
Sayfanın başlangıçta yükleme sırasında gizlenen birçok bölümü varsa bu, yeniden oluşturma çalışmasını tetikleyen diğer etkileşimleri de hızlandırabilir. Ancak diğer etkileşimler DOM'ye daha fazla ekledikçe, DOM sayfa yaşam döngüsü boyunca büyüdükçe oluşturma işi de artar.
Zaman içinde DOM'ye ekleme yapmak zor olabilir ve kendine özgü ödünleri vardır. Bu yönde ilerliyorsanız muhtemelen kullanıcı etkileşimine yanıt olarak sayfaya eklemeyi düşündüğünüz HTML'yi dolduracak verileri almak için ağ isteklerinde bulunuyorsunuzdur. İletim aşamasındaki ağ istekleri INP için sayılmaz ancak algılanan gecikmeyi artırabilir. Mümkünse, kullanıcıların bir şey olduğunu anlayabilmesi için verilerin getirildiğine dair bir yükleme döner simgesi veya başka bir gösterge gösterin.
CSS seçici karmaşıklığını sınırlayın
Tarayıcı, CSS'nizdeki seçicileri ayrıştırdığında, bu seçicilerin mevcut düzene nasıl uygulanıp uygulanmadığını ve uygulanıp uygulanmayacağını anlamak için DOM ağacını dolaşması gerekir. Bu seçiciler ne kadar karmaşık olursa, hem sayfayı ilk oluşturma işlemini gerçekleştirmek hem de bir etkileşim sonucunda sayfa değişirse daha fazla stil hesaplama ve düzen çalışması için tarayıcının yapması gereken işlem de o kadar fazla olur.
content-visibility özelliğini kullanın
CSS, ekran dışı DOM öğelerini gecikmeli olarak oluşturmak için etkili bir yol olan content-visibility özelliğini sunar. Öğeler görüntü alanına yaklaştıkça istek üzerine oluşturulurlar. content-visibility, ilk sayfa oluşturma işleminin önemli miktarda oluşturma işini ortadan kaldırmakla kalmaz, aynı zamanda kullanıcı etkileşimi sonucunda sayfa DOM'u değiştirildiğinde ekran dışı öğeler için iş oluşturma adımını da atlar.
Sonuç
DOM boyutunuzu yalnızca kesinlikle gerekli olanlara 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şi yapması için gereken süreyi azaltabilirsiniz. DOM boyutunu anlamlı bir şekilde küçültemeseniz bile, oluşturma işlerini DOM alt ağacıyla ayırmak için CSS kapsamı ve content-visibility CSS özelliği gibi bazı teknikler vardır.
Ne yaparsanız yapın, oluşturma işinin en aza indirildiği bir ortam oluşturarak sayfanızın etkileşimlere yanıt olarak yaptığı oluşturma işini azaltacaksınız. Sonuç olarak, kullanıcılarla etkileşime giren web siteniz kullanıcılara karşı daha duyarlı olacaktır. Bu da web sitenizin INP'sinin daha düşük olacağı ve kullanıcı deneyiminin daha iyi olacağı anlamına gelir.
Louis Reed'e ait Unsplash'tan hero resim.