HTML’nin ayrıştırılması ve oluşturulması, tarayıcıların yerleşik gezinme mantığını kullanan web siteleri için varsayılan olarak çok iyi yaptığı bir şeydir – bazen “geleneksel sayfa yüklemeleri” veya “zor gezinmeler” olarak adlandırılır. Bu tür web sitelerine bazen çok sayfalı uygulamalar (MPA’lar) denir.
Ancak geliştiriciler, uygulama gereksinimlerine uyacak şekilde tarayıcı varsayılanları üzerinde çalışabilirler. Bu kesinlikle kullanan web siteleri için geçerlidir. tek sayfa uygulama (SPA) modeliJavaScript ile istemcide HTML/DOM’un büyük bölümlerini dinamik olarak oluşturan. İstemci tarafı işleme, bu tasarım modelinin adıdır ve aşırı iş yapılması durumunda web sitenizin Etkileşimi (INP) üzerinde etkileri olabilir.
Bu kılavuz, sunucu tarafından tarayıcıya gönderilen HTML’yi kullanmakla JavaScript ile istemcide oluşturmak arasındaki farkı ve JavaScript’in kritik anlarda nasıl yüksek etkileşim gecikmesine yol açabileceğini değerlendirmenize yardımcı olacaktır.
Tarayıcı, sunucu tarafından sağlanan HTML’yi nasıl işler? #
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 girerseniz veya bir MPA’daki bir bağlantıya tıklarsanız, aşağıdaki olaylar dizisi gerçekleşir:
- Tarayıcı, sağlanan URL için bir gezinme isteği gönderir.
- Sunucu, parçalar halinde HTML ile yanıt verir.
Bunların son adımı anahtardır. Aynı zamanda sunucu/tarayıcı alışverişindeki en temel performans optimizasyonlarından biridir ve olarak bilinir. yayın Akışı. Sunucu mümkün olan 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 geldiğinde parçalar halinde işleyebilir.
Tarayıcıda gerçekleşen çoğu şey gibi, HTML’yi ayrıştırma da görevler içinde gerçekleşir. Sunucudan tarayıcıya HTML akışı yapıldığında, tarayıcı bu akışın bitleri parçalar halinde geldikçe bunu her seferinde biraz yaparak bu HTML’nin ayrıştırılmasını optimize eder. Sonuç olarak, tarayıcı her parçayı işledikten sonra periyodik olarak ana iş parçacığına teslim olur ve bu da uzun görevlerden kaçınır. Bu, HTML ayrıştırılırken kullanıcıya bir sayfa sunmak için gerekli artımlı işleme işi ve sayfanın önemli başlangıç döneminde meydana gelebilecek kullanıcı etkileşimlerini işleme dahil olmak üzere başka işlerin yapılabileceği anlamına gelir. Bu yaklaşım, sayfa için daha iyi bir Sonraki Boyama Etkileşimi (INP) puanı anlamına gelir.
Götürmek? Sunucudan HTML akışı yaptığınızda, artımlı ayrıştırma ve HTML oluşturma ve ana iş parçacığına ücretsiz olarak otomatik yönlendirme elde edersiniz. İstemci tarafı oluşturma ile bunu elde edemezsiniz.
Tarayıcı, JavaScript tarafından sağlanan HTML’yi nasıl işler? #
Bir sayfaya yapılan her gezinme isteği, sunucu tarafından bir miktar HTML sağlanmasını gerektirse de, bazı web siteleri SPA modelini kullanır. Bu yaklaşım genellikle sunucu tarafından sağlanan HTML’nin minimum ilk yükünü içerir, ancak daha sonra istemci bir sayfanın ana içerik alanını sunucudan getirilen verilerden derlenen HTML ile dolduracaktır. Bu durumda bazen “yazılımlı gezinmeler” olarak anılan sonraki gezinmeler, sayfayı yeni HTML ile doldurmak için tamamen JavaScript tarafından işlenir.
İstemci tarafı işleme, HTML’nin JavaScript aracılığıyla DOM’a dinamik olarak eklendiği daha sınırlı durumlarda SPA olmayanlarda da oluşabilir.
JavaScript aracılığıyla HTML oluşturmanın veya DOM’a ekleme yapmanın birkaç yaygın yolu vardır:
- bu
innerHTMLmülk 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. - bu
document.createElementyöntem herhangi bir tarayıcı HTML ayrıştırması kullanmadan DOM’a eklenecek yeni öğeler oluşturmanıza olanak tanır. - bu
document.writeyöntem belgeye HTML yazmanıza izin verir (ve tarayıcı, tıpkı yaklaşım # 1’deki gibi onu ayrıştırır). Dolayı bir takım sebeplerYine de, kullanımıdocument.writeşiddetle tavsiye edilmez.
İstemci tarafı JavaScript aracılığıyla HTML/DOM oluşturmanın sonuçları önemli olabilir:
- Gezinme isteğine yanıt olarak sunucu tarafından yayınlanan HTML’den farklı olarak, istemcideki JavaScript görevleri otomatik olarak kümelenmez, bu da ana iş parçacığını bloke eden uzun görevlerle sonuçlanabilir. Bu, istemcide aynı anda çok fazla HTML/DOM oluşturuyorsanız sayfanızın INP’sinin olumsuz etkilenebileceği anlamına gelir.
- Başlatma sırasında istemcide HTML oluşturulursa, bunun içinde başvurulan kaynaklar Olumsuz tarayıcı önyükleme tarayıcısı tarafından keşfedilebilir. Bunun kesinlikle bir sayfanın En Büyük İçerikli Boyası (LCP) üzerinde olumsuz bir etkisi olacaktır. Bu bir çalışma zamanı performansı sorunu olmasa da (bunun yerine önemli kaynakları getirirken ağ gecikmesi sorunudur), web sitenizin LCP’sinin bu temel tarayıcı performansı optimizasyonunu atlamaktan etkilenmesini istemezsiniz.
İstemci tarafı işlemenin performans etkisi hakkında yapabilecekleriniz #
Web siteniz büyük ölçüde istemci tarafı işlemeye bağlıysa ve saha verilerinizde düşük INP değerleri gözlemlediyseniz, istemci tarafı işlemenin sorunla bir ilgisi olup olmadığını merak ediyor olabilirsiniz. Örneğin, web siteniz bir SPA ise, saha verileriniz, önemli işleme işlerinden sorumlu etkileşimleri ortaya çıkarabilir.
Nedeni ne olursa olsun, işlerin yoluna girmesine yardımcı olmak için keşfedebileceğiniz bazı olası nedenler burada.
Sunucudan mümkün olduğunca fazla HTML sağlayın #
Daha önce belirtildiği gibi, tarayıcı varsayılan olarak sunucudan gelen HTML’yi çok performanslı bir şekilde işler. Uzun görevlerden kaçınacak ve toplam ana iş parçacığı süresini optimize edecek şekilde HTML’nin ayrıştırılmasını ve oluşturulmasını bozacaktır. Bu, daha düşük bir Toplam Engelleme Süresine (TBT) yol açar ve TBT INP ile güçlü bir şekilde ilişkilidir.
Web sitenizi oluşturmak için bir ön uç çerçevesine güveniyor olabilirsiniz. Öyleyse, sunucuda bileşen HTML’sini oluşturduğunuzdan emin olmak isteyeceksiniz. Bu, web sitenizin ihtiyaç duyacağı ilk istemci tarafı oluşturma miktarını sınırlayacak ve daha iyi bir deneyimle sonuçlanacaktır.
- React için, Sunucu DOM API’si sunucuda HTML oluşturmak için. Ancak unutmayın: geleneksel sunucu tarafı oluşturma yöntemi kullanır senkronize bir yaklaşım, bu da daha uzun İlk Bayt Süresine (TTFB) ve İlk Zengin İçerikli Boyama (FCP) ve LCP gibi sonraki metriklere yol açabilir. Mümkün olduğunda, akış API’lerini şu amaçlar için kullandığınızdan emin olun: Node.js veya diğer JavaScript çalışma zamanları böylece sunucu mümkün olan 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 uygulamayı sağlar. HTML’yi sunucuda otomatik olarak oluşturmaya ek olarak, kullanıcı bağlamına göre (kimlik doğrulama gibi) değişmeyen sayfalar için statik olarak HTML de oluşturabilir.
- Vue ayrıca varsayılan olarak istemci tarafında işleme gerçekleştirir. Ancak, React gibi Vue da bileşen HTML’nizi sunucuda oluşturun. Mümkün olduğunda bu sunucu tarafı API’lerinden yararlanın veya bir üst düzey soyutlama Vue projenizin en iyi uygulamaları daha kolay gerçekleştirmesini sağlamak için.
- ince HTML’yi sunucuda işler varsayılan olarak—ancak bileşen kodunuzun tarayıcıya özel ad alanlarına (
window, örneğin), o bileşenin HTML’sini sunucuda oluşturamayabilirsiniz. İstemci tarafında gereksiz işlemeye neden olmamak için mümkün olan her yerde alternatif yaklaşımları keşfedin. SvelteKitNext.js React için olduğu gibi Svelte için de en iyi uygulamaları mümkün olduğunca Svelte projelerinize yerleştirir, böylece yalnızca Svelte kullanan projelerde olası tuzaklardan kaçınabilirsiniz.
İstemcide oluşturulan DOM düğümü miktarını sınırlayın #
DOM’lar büyük olduğunda, bunları işlemek için gereken işlem süresi artma eğilimindedir. Web siteniz ister tam teşekküllü bir SPA olsun, ister bir MPA etkileşiminin sonucu olarak mevcut bir DOM’a yeni düğümler enjekte ediyor olsun, bu DOM’ları mümkün olduğunca küçük tutmayı düşünün. Bu, HTML’yi görüntülemek için istemci tarafı oluşturma sırasında gereken işi azaltmaya yardımcı olur ve umarım web sitenizin INP’sini daha düşük tutmanıza yardımcı olur.
Akış hizmeti çalışan mimarisi düşünün #
Bu, her kullanım durumunda kolayca çalışmayabilecek gelişmiş bir tekniktir, ancak MPA’nızı, kullanıcılar bir sayfadan diğerine geçtiğinde anında yükleniyormuş gibi hisseden bir web sitesine dönüştürebilen bir tekniktir. Web sitenizin statik bölümlerini önbelleğe almak için bir hizmet çalışanı kullanabilirsiniz. CacheStorage kullanırken ReadableStream API bir sayfanın HTML’sinin geri kalanını sunucudan almak için.
Bu tekniği başarılı bir şekilde kullandığınızda, istemcide HTML oluşturmuyorsunuz, ancak önbellekten kısmi içeriklerin anında yüklenmesi, sitenizin hızlı bir şekilde yüklendiği izlenimini verecektir. Bu yaklaşımı kullanan web siteleri, neredeyse bir SPA gibi hissedebilir, ancak istemci tarafı oluşturmanın olumsuz yönleri yoktur. aynı zamanda sunucudan talep ettiğiniz HTML miktarını azaltır.
Kısacası, bir akış hizmeti çalışanı mimarisi, yer değiştirmek tarayıcının yerleşik gezinme mantığı—bu ekler ona ile bunu nasıl başaracağınız hakkında daha fazla bilgi için çalışma kutusuOkumak Akışlarla daha hızlı çok sayfalı uygulamalar.
Çözüm #
Web sitenizin HTML’yi nasıl aldığı ve oluşturduğu, performans üzerinde bir etkiye sahiptir. 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 çok şey elde edersiniz: artımlı ayrıştırma ve oluşturma ve uzun görevlerden kaçınmak için ana iş parçacığına otomatik gönderme.
İstemci tarafında HTML oluşturma, çoğu durumda önlenebilecek bir dizi potansiyel performans sorunu ortaya çıkarır. Bununla birlikte, her bir web sitesinin gereksinimleri nedeniyle, bu durum çoğu zaman tamamen önlenebilir değildir. Aşırı istemci sitesi oluşturmadan kaynaklanabilecek potansiyel uzun görevleri azaltmak için, mümkün olduğunca web sitenizin HTML’sinin çoğunu sunucudan gönderdiğinizden emin olun, DOM boyutlarınızı, üzerinde oluşturulması gereken HTML için mümkün olduğunca küçük tutun. sunucudan yüklenen HTML için tarayıcının sağladığı artımlı ayrıştırma ve işlemeden yararlanırken istemciye HTML teslimini hızlandırmak için alternatif mimariler düşünün.
Web sitenizin istemci tarafı oluşturmasını mümkün olduğunca minimum seviyeye indirebilirseniz, yalnızca web sitenizin INP’sini değil, LCP, TBT ve hatta bazı durumlarda muhtemelen TTFB’niz gibi diğer metrikleri de iyileştirmiş olursunuz.
Gönderen kahraman resmi Unsplashile Maik Jonietz.