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

HTML'yi JavaScript ile oluşturma, sunucu tarafından gönderilen HTML'yi oluşturmaktan farklıdır ve performansı etkileyebilir. Bu kılavuzda iki yöntem arasındaki 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'yi ayrıştırma ve oluşturma, tarayıcıların varsayılan olarak çok iyi yaptığı bir işlemdir. Bu işlem, tarayıcının yerleşik gezinme mantığını kullanan web siteleri için (bazen "geleneksel sayfa yüklemeleri" veya "zorlu gezinmeler" olarak adlandırılır) geçerlidir. Bu tür web sitelerine bazen çok sayfalı uygulamalar (MPA'lar) da denir.

Ancak geliştiriciler, uygulama ihtiyaçlarına uygun şekilde tarayıcı varsayılanlarını atlayabilir. Bu durum, istemcide HTML/DOM'un büyük bölümlerini JavaScript ile dinamik olarak oluşturan tek sayfalı uygulama (SPA) desenini kullanan web siteleri için kesinlikle geçerlidir. Bu tasarım kalıbının adı istemci tarafı oluşturmadır ve ilgili çalışma aşırıysa web sitenizin Interaction to Next Paint (INP) değerini etkileyebilir.

Bu kılavuz, sunucu tarafından tarayıcıya gönderilen HTML'yi kullanma ile JavaScript ile istemcide oluşturma arasındaki farkı değerlendirmenize ve ikincisinin önemli anlarda yüksek etkileşim gecikmesine neden olabileceğ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 gezinme işleminde sunucudan HTML alınmasını içerir. Tarayıcınızın adres çubuğuna bir URL girerseniz veya MPA'daki bir bağlantıyı tıklarsanız aşağıdaki etkinlik 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.

Bu adımların sonuncusu çok önemlidir. Ayrıca sunucu/tarayıcı değişimindeki en temel performans optimizasyonlarından biridir ve akış olarak bilinir. Sunucu, HTML'yi en kısa sürede göndermeye başlayabilirse ve tarayıcı, yanıtın tamamını almayı beklemezse tarayıcı, HTML'yi geldikçe 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ılırken tarayıcı, bu aktarımın bitleri parçalar halinde geldiğinden, ayrıştırma işlemini birer bit halinde gerçekleştirerek bu HTML'nin ayrıştırmasını optimize eder. Sonuç olarak tarayıcı, her bir parçayı işledikten sonra düzenli olarak ana ileti dizisine verir. Bu sayede uzun görevler önlenir. Bu, HTML ayrıştırılırken kullanıcıya bir sayfa sunmak için gerekli olan artımlı oluşturma çalışmasının yanı sıra sayfanın kritik başlangıç döneminde gerçekleşebilecek kullanıcı etkileşimlerinin işlenmesi de dahil olmak üzere başka çalışmaların gerçekleşebileceği anlamına gelir. Bu yaklaşım, sayfa için daha iyi bir Interaction to Next Paint (INP) puanı anlamına gelir.

Peki, bunun anlamı ne? Sunucudan HTML aktarırken HTML'nin artımlı şekilde ayrıştırılmasını ve oluşturulmasını ve ana iş parçacığına otomatik olarak teslim edilmesini ücretsiz olarak elde edersiniz. İstemci tarafı oluşturma bu avantajları sunmaz.

Tarayıcının, JavaScript tarafından sağlanan HTML'i oluşturma şekli

Bir sayfaya yapılan her gezinme isteği, sunucu tarafından belirli miktarda HTML sağlanmasını gerektirse de bazı web siteleri SPA kalıbını kullanır. Bu yaklaşım genellikle sunucu tarafından sağlanan minimum bir ilk HTML yükünü içerir. Ancak daha sonra istemci, sayfanın ana içerik alanını sunucudan alınan verilerden derlenen HTML ile 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 yönetilir.

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

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

1. innerHTML mülkü, tarayıcı tarafından DOM olarak ayrıştırılan bir dize aracılığıyla mevcut bir öğenin içeriğini 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 (ve tarayıcı, tıpkı 1. yaklaşımda olduğu gibi bunu ayrıştırır). Ancak bir dizi nedenden dolayı document.write'ın kullanılması önerilmez.

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

• Bir gezinme isteğine yanıt olarak sunucu tarafından aktarılan HTML'nin aksine, istemcideki JavaScript görevleri otomatik olarak parçalara bölünmez. Bu da ana iş parçasını engelleyen uzun görevlere neden olabilir. Diğer bir deyişle, istemcide aynı anda çok fazla HTML/DOM oluşturuyorsanız sayfanızı INP olumsuz yönde etkilenebilir.
• Başlangıç sırasında istemcide HTML oluşturulursa içinde referans verilen kaynaklar tarayıcı önceden yükleme tarayıcısıyla bulunmaz. Bu, sayfanın Largest Contentful Paint (LCP) değerini olumsuz yönde etkileyecektir. Bu, çalışma zamanında performansla ilgili bir sorun olmasa da (önemli kaynakları getirmede ağ gecikmesi sorunudur) web sitenizin LCP'sinin bu temel tarayıcı performansı optimizasyonundan etkilenmesini istemezsiniz.

İstemci tarafı oluşturmanın performans üzerindeki etkisiyle ilgili yapabilecekleriniz

Web siteniz büyük ölçüde istemci tarafı oluşturmaya bağlıysa ve alan verilerinizdeki INP değerlerinin düşük olduğunu gözlemlediyseniz istemci tarafı oluşturmanın sorunla bir ilgisi olup olmadığını merak edebilirsiniz. Örneğin, web siteniz bir SPA ise alan verileriniz, önemli miktarda oluşturma çalışmasından sorumlu etkileşimleri gösterebilir.

Nedeni ne olursa olsun, işlerin normale dönmesine yardımcı olmak için göz atabileceğiniz 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ı sunucudan gelen HTML'yi varsayılan olarak çok yüksek performanslı bir şekilde işler. HTML'nin ayrıştırılması ve oluşturulması işlemini, uzun görevlerden kaçınacak ve toplam ana iş parçacığı süresini optimize edecek şekilde böler. Bu, Toplam Engelleme Süresi (TBT)'nin düşmesine neden olur. TBT, INP ile güçlü bir ilişkiye sahiptir.

Web sitenizi oluşturmak için bir ön uç çerçevesi kullanıyor olabilirsiniz. Bu durumda, bileşen HTML'sini sunucuda oluşturmanız gerekir. Bu, web sitenizin ihtiyaç duyacağı ilk istemci tarafı oluşturma miktarını sınırlandırır ve daha iyi bir deneyim sağlar.

• React için sunucudaki HTML'yi oluşturmak üzere Server DOM API'yi kullanmanız gerekir. Ancak, sunucu tarafı oluşturma işleminin geleneksel yönteminde eşzamanlı bir yaklaşım kullanılır. Bu yaklaşım, ilk bayt süresi (TTFB) ve ilk zengin içerikli boyama (FCP) ve LCP gibi sonraki metriklerin yanı sıra daha uzun bir süreye neden olabilir. Mümkünse sunucunun tarayıcıya en kısa sürede HTML aktarmaya başlayabilmesi için Node.js veya diğer JavaScript çalışma ortamları 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. Sunucuda HTML'yi otomatik olarak oluşturmanın yanı sıra, kullanıcı bağlamına göre değişmeyen sayfalar (kimlik doğrulama gibi) için HTML'yi statik olarak da oluşturabilir.
• Vue da varsayılan olarak istemci taraflı oluşturma işlemi 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 kullanın.
• Svelte varsayılan olarak HTML'yi sunucuda oluşturur. Ancak bileşen kodunuzun tarayıcıya özel ad alanlarında (ör. window) erişmesi gerekiyorsa bu bileşenin HTML'sini sunucuda oluşturamayabilirsiniz. Gereksiz istemci tarafı oluşturmaya neden olmamak için mümkün olduğunda alternatif yaklaşımları keşfedin. Next.js'in React için olduğu gibi Svelte için de bir araç olan SvelteKit, mümkün olduğunca birçok en iyi uygulamayı Svelte projelerinize yerleştirir. Böylece, yalnızca Svelte'in kullanıldığı projelerde karşılaşabileceğiniz olası tuzakları önleyebilirsiniz.

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

DOM'lar büyük olduğunda bunları oluşturmak için gereken işleme artar. Web siteniz tam teşekküllü bir SPA olsun veya MPA etkileşimi sonucunda mevcut bir DOM'a yeni düğümler enjekte etsin, bu DOM'ları mümkün olduğunca küçük tutabilirsiniz. Bu, istemci tarafı oluşturma sırasında bu HTML'yi görüntülemek için gereken çalışmanın azaltılmasına yardımcı olur ve web sitenizin INP'sinin daha düşük tutulmasına yardımcı olur.

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

Bu, her kullanım alanında kolayca kullanılamayabilecek gelişmiş bir tekniktir ancak MPA'nızı, kullanıcılar bir sayfadan diğerine geçtiğinde anında yükleniyormuş gibi hissettiren bir web sitesine dönüştürebilir. Web sitenizin statik bölümlerini CacheStorage'da önbelleğe almak için bir hizmet çalışanı kullanabilir, sayfanın HTML'sinin geri kalanını ise sunucudan almak için ReadableStream API'yi kullanabilirsiniz.

Bu tekniği başarıyla kullandığınızda istemcide HTML oluşturmazsınız ancak içeriklerin önbellekten anında yüklenmesi, sitenizin hızlı yüklendiği izlenimi 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ı azaltır.

Özetlemek gerekirse, akış hizmeti işleyici mimarisi, tarayıcının yerleşik gezinme mantığını yerine getirmez, ona 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 okuyun.