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

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

Jeremy Wagner

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

Bununla birlikte, geliştiriciler uygulama gereksinimlerine uygun olarak tarayıcı varsayılan ayarlarını geçici olarak değiştirebilir. Bu durum kesinlikle, JavaScript ile istemcide HTML/DOM'un büyük bölümlerini dinamik olarak oluşturan tek sayfalı uygulama (SPA) kalıbını kullanan web siteleri için geçerlidir. Bu tasarım kalıbının adı istemci tarafı oluşturmadır ve çok fazla işlem yapıldığında web sitenizin Sonraki Boyamayla Etkileşimi (INP) etkileyebilir.

Bu kılavuz, sunucu tarafından tarayıcıya gönderilen HTML'yi kullanma ile istemcide JavaScript ile oluşturma arasındaki farkı değerlendirmenize ve ikinci yöntemin önemli anlarda yüksek etkileşim gecikmesine nasıl 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 kalıbı, her gezinmede sunucudan HTML alınmasını içerir. Tarayıcınızın adres çubuğuna bir URL girerseniz veya MPA'da bir 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, parçalar halinde HTML ile yanıt verir.

Bu adımların son adımı önemlidir. Aynı zamanda sunucu/tarayıcı exchange'indeki en temel performans optimizasyonlarından biridir ve akış olarak bilinir. Sunucu en kısa sürede HTML göndermeye başlayabilirse ve tarayıcı yanıtın tamamının gelmesini beklemezse, tarayıcı HTML'yi geldikçe parçalar halinde işleyebilir.

Chrome Geliştirici Araçları'nın performans panelinde görselleştirilmiş olarak sunucu tarafından sağlanan HTML'nin ayrıştırılması ve oluşturulması. HTML'nin ayrıştırılması ve oluşturulmasıyla ilgili görevler parçalara ayrılır.

Tarayıcıda olan çoğu şey gibi, HTML ayrıştırması görevler içinde gerçekleşir. HTML, sunucudan tarayıcıya aktarılırken, tarayıcı, akışın parçaları parçalara ayrılırken, bu işlemi her seferinde biraz yaparak bu HTML'nin ayrıştırılmasını optimize eder. Sonuç olarak tarayıcı, her parçayı işledikten sonra düzenli olarak ana iş parçacığına veri verir, bu da uzun görevleri önler. Bu, HTML ayrıştırılırken bir sayfayı kullanıcıya sunmak için gerekli olan artımlı oluşturma işinin yanı sıra sayfanın kritik başlatma döneminde gerçekleşebilecek kullanıcı etkileşimlerinin işlenmesi de dahil başka işlerin de gerçekleşebileceği anlamına gelir. Bu yaklaşım, sayfanın daha iyi bir Sonraki Boyamayla Etkileşim (INP) puanı elde edilmesini sağlar.

Peki, bunun anlamı ne? Sunucudan HTML akışı oluşturduğunuzda, HTML'nin kademeli olarak ayrıştırılıp oluşturulmasının yanı sıra otomatik olarak ana iş parçacığını ücretsiz olarak elde edersiniz. İstemci taraflı oluşturma söz konusu olduğunda bu tür bir hata meydana gelmez.

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 bir miktar HTML sağlanması gerekir. Ancak bazı web siteleri SPA modelini kullanır. Bu yaklaşım genellikle sunucu tarafından sağlanan HTML'nin minimum bir ilk yükünü içerir, ancak daha sonra istemci, bir sayfanın ana içerik alanını sunucudan getirilen verilerden derlenen HTML ile doldurur. Bu durumda "soft gezinme" olarak da anılan sonraki gezinmeler, sayfayı yeni HTML ile doldurmak için tamamen JavaScript tarafından işlenir.

İstemci tarafı oluşturma, HTML'nin DOM'ye JavaScript aracılığıyla dinamik bir şekilde eklendiği daha sınırlı durumlarda, SPA haricindeki durumlarda da gerçekleşebilir.

JavaScript aracılığıyla HTML oluşturmak veya DOM'ye ekleme yapmak için yaygın olarak kullanılan birkaç yöntem vardır:

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

Chrome Geliştirici Araçları'nın performans panelinde görselleştirilmiş haliyle, istemcide HTML'nin JavaScript aracılığıyla ayrıştırılması ve oluşturulması. URL'nin ayrıştırılması ve oluşturulmasıyla ilgili görevler parçalanmamıştır ve bu da ana iş parçacığını engelleyen uzun bir görevle sonuçlanır.

İstemci tarafı JavaScript aracılığıyla HTML/DOM oluşturmanın önemli sonuçları olabilir:

• Bir gezinme isteğine yanıt olarak sunucu tarafından akış şeklinde yayınlanan HTML'den farklı olarak, istemcideki JavaScript görevleri otomatik olarak parçalanmaz. Bu, ana iş parçacığını engelleyen uzun görevlere neden olabilir. Bu, istemcide tek seferde çok fazla HTML/DOM oluşturmanız durumunda, sayfanızın INP'sinin olumsuz etkilenebileceği anlamına gelir.
• Başlatma sırasında istemcide HTML oluşturulursa istemcide başvurulan kaynaklar tarayıcı ön yükleme tarayıcısı tarafından keşfedilmeyecek. Bunun, sayfanın Largest Contentful Paint (LCP) özelliği üzerinde olumsuz bir etkisi olacağı kesin. Bu, çalışma zamanı performansı ile ilgili bir sorun olmasa da (önemli kaynakları getirmede yaşanan ağ gecikmesinden kaynaklanmaktadır), web sitenizin LCP'sinin bu temel tarayıcı performansı optimizasyonundan etkilenmesini istemezsiniz.

İstemci tarafı oluşturmanın performansa etkisi hakkında ne yapabilirsiniz?

Web siteniz büyük ölçüde istemci taraflı oluşturma kullanıyorsa ve alan verilerinizde düşük INP değerleri gözlemlediyseniz istemci tarafı oluşturmanın sorunla bir ilgisi olup olmadığını merak ediyor olabilirsiniz. Örneğin, web siteniz bir SPA ise alan verileriniz, önemli ölçüde oluşturma işinden sorumlu etkileşimleri ortaya çıkarabilir.

Nedeni ne olursa olsun, bu olası nedenleri araştırarak işleri yoluna sokmanıza yardımcı olabilirsiniz.

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

Daha önce de belirtildiği gibi tarayıcı, sunucudaki HTML'yi varsayılan olarak çok etkili bir şekilde işler. Bu kod, uzun görevleri önleyecek ve toplam ana iş parçacığı süresini optimize edecek şekilde HTML'nin ayrıştırılmasını ve oluşturulmasını sağlar. Bu durum, Toplam Engelleme Süresi'nin (TBT) azalmasına neden olur. TBT ise INP ile güçlü bir ilişki içindedir.

Web sitenizi oluşturmak için bir ön uç çerçevesinden yararlanıyor olabilirsiniz. Bu durumda, sunucuda bileşen HTML'sini oluşturduğunuzdan emin olmak istersiniz. Bu sayede web sitenizin ilk istemci tarafı oluşturma işlemi için gereken miktarı sınırlanacak ve daha iyi bir deneyim sağlanacaktır.

• React için sunucuda HTML oluşturmak amacıyla Sunucu DOM API'sini kullanmak istersiniz. Ancak unutmayın: Geleneksel sunucu tarafı oluşturma yöntemi, eşzamanlı bir yaklaşımdan yararlanır. Bu da İlk Bayt Süresi'nin (TTFB) yanı sıra İlk Zengin İçerikli Boyama (FCP) ve LCP gibi sonraki metriklerin daha uzun olmasına neden olabilir. Mümkün olduğunda Node.js veya diğer JavaScript çalışma zamanları için akış API'larını kullandığınızdan emin olun. Böylece, sunucu en kısa sürede tarayıcıya HTML akışı yapmaya başlayabilir. React tabanlı bir çerçeve olan Next.js varsayılan olarak birçok en iyi uygulama sunar. Sunucuda otomatik olarak HTML oluşturmaya ek olarak, kullanıcı bağlamına (kimlik doğrulama gibi) göre değişmeyen sayfalar için statik olarak da HTML oluşturabilir.
• Vue, varsayılan olarak istemci taraflı oluşturma işlemi de gerçekleştirir. Bununla birlikte, Tepki'de olduğu gibi Vue, bileşen HTML'nizi sunucuda da oluşturabilir. Mümkün olduğunda bu sunucu tarafı API'lerden yararlanın veya en iyi uygulamaların daha kolay uygulanması için Vue projeniz için daha üst düzey bir özet kullanmayı düşünün.
• Svelte, varsayılan olarak HTML'yi sunucuda oluşturur. Ancak bileşen kodunuzun tarayıcıya özel ad alanlarına (örneğin, window) erişmesi gerekiyorsa bu bileşenin HTML'sini sunucuda oluşturamayabilirsiniz. İstemci taraflı gereksiz oluşturma işlemlerine neden olmamak için mümkün olduğunda alternatif yaklaşımları keşfedin. SvelteKit (Next.js to React olduğu Svelte ise Svelte'e göre) pek çok en iyi uygulamayı Svelte projelerinize mümkün olduğunca ekler. Böylece yalnızca Svelte'ı kullanan projelerde karşılaşabileceğiniz tehlikelerden kaçınabilirsiniz.

Önemli nokta: Uygulamanız bu çerçevelerden birini kullanıyorsa ve istemcide etkileşim gerekiyorsa bunların etkileşimli olabilmesi için yine de bileşenlerinizi istemciye aktarmanız gerekir. HTML oluşturmaya yönelik farklı yaklaşımların kapsamlı bir değerlendirmesi ve istemcide bileşen hidrasyonunun performansı göz önünde bulundurarak nasıl yapılacağı konusunda bazı öneriler için Web'de oluşturma konusunu okuyun.

İstemcide oluşturulan DOM düğümlerinin sayısını sınırla

DOM'ler büyük olduğunda, bunları oluşturmak için gereken işleme artma eğilimindedir. Web siteniz ister tam kapsamlı bir SPA olsun ister bir MPA etkileşiminin sonucu olarak mevcut bir DOM'a yeni düğümler ekliyor olsun, bu DOM'leri mümkün olduğunca küçük tutmanız önerilir. Bu, web sitenizin INP değerinin daha düşük kalmasına yardımcı olacak şekilde, istemci tarafında oluşturma sırasında bu HTML'yi görüntülemek için gereken iş yükünü azaltır.

Daha fazla bilgi edinmek için okuyun: DOM boyutu ve etkileşim.

Akış hizmeti çalışanı mimarisini 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üklendiğini hissettiren bir web sitesine dönüştürebilir. CacheStorage ürününde web sitenizin statik kısımlarını önbelleğe almak için Service Worker'ı kullanabilir, sayfanın geri kalan HTML'sini sunucudan almak için ReadableStream API'yi kullanabilirsiniz.

Bu tekniği başarıyla kullandığınızda, istemcide HTML oluşturmuş olmazsınız. Ancak içeriğin kısmi bölümlerinin önbellekten anında yüklenmesi, sitenizin hızlı yüklendiği izlenimini verir. Bu yaklaşımı kullanan web siteleri neredeyse bir SPA gibi hissedebilir, ancak istemci taraflı oluşturmanın olumsuz hiçbir etkisi olmaz. 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 yerine geçmez, ona eklenir. Bunun Çalışma Kutusu ile nasıl gerçekleştirileceği hakkında daha fazla bilgi edinmek için Akışlarla daha hızlı çok sayfalı uygulamalar başlıklı makaleyi okuyun.

Sonuç

Web sitenizin HTML'yi alma ve oluşturma biçimi performansı etkiler. Web sitenizin çalışması için gereken HTML'nin tümünü (veya büyük kısmını) göndermek için sunucuya başvurduğunuzda, ücretsiz olarak çok fazla şey alırsınız: artımlı ayrıştırma ve oluşturma ve uzun görevlerden kaçınmak için ana iş parçacığına otomatik olarak verim.

İstemci tarafı HTML oluşturma, çoğu durumda önlenebilecek bir dizi potansiyel performans sorunu sunar. Ancak, her web sitesinin gereksinimleri nedeniyle, bu durum her zaman kaçınılmazdır. Aşırı sayıda istemci sitesi oluşturulmasından kaynaklanabilecek olası uzun görevleri azaltmak amacıyla, mümkün olduğunda web sitenizin HTML'sinin mümkün olduğunca büyük bir kısmını sunucudan gönderdiğinizden emin olun, istemcide oluşturulması gereken HTML için DOM boyutlarını mümkün olduğunca küçük tutun ve HTML'nin istemciye teslimini hızlandırmak için alternatif mimarileri değerlendirin. Aynı zamanda, tarayıcının sunucudan yüklenmesi için sağlanan artımlı ayrıştırma ve oluşturma özelliğinden yararlanın.

Web sitenizin istemci tarafı oluşturmanın mümkün olduğunca asgari düzeyde olmasını sağlayabilirseniz yalnızca web sitenizin INP'sini değil, LCP, TBT gibi diğer metrikleri ve hatta bazı durumlarda TTFB'nizi de iyileştirmiş olursunuz.

Maik Jonietz'in Unsplash oyunundan hero resim.