Tek sayfa uygulaması mı çok sayfalı site mi.
Birinde gezinmeyi uygulama yapar, ötekinde tarayıcı; belge-arası geçişten sonra «akıcı geçiş için uygulama gerekir» cümlesi artık doğru değil.
On yıl boyunca bu karşılaştırmanın cevabı belliydi: akıcı geçiş, korunan durum ve hızlı sayfa değişimi istiyorsan uygulama yazardın. O cevabın dayandığı teknik varsayım değişti. Tarayıcı artık iki ayrı belge arasında geçiş animasyonu kurabiliyor ve bunun için tek satır CSS yetiyor. Yani karşılaştırma yeniden açıldı.
Uygulamanın devraldığı işler
Tek sayfa uygulaması, tarayıcının yaptığı bir işi devralır: gezinme. Devralınan iş yalnız içeriği değiştirmek değildir — odak nereye gidecek, sayfa başlığı ne olacak, ekran okuyucuya ne duyurulacak, geri tuşu ne yapacak, kaydırma konumu korunacak mı? Bunların hepsi yazılır ve test edilir. Karşılığında gerçek bir kazanç vardır: durum bellekte kalır. Yarısı doldurulmuş bir form, çalan bir oynatıcı ya da açık bir harita, gezinme boyunca yaşamaya devam eder.
Çok sayfalı tarafın bugünkü hâli
Çok sayfalı bir sitede her adres kendi belgesidir ve gezinmeyi tarayıcı yapar. Yeni olan şey, bu gezinmenin artık görsel olarak da sürekli olabilmesi: belge-arası geçiş, eski sayfanın son karesiyle yeni sayfanın ilk karesi arasında bir animasyon kurar. Geçişin tanımı CSS’te durur, JavaScript gerekmez, ve desteklemeyen bir motorda gezinme yalnız animasyonsuz olur.
İkinci fark ölçümde: çok sayfalı sitede her gezinme kendi başına bir sayfa yüklemesidir, yani alan metrikleri her adres için ayrı ayrı toplanır. Tek sayfa uygulamasında yumuşak gezinmeler bugünkü metriklerin dışında kalır; ölçtüğün şey çoğunlukla ilk yüklemedir.
Ölçüm tuzağı: lab aracı gerçek tarayıcı değildir
Belge-arası geçişe katılan bir sayfayı ölçerken dikkat: lab araçlarının başlattığı tarayıcı, ziyaretçinin tarayıcısıyla aynı bayraklarla çalışmaz ve bu fark ilk kareyi saniyelerce geciktirebilir. Bu sitede ölçülen tam olarak buydu; ayrıntısı ayrı bir yazıda: Lighthouse neden 87 diyor, gerçek Chrome neden 98. Karar verirken lab skorunu tek kanıt saymamak gerekiyor — alan verisi ve gerçek tarayıcı ölçümü de masada olmalı.
Karar nasıl verilir
Soru «hangisi modern» değil, «durum nerede yaşıyor». Ziyaretçinin oturum boyunca taşıdığı bir durumu varsa (düzenlediği bir belge, doldurduğu uzun bir form, açık bir oynatıcı) uygulama tarafı işini kolaylaştırır. Sayfalar birbirinden bağımsız okunuyorsa, çok sayfalı taraf daha az kod, daha dar hata yüzeyi ve tarayıcının yerleşik davranışını bedava verir. Bu site ikinci gruptadır ve geçiş animasyonunu uygulama yazmadan kurar.
Ölçüt
- İlk ekran — Tek sayfa uygulaması: Uygulama paketi inip çalışmadan içerik görünmez (sunucuda önceden render edilmediyse) · Çok sayfalı site (+ belge-arası geçiş): Sunucudan gelen HTML ilk karede görünür
- Gezinme maliyeti — Tek sayfa uygulaması: İlk yüklemeden sonra yalnız veri · Çok sayfalı site (+ belge-arası geçiş): Her gezinmede bir belge; önbellek ve ön-getirme belirleyici
- Gezinme animasyonu — Tek sayfa uygulaması: Uygulama kodunda, bir yönlendirici ve animasyon katmanıyla · Çok sayfalı site (+ belge-arası geçiş): `@view-transition` ile CSS’te; uygulama kodu gerekmez
- Durum — Tek sayfa uygulaması: Bellekte kalır: form, oynatıcı, kaydırma konumu · Çok sayfalı site (+ belge-arası geçiş): Belge değişir; taşınacak durum açıkça taşınır (adres, depolama, sunucu)
- Odak, başlık, geri/ileri — Tek sayfa uygulaması: Elle yönetilir: odak taşınır, başlık yazılır, geçiş duyurulur · Çok sayfalı site (+ belge-arası geçiş): Tarayıcı yapar; çapa ve geri/ileri yerleşik davranış
- Arama motoru ve ajan — Tek sayfa uygulaması: İçerik istemcide üretiliyorsa ek bir tarama adımı gerekir · Çok sayfalı site (+ belge-arası geçiş): Her adres kendi HTML’ini taşır
- Hata yüzeyi — Tek sayfa uygulaması: Tek bir JavaScript hatası gezinmenin tamamını durdurabilir · Çok sayfalı site (+ belge-arası geçiş): Hata sayfayla sınırlı kalır; gezinme tarayıcıda
- Ölçüm — Tek sayfa uygulaması: Yumuşak gezinmeler bugünkü alan metriklerine girmez; ölçülen ilk yüklemedir · Çok sayfalı site (+ belge-arası geçiş): Her gezinme kendi sayfa yüklemesidir; lab araçları belge-arası geçişi gerçek tarayıcıdan farklı ölçebilir
- Uygun olduğu yer — Tek sayfa uygulaması: Oturum boyunca durum taşıyan arayüzler: panel, editör, harita, oyun · Çok sayfalı site (+ belge-arası geçiş): İçerik yüzeyleri: yayın, belge, portfolyo, ticari site
SIK SORULAN SORULAR
Belge-arası geçiş her tarayıcıda var mı?
Hayır, ve olmadığında bir şey bozulmaz: kural opt-in’dir, desteklemeyen motorda gezinme yalnız animasyonsuz olur. İçerik, adresler ve geri/ileri aynı çalışır.
Çok sayfalı sitede gezinme yavaş olmaz mı?
Ölçüye bağlı. HTML kenar önbelleğinden ya da ön-getirmeden geliyorsa gezinme bir belge indirmesi kadar sürer; bu sitede gerçek kullanıcıların en kötü ölçülen LCP’si 476 milisaniye. Yavaşlık mimarinin değil, kaçırılan önbelleğin ve ağır sayfanın sonucudur.
Tek sayfa uygulaması arama için kötü müdür?
Kötü değil, pahalıdır: içerik istemcide üretiliyorsa onu görecek tarafın ek bir adım atması gerekir ve o adımın her motorda aynı olduğunu varsayamazsın. Sunucuda önceden render edilmiş bir uygulama bu farkı büyük ölçüde kapatır — ama o noktada mimari zaten ikisinin karışımıdır.