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

HTML'nin JavaScript ile oluşturulması, sunucu tarafından gönderilen HTML'nin oluşturulmasından farklıdır ve bu, performansı etkileyebilir. Bu kılavuzdaki farkı ve özellikle etkileşimlerin söz konusu olduğu durumlarda 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ının yerleşik gezinme mantığını kullanan web sitelerinde varsayılan olarak çok iyi bir şekilde çalışır ve bazen "geleneksel sayfa yüklemeleri" olarak da adlandırılır. "tam gezinme" gibi. Bu tür web sitelerine bazen çok sayfalı uygulamalar (MPA'lar) da denir.

Bununla birlikte, geliştiriciler uygulama ihtiyaçlarına uygun olarak tarayıcı varsayılanları konusunda çalışmaya devam edebilir. Bu durum kesinlikle, JavaScript ile istemcide HTML/DOM'nin büyük bölümlerini dinamik olarak oluşturan tek sayfalık uygulama (SPA) kalıbını kullanan web siteleri için geçerlidir. İstemci tarafı oluşturma, bu tasarım kalıbının adıdır ve çok fazla çalışma yapılırsa web sitenizin Sonraki Boyamayla Etkileşim (INP) üzerinde etkileri olabilir.

Bu kılavuz, sunucu tarafından tarayıcıya gönderilen HTML'yi kullanma ile JavaScript ile istemcide oluşturma arasındaki farkı ve önemli anlarda yüksek etkileşim gecikmesine nasıl neden olabileceğini değerlendirmenize yardımcı olacaktır.

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

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

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

Bu sürecin son adımı kritik önem taşır. Aynı zamanda sunucu/tarayıcı exchange'indeki en temel performans optimizasyonlarından biridir ve akış olarak da bilinir. Sunucu mümkün olan en kısa sürede HTML göndermeye başlarsa ve tarayıcı tüm yanıtın gelmesini beklemezse, tarayıcı HTML'yi gelir gelmez işleyebilir.

Tarayıcıda olan çoğu şey gibi, HTML ayrıştırma da görevlerin içinde gerçekleşir. HTML, sunucudan tarayıcıya aktarıldığında, tarayıcı o HTML'nin ayrıştırılmasını optimize eder. Bunun için, akışın parçaları parçalar halinde sunuldukça tarayıcı bunu her seferinde bir kerede yapar. Sonuç olarak tarayıcı, her parçayı işledikten sonra düzenli olarak ana iş parçacığına veri verir ve bu da uzun görevlerden kaçınır. Bu, bir sayfayı kullanıcıya sunmak için gerekli olan artımlı oluşturma çalışmasının yanı sıra sayfanın önemli başlatma döneminde oluşabilecek kullanıcı etkileşimlerinin işlenmesi de dahil olmak üzere HTML ayrıştırılırken başka çalışmaların da yapılabileceği anlamına gelir. Bu yaklaşım, sayfanın daha iyi bir Sonraki Boyamayla Etkileşim (INP) puanı anlamına gelir.

Peki, bunun anlamı ne? Sunucudan HTML akışı gerçekleştirdiğinizde, HTML'nin artımlı ayrıştırılması ve oluşturulmasını ve ana iş parçacığına ücretsiz olarak otomatik veri verilmesini elde edersiniz. Bunu istemci taraflı oluşturmada yaşamazsınız.

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

Bir sayfaya yapılan her gezinme isteği, sunucu tarafından bir miktar HTML sağlanmasını gerektirirken, bazı web siteleri SPA modelini kullanır. Bu yaklaşımda genellikle sunucu tarafından sağlanan HTML'nin minimum başlangıç yükü kullanılır. Ancak daha sonra istemci, bir sayfanın ana içerik alanını sunucudan getirilen verilerden oluşturulan HTML ile doldurur. Sonraki gezinmeler - bazen "yumuşak gezinmeler" olarak da adlandırılır bu örnekte—sayfayı yeni HTML ile doldurmak için tamamen JavaScript tarafından işlenir.

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

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

1. innerHTML özelliği, tarayıcının DOM olarak ayrıştırdığı bir dize aracılığıyla mevcut bir öğedeki içeriği 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 bunu ayrıştırır). Bununla birlikte, çeşitli nedenlerden dolayı, document.write kullanımı kesinlikle önerilmez.

İstemci taraflı JavaScript üzerinden HTML/DOM oluşturmanın önemli sonuçları olabilir:

• Gezinme isteğine yanıt olarak sunucu tarafından akış yapılan HTML'den farklı olarak, istemcideki JavaScript görevleri otomatik olarak bölünmez ve bu da uzun görevlerin ana iş parçacığını engellemesine neden olabilir. Bu, istemcide tek seferde çok fazla HTML/DOM oluşturuyorsanız sayfanızın INP değerinin olumsuz etkilenebileceği anlamına gelir.
• Başlatma sırasında istemcide HTML oluşturulursa içinde başvurulan kaynaklar tarayıcı önceden yükleme tarayıcısı tarafından keşfedilemez. Bu, sayfanın Largest Contentful Paint (LCP) değerini kesinlikle olumsuz etkiler. Bu bir çalışma zamanı performansı sorunu olmasa da (önemli kaynakları getirirken ağ gecikmesi sorunudur), web sitenizin LCP'sinin bu temel tarayıcı performans optimizasyonundan etkilenmesini istemezsiniz.

İstemci taraflı oluşturma işleminin performans üzerindeki etkisi hakkında neler yapabilirsiniz?

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

Sebep ne olursa olsun, yeniden eskiye dönmenize yardımcı olması için deneyebileceğiniz bazı olası nedenleri aşağıda bulabilirsiniz.

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

Daha önce belirtildiği gibi, tarayıcı sunucudan HTML'yi varsayılan olarak çok performanslı bir şekilde işler. HTML'nin ayrıştırılmasını ve oluşturulmasını uzun görevlerden kaçınacak şekilde ayırır ve toplam ana iş parçacığı süresini optimize eder. Bu durumda Toplam Engelleme Süresi (TBT) daha düşük olur ve TBT, INP ile yakından ilişkilidir.

Web sitenizi oluşturmak için ön uç çerçevesinden yararlanıyor olabilirsiniz. Öyleyse, sunucuda bileşen HTML'sini oluşturduğunuzdan emin olmalısınız. Bu, web sitenizin gerektireceği ilk istemci tarafı oluşturma miktarını sınırlandırır ve daha iyi bir deneyim sağlar.

• React için sunucuda HTML oluşturmak için Sunucu DOM API'yi kullanmanız gerekir. Ancak şunu unutmayın: Geleneksel sunucu tarafı oluşturma yöntemi, eşzamanlı bir yaklaşım kullanır. Bu yöntem, İlk Bayt'a Kadar Geçen Süre (TTFB) süresinin yanı sıra İlk Zengin İçerikli Boyama (FCP) ve LCP gibi sonraki metriklerin kullanılmasına neden olabilir. Sunucunun mümkün olan en kısa sürede tarayıcıya HTML akışı başlatabilmesi amacıyla, mümkün olduğunda 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 uygulama sunar. HTML'yi sunucuda otomatik olarak oluşturmanın yanı sıra, kullanıcı bağlamına göre (kimlik doğrulama gibi) değişmeyen sayfalar için statik olarak HTML de oluşturabilir.
• Vue, varsayılan olarak istemci tarafında oluşturma da gerçekleştirir. Ancak React gibi Vue da bileşen HTML'nizi sunucuda oluşturabilir. Mümkün olduğunda bu sunucu tarafı API'lerden yararlanın veya en iyi uygulamaların uygulanmasını kolaylaştırmak için Vue projeniz için daha üst düzey bir soyutlama oluşturmayı düşünün.
• İnce ayar, varsayılan olarak HTML'yi sunucuda oluşturur. Bununla birlikte, bileşen kodunuzun tarayıcıya özel ad alanlarına erişmesi gerekiyorsa (örneğin, window) söz konusu bileşenin HTML'sini sunucuda oluşturamayabilirsiniz. Gereksiz istemci taraflı oluşturmaya neden olmamak için mümkün olduğunda alternatif yaklaşımları keşfedin. SvelteKit, yani Next.js olarak React gibi, Svelte projelerine mümkün olduğunca çok sayıda en iyi uygulama dahil edilir. Böylece, tek başına Svelte kullanan projelerde çıkabilecek tuzaklardan kaçınabilirsiniz.

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

DOM'ler büyük olduğunda, bunları oluşturmak için gereken işleme süresi artma eğilimindedir. Web siteniz ister tam kapsamlı bir SPA olsun ister bir MPA etkileşiminin sonucu olarak mevcut bir DOM'ye yeni düğümler yerleştiriyor olsun, bu DOM'leri mümkün olduğunca küçük tutmayı düşünün. Bu, istemci tarafında oluşturma sırasında ilgili HTML'yi görüntülemek için gereken süreyi azaltarak web sitenizin INP değerinin daha düşük olmasını sağlar.

Akış hizmeti çalışanı mimarisini göz önünde bulundurun

Bu, her kullanım alanında kolayca çalışmayabilecek gelişmiş bir tekniktir. Ancak MPA'nızı, kullanıcılar bir sayfadan diğerine geçerken anında yüklendiği hissini veren bir web sitesine dönüştürebilir. CacheStorage'te web sitenizin statik bölümlerini önbelleğe almak için hizmet çalışanı kullanabilir ve sayfanın geri kalanını sunucudan almak için ReadableStream API'yi kullanabilirsiniz.

Bu tekniği başarılı bir şekilde kullanırsanız istemcide HTML oluşturmazsınız, ancak içerik kısmilerinin önbellekten anında yüklenmesi sitenizin hızlı yüklendiği izlenimini verir. Bu yaklaşımı kullanan web siteleri, istemci taraflı oluşturma işleminin dezavantajları olmadan neredeyse bir SPA gibi hissedilebilir. 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. Ona eklenir. Bunun Workbox ile nasıl gerçekleştirileceği hakkında daha fazla bilgi için Akışlarla daha hızlı çok sayfalı uygulamalar başlıklı makaleyi okuyun.

Sonuç

Web sitenizin HTML'yi alma ve 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üvenmeniz durumunda, ücretsiz olarak birçok şey elde edersiniz: uzun görevleri önlemek için artımlı ayrıştırma ve oluşturma ve ana iş parçacığına otomatik veri sağlama.

İstemci tarafı HTML oluşturma, birçok durumda önlenebilecek bir dizi potansiyel performans sorununa yol açar. Ancak, her bir web sitesinin gereklilikleri nedeniyle, her zaman% 100 bundan tamamen kaçınılamaz. Aşırı istemci sitesi oluşturma işleminden kaynaklanabilecek olası uzun görevleri azaltmak için web sitenizin HTML'sini mümkün olduğunca sunucudan gönderdiğinizden emin olun, DOM boyutlarınızı istemcide oluşturulması gereken HTML için mümkün olduğunca küçük tutun ve HTML'nin istemciye teslimini hızlandırmak amacıyla alternatif mimarileri değerlendirin ve tarayıcının sunucudan yüklenen HTML için sağladığı artımlı ayrıştırma ve oluşturma işlemlerinden yararlanın.

Web sitenizin istemci taraflı oluşturma oranını mümkün olduğunca minimum düzeye indirebilirseniz yalnızca web sitenizin INP'sini değil, LCP, TBT ve hatta bazı durumlarda TTFB gibi diğer metrikleri de iyileştirmiş olursunuz.

Maik Jonietz'in hazırladığı Unsplash'teki hero resim.