HTML ve etkileşim için istemci tarafı oluşturma

bookmark_border Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

JavaScript ile HTML oluşturma, sunucu tarafından gönderilen HTML'yi oluşturmaktan farklıdır ve performansı etkileyebilir. Bu kılavuzda farkı ve web sitenizin oluşturma performansını korumak için neler yapabileceğinizi (özellikle etkileşimler söz konusu olduğunda) öğrenin.

Jeremy Wagner

HTML'nin ayrıştırılması ve oluşturulması, tarayıcının yerleşik gezinme mantığını kullanan web siteleri için tarayıcıların varsayılan olarak çok iyi yaptığı bir işlemdir. Bu işlem bazen "geleneksel sayfa yüklemeleri" veya "sert gezinmeler" olarak da adlandırılır. Bu tür web sitelerine bazen çok sayfalı uygulamalar (MPA'lar) denir.

Ancak geliştiriciler, uygulama ihtiyaçlarına uygun şekilde tarayıcı varsayılanlarını kullanabilir. Bu durum, istemcide JavaScript ile HTML/DOM'un büyük bir bölümünü dinamik olarak oluşturan tek sayfalık uygulama (SPA) kalıbını kullanan web siteleri için geçerlidir. Bu tasarım kalıbına istemci tarafında oluşturma adı verilir ve ilgili iş çok fazlaysa web sitenizin Interaction to Next Paint (INP) metriğini etkileyebilir.

Bu kılavuz, sunucu tarafından tarayıcıya gönderilen HTML'yi kullanmak ile JavaScript ile istemcide oluşturmak arasındaki farkı değerlendirmenize ve ikincisinin önemli anlarda nasıl yüksek etkileşim gecikmesine yol açabileceğini anlamanıza yardımcı olacaktır.

Tarayıcı, sunucu tarafından sağlanan HTML'yi nasıl oluşturur?

Geleneksel sayfa yüklemelerinde kullanılan gezinme düzeni, her gezinmede sunucudan HTML alınmasını içerir. Tarayıcınızın adres çubuğuna bir URL girerseniz veya bir MPA'daki bağlantıyı tıklarsanız aşağıdaki etkinlikler dizisi gerçekleşir:

1. Tarayıcı, sağlanan URL için bir gezinme isteği gönderir.
2. Sunucu, HTML'yi parçalar halinde yanıtlar.

Bunların son adımı önemlidir. Bu teknik, sunucu/tarayıcı değişimindeki en temel performans optimizasyonlarından biridir ve akış olarak bilinir. Sunucu HTML'yi mümkün olan en kısa sürede göndermeye başlayabilirse ve tarayıcı yanıtın tamamının gelmesini beklemezse HTML'yi geldiği gibi parçalar halinde işleyebilir.

Tarayıcıda gerçekleşen çoğu işlem gibi, HTML ayrıştırma da görevler içinde gerçekleşir. HTML, sunucudan tarayıcıya aktarıldığında tarayıcı, bu akışın parçaları halinde gelmesiyle birlikte HTML'nin ayrıştırılmasını biraz biraz yaparak optimize eder. Sonuç olarak tarayıcı, her bir parçayı işledikten sonra ana ileti dizisine düzenli olarak geçiş yapar. Bu sayede uzun görevler önlenir. Bu, HTML ayrıştırılırken diğer işlemlerin yapılabileceği anlamına gelir. Örneğin, sayfayı kullanıcıya sunmak için gereken artımlı oluşturma işlemi ve sayfanın kritik başlangıç döneminde gerçekleşebilecek kullanıcı etkileşimlerinin işlenmesi. Bu yaklaşım, sayfanın daha iyi bir Interaction to Next Paint (INP) puanı almasını sağlar.

Peki, bunun anlamı ne? Sunucudan HTML yayınladığınızda HTML'nin artımlı olarak ayrıştırılması ve oluşturulmasının yanı sıra ana iş parçacığına otomatik olarak geçiş yapma avantajlarından ücretsiz olarak yararlanabilirsiniz. İstemci taraflı oluşturmada bu özellikten yararlanamazsınız.

Tarayıcı, JavaScript tarafından sağlanan HTML'yi nasıl oluşturur?

Bir sayfaya yapılan her gezinme isteği için sunucu tarafından belirli bir miktarda HTML sağlanması gerekirken bazı web siteleri SPA kalıbını kullanır. Bu yaklaşımda genellikle sunucu tarafından minimum düzeyde bir ilk HTML yükü sağlanır. Ancak daha sonra istemci, sunucudan alınan verilerden oluşturulan HTML ile sayfanın ana içerik alanını doldurur. Sonraki gezinmeler (bu durumda bazen "yumuşak gezinmeler" olarak da adlandırılır) sayfayı yeni HTML ile doldurmak için tamamen JavaScript tarafından işlenir.

İstemci tarafında oluşturma, HTML'nin JavaScript aracılığıyla DOM'a dinamik olarak eklendiği daha sınırlı durumlarda SPA olmayan sitelerde de gerçekleşebilir.

JavaScript aracılığıyla HTML oluşturmanın veya DOM'a ekleme yapmanın birkaç yaygın yolu vardır:

1. innerHTML özelliği, tarayıcının DOM'a ayrıştırdığı bir dize aracılığıyla mevcut bir öğedeki içeriği ayarlamanıza olanak tanır.
2. document.createElement yöntemi, tarayıcı HTML ayrıştırması kullanmadan DOM'a eklenecek yeni öğeler oluşturmanıza olanak tanır.
3. document.write yöntemi, dokümana HTML yazmanıza olanak tanır (tarayıcı da bunu 1. yaklaşımdaki gibi ayrıştırır). Ancak çeşitli nedenlerden dolayı document.write kullanımı kesinlikle önerilmez.

İstemci tarafı JavaScript ile HTML/DOM oluşturmanın sonuçları önemli olabilir:

• Sunucu tarafından bir gezinme isteğine yanıt olarak yayınlanan HTML'nin aksine, istemcideki JavaScript görevleri otomatik olarak parçalara ayrılmaz. Bu durum, ana iş parçacığını engelleyen uzun görevlere neden olabilir. Bu, istemcide aynı anda çok fazla HTML/DOM oluşturuyorsanız sayfanızın INP'sinin olumsuz etkilenebileceği anlamına gelir.
• Başlangıç sırasında istemcide HTML oluşturulursa bu HTML'de referans verilen kaynaklar tarayıcı önceden yükleme tarayıcısı tarafından keşfedilmez. Bu durum, sayfanın Largest Contentful Paint (LCP) değeri üzerinde kesinlikle olumsuz bir etki yaratır. Bu, çalışma zamanı performansıyla ilgili bir sorun olmasa da (bunun yerine, önemli kaynakların getirilmesinde ağ gecikmesiyle ilgili bir sorundur) bu temel tarayıcı performansı optimizasyonunu atlayarak web sitenizin en büyük içerik öğesinin boyanma süresinin etkilenmesini istemezsiniz.

İstemci taraflı oluşturmanın performans üzerindeki etkisi hakkında yapabilecekleriniz

Web siteniz büyük ölçüde istemci tarafında oluşturmaya bağlıysa ve alan verilerinizde düşük INP değerleri gözlemlediyseniz istemci tarafında oluşturmanın bu sorunla bir ilgisi olup olmadığını merak ediyor olabilirsiniz. Örneğin, web siteniz bir SPA ise alan verileriniz, önemli oluşturma çalışmasından sorumlu etkileşimleri ortaya çıkarabilir.

Nedeni ne olursa olsun, işleri tekrar yoluna koymanıza yardımcı olacak bazı olası nedenleri aşağıda bulabilirsiniz.

Sunucudan mümkün olduğunca fazla HTML sağlayın

Daha önce de belirtildiği gibi, tarayıcı varsayılan olarak sunucudan gelen HTML'yi çok verimli bir şekilde işler. Bu, HTML'nin ayrıştırılmasını ve oluşturulmasını uzun görevlerden kaçınacak şekilde böler ve toplam ana iş parçacığı süresini optimize eder. Bu durum, Total Blocking Time (TBT) değerinin düşmesine neden olur. TBT, INP ile güçlü bir şekilde ilişkilidir.

Web sitenizi oluşturmak için bir ön uç çerçevesi kullanıyor olabilirsiniz. Bu durumda, bileşen HTML'sini sunucuda oluşturduğunuzdan emin olmanız gerekir. Bu, web sitenizin gerektireceği ilk istemci tarafı oluşturma miktarını sınırlar ve daha iyi bir deneyim sunar.

• React için sunucuda HTML oluşturmak üzere Server DOM API'yi kullanmanız gerekir. Ancak sunucu tarafında oluşturma için kullanılan geleneksel yöntemin senkron bir yaklaşım kullandığını unutmayın. Bu durum, Time to First Byte (TTFB) süresinin uzamasına ve İlk Zengin İçerikli Boyama (FCP) ve LCP gibi sonraki metriklerin etkilenmesine neden olabilir. Mümkün olduğunda, sunucunun HTML'yi tarayıcıya en kısa sürede yayınlamaya başlaması için Node.js veya diğer JavaScript çalışma zamanları için akış API'lerini kullandığınızdan emin olun. React tabanlı bir çerçeve olan Next.js, varsayılan olarak birçok en iyi uygulamayı sunar. Sunucuda HTML'yi otomatik olarak oluşturmanın yanı sıra, kullanıcı bağlamına (ör. kimlik doğrulama) göre değişmeyen sayfalar için HTML'yi statik olarak da oluşturabilir.
• Vue da varsayılan olarak istemci taraflı oluşturma gerçekleştirir. Ancak Vue, React gibi bileşeninizin HTML'sini sunucuda da oluşturabilir. Mümkün olduğunda bu sunucu tarafı API'lerinden yararlanın veya en iyi uygulamaların uygulanmasını kolaylaştırmak için Vue projenizde daha üst düzey bir soyutlama kullanmayı düşünün.
• Svelte, varsayılan olarak sunucuda HTML oluşturur. Ancak bileşen kodunuzun tarayıcıya özel ad alanlarına (ör. window) erişmesi gerekiyorsa bu bileşenin HTML'sini sunucuda oluşturamayabilirsiniz. Mümkün olan her yerde alternatif yaklaşımları keşfederek gereksiz istemci tarafı oluşturmaya neden olmamaya çalışın. Next.js'in React için yaptığı gibi Svelte için geliştirilen SvelteKit, Svelte projelerinize mümkün olduğunca çok sayıda en iyi uygulamayı yerleştirir. Böylece, yalnızca Svelte kullanılan projelerde olası tuzaklardan kaçınabilirsiniz.

İstemcide oluşturulan DOM düğümlerinin miktarını sınırlayın.

DOM'lar büyük olduğunda, bunları oluşturmak için gereken işlem miktarı artar. Web siteniz tam teşekküllü bir SPA veya MPA için etkileşim sonucunda mevcut bir DOM'a yeni düğümler yerleştiriyorsa bu DOM'ları mümkün olduğunca küçük tutmayı düşünün. Bu, HTML'nin görüntülenmesi için istemci tarafında oluşturma sırasında gereken işi azaltmaya yardımcı olur ve web sitenizin INP'sinin daha düşük kalmasına yardımcı olabilir.

Akış hizmeti çalışanı mimarisini kullanmayı düşünün

Bu, her kullanım alanında kolayca çalışmayabilecek gelişmiş bir tekniktir. Ancak kullanıcılar bir sayfadan diğerine geçerken MPA'nızı anında yükleniyormuş gibi görünen bir web sitesine dönüştürebilir. Web sitenizin statik kısımlarını CacheStorage içinde önbelleğe almak için bir hizmet çalışanı kullanabilir, sayfanın HTML'sinin geri kalanını sunucudan getirmek için ReadableStream API'sini kullanabilirsiniz.

Bu tekniği başarıyla kullandığınızda istemcide HTML oluşturmazsınız ancak içeriğin önbellekten anında yüklenmesi, sitenizin hızlı yüklendiği izlenimini verir. Bu yaklaşımı kullanan web siteleri, istemci tarafı oluşturmanın dezavantajları olmadan neredeyse bir SPA gibi görünebilir. Ayrıca, sunucudan istediğiniz HTML miktarını da azaltır.

Kısacası, akış hizmeti çalışanı mimarisi, tarayıcının yerleşik gezinme mantığının yerini almaz, bu mantığa eklenir. Workbox ile bunu nasıl yapacağınız hakkında daha fazla bilgi için Akışlarla daha hızlı çok sayfalı uygulamalar başlıklı makaleyi inceleyin.

Sonuç

Web sitenizin HTML'yi alıp oluşturma şekli performansı etkiler. Web sitenizin çalışması için gereken HTML'nin tamamını (veya büyük bir kısmını) göndermesi için sunucuya güvendiğinizde, ücretsiz olarak birçok avantaj elde edersiniz: artımlı ayrıştırma ve oluşturma, uzun görevlerden kaçınmak için ana iş parçacığına otomatik olarak geçiş.

İstemci tarafında HTML oluşturma, birçok durumda önlenebilecek bir dizi olası performans sorununa yol açar. Ancak her web sitesinin kendi şartları nedeniyle bu durum her zaman% 100 önlenemez. Aşırı istemci tarafı oluşturma işleminden kaynaklanabilecek olası uzun görevleri azaltmak için mümkün olduğunda web sitenizin HTML'sinin büyük bir kısmını sunucudan gönderdiğinizden emin olun, istemcide oluşturulması gereken HTML için DOM boyutlarınızı mümkün olduğunca küçük tutun ve tarayıcının sunucudan yüklenen HTML için sağladığı artımlı ayrıştırma ve oluşturma işlemlerinden yararlanırken HTML'nin istemciye teslimini hızlandırmak için alternatif mimarileri göz önünde bulundurun.

Web sitenizin istemci tarafı oluşturma işlemini mümkün olduğunca az yapacak şekilde ayarlarsanız yalnızca web sitenizin INP'sini değil, aynı zamanda LCP, TBT gibi diğer metrikleri ve bazı durumlarda TTFB'yi de iyileştirirsiniz.

Maik Jonietz tarafından Unsplash'ten alınan lokomotif resim.