SPA'lar, Core Web Vitals ve Google'ın mevcut ölçüm sınırlamalarını ele alma planıyla ilgili sık sorulan soruların yanıtları.
Mayıs 2020'de Web Verileri girişimini ilk kez başlattığımızdan beri, Chrome ekibi olarak programla ilgili çok sayıda değerli soru ve geri bildirim aldık.
Belki de en çok soru aldığımız konu, muhtemelen cevaplanması en zor soru da oldu: Tek sayfalık bir uygulamada (SPA) Core Web Vitals'ın nasıl ölçüleceği ve SPA mimarilerinin Core Web Vitals puanlarını nasıl etkilediği.
Sorun oldukça incelikli olduğundan bu soruları yanıtlamak zordur. Bu nedenle bu yayında, mümkün olduğunca fazla ayrıntı ve bağlam sunarak en yaygın soruları yanıtlamak için elimizden geleni yapacağız.
Ancak, ayrıntılara girmeden önce, Google'ın bir siteyi oluştururken hangi mimarinin veya teknolojinin kullanılacağı konusunda herhangi bir tercihinin olmadığını belirtmekte fayda var. Hem SPA'ların hem de çok sayfalı uygulamaların (MPA'ların) kullanıcılara yüksek kaliteli deneyimler sunabileceğine inanıyoruz ve Web Vitals girişiminde, deneyimi teknolojiden bağımsız olarak ölçen metrikler sunmak istiyoruz. Bugün (web platformundaki sınırlamalar nedeniyle) her durumda bu mümkün olmasa da bu boşlukları doldurmak için aktif bir şekilde çalışıyoruz.
Sık sorulan sorular
Önemli Web Verileri metrikleri, SPA rota geçişlerini içerir mi?
Hayır. Önemli Web Verileri metriklerinin her biri, sayfada mevcut olan en üst düzey gezinmeye göre ölçülür. Bir sayfa dinamik olarak yeni içerik yükler ve adres çubuğundaki sayfanın URL'sini güncellerse, Önemli Web Verileri metriklerinin ölçülme şekli üzerinde bir etkisi olmaz. Metrik değerleri sıfırlanmaz ve her bir metrik ölçümüyle ilişkilendirilen URL, kullanıcının ziyaret ettiği ve sayfa yüklemesini başlatan URL'dir.
Core Web Vitals metrikleri, SPA rota değişikliklerini geleneksel sayfa yüklemeleriyle aynı şekilde ele alabilir mi?
Maalesef hayır. Henüz değil.
Günümüzde SPA oluşturmanın standart bir yolu yoktur ve popüler SPA ve yönlendirme kitaplıklarında bile kullanıcı deneyimi uygulamadan uygulamaya oldukça farklı olabilir:
- Bazı SPA'lar URL'yi yalnızca yeni "tam sayfa" içerik yüklenirken güncellerken bazı siteler ise küçük içerik değişiklikleri veya yalnızca kullanıcı arayüzü durumu değişiklikleri için URL'yi günceller.
- Bazı SPA'lar URL'yi History API'yi kullanarak güncellerken bazıları eski tarayıcıları desteklemek için karma değişiklikleri kullanır (diğerleri ise URL'yi hiç güncellemez).
- Bazı SPA'lar içeriği yükleyip daha sonra, URL'yi güncellerken bazıları da içeriği yüklemeden önce URL'yi günceller.
- Bazı SPA'lar içeriği aynı anda, eşzamanlı olarak tek bir JavaScript göreviyle yüklerken bazıları, birden fazla görevde içeriği eşzamansız olarak taşır (kesin bir geçiş sonu etkinliği olmadan).
- Bazı SPA'lar her zaman içeriği ağdan yüklerken, diğerleri tüm içeriği önceden yükleyerek rota değişikliklerinin anında bellekten yüklenmesini sağlar.
Bu farklılıklar, neyin bir SPA rota değişikliği olarak, hatta bir SPA olarak tanımlanıp tanımlanacağını geniş ölçekte yapmayı oldukça zorlaştırır.
Bazı durumlarda SPA rota değişikliği, mantıksal olarak MPA sayfası yüklemesiyle aynıdır. Bu gibi durumlarda, mevcut Core Web Vitals metriklerinin uygulanabilmesi çok faydalı olur.
Ancak, diğer tüm URL değişikliklerindeki "gerçek" rota değişikliklerini güvenilir bir şekilde tanımlamak ve bu geçişlerin başlangıcını ve bitişini belirten net sinyalleri tanımlamak için sağlam buluşsal yöntemler olmadan, Önemli Web Verileri metrikleri bu durumlarda verileri belirsizleştirir ve sitedeki gerçek kullanıcı deneyimini daha az yararlı veya temsili olmaz.
SPA'ların Önemli Web Verileri'nde iyi performans göstermesi MPA'lardan daha mı zor?
SPA mimarisinin doğasında, SPA'daki bir sayfanın bir MPA'daki benzer bir sayfa kadar hızlı yüklenmesini ve tüm Önemli Web Verileri metriklerinde aynı düzeyde puan almasını önleyecek bir şey yoktur.
Bununla birlikte, doğru şekilde optimize edilmiş MPA'lar, Önemli Web Verileri eşiklerini karşılama konusunda SPA'ların şu anda sağlamadığı bazı avantajlara sahiptir. Bunun nedeni, MPA mimarisinde her bir "sayfanın", içeriği dinamik olarak getirmek ve mevcut sayfaya eklemek yerine tam sayfa gezinme olarak yüklenmesidir. Bu, bir MPA'yı ziyaret eden kullanıcıların siteden birden fazla sayfa yükleme olasılıklarının daha yüksek olduğu anlamına gelir. Bunun sonucunda, bir MPA için tüm sayfa yüklemelerinin dağıtımının büyük bir yüzdesinin, alt önbelleğe alınan tüm alt öğelerin bir kısmını veya tamamını içereceği anlamına gelir.
MPA'nın Core Web Vitals metriklerinde SPA'dan daha iyi performans göstermesi için birkaç şeyin doğru olması gerekir:
- Aynı kaynaklı sayfa yüklemelerinin 75. yüzdelik dilimdeki kaynaklar arası sayfa yüklemelerinden daha hızlı olmasını sağlamak için MPA'nın optimize edilmiş alt kaynak önbelleğe alma özelliğine sahip olması gerekir.
- MPA'ları ziyaret eden kullanıcıların, sayfaların daha hızlı yüklenmesini sağlayan önbelleğe alma avantajlarından yararlanabilmesi için birden fazla sayfayı ziyaret etmeleri gerekir.
Önemli Web Verileri değerlendirmeleri, sayfa ziyaretlerinin yüzde 75'ini dikkate aldığından veri kümesinde iyi performans gösteren daha fazla sayfa ziyareti olması, dağılımın 75. yüzdelik dilimindeki ziyaretin önerilen eşikler dahilinde olma olasılığını artırır.
Önemli Web Verileri puanlarını karşılaştırırken dikkate alınması gereken önemli bir nokta, verilerin nasıl toplandığı, yani dağıtımdaki veri kümesinin sitenizdeki veya kaynağınızdaki tüm sayfaları ya da yalnızca belirli bir sayfa URL'si için sayfa yüklemelerini içerip içermediğidir.
Bir kaynaktaki tüm sayfaların puanları toplanırken, tek tek hızlı sayfalar bütün olarak kaynak için 75. yüzdelik dilimi iyileştirebilir. Ancak, tek tek sayfalara göre toplama yapıldığında, bir sayfanın puanları bir sonraki sayfanın puanlarını etkilemez. Başka bir deyişle, bir MPA puanlarını sayfaya göre toplarken ödeme sayfasında görülen hızlı önbellek yüklemeleri, sitenin açılış sayfasında karşılaşılan yavaş ilk yükleme puanlarını artırmaz.
PageSpeed Insights'ı veya hem tek tek sayfa URL'leri hem de kaynağın tamamı için puanları raporlayan Chrome Kullanıcı Deneyimi Raporu API'sini kullanarak sitenizin puanını farklı toplama yöntemleri için kontrol edebilirsiniz.
SPA mimarisinin Core Web Vitals puanlarını etkileyebileceği bir başka yöntem de sayfanın tüm kullanım ömrünü dikkate alan metriklerdir. SPA'ları ziyaret eden kullanıcılar oturumun tamamı boyunca aynı "sayfada" kalma eğiliminde olduklarından zaman içinde biriken metrikler SPA'larda MPA'lardan daha zor olabilir.
Nisan 2021'de, bu sorunu kısmen ele alan CLS metriğinde yapılan değişiklikleri duyurmuştuk. Önceden CLS sayfa ömrünün tamamı boyunca birikmekteydi, şimdi ise yalnızca belirli bir zaman dilimi içinde (aslında belirli bir sayfadaki en kötü düzen değişikliği patlaması) birikir.
Bununla birlikte, yeni CLS tanımında bile SPA'lar, MPA'da tam sayfa yüklemelerinde olduğu gibi rota geçişlerinden sonra CLS değeri "sıfırlanmadığından" hâlâ dezavantajlıdır. Rota geçişinden sonra oluşan düzen kaymaları, geçiş sırasında adres çubuğundaki URL ile değil, sayfanın yüklendiği sırada URL ile ilişkilendirileceği için karışıklığa yol açabilir (aşağıda daha ayrıntılı bilgi verilmiştir).
SPA mimarileri kullanıcı deneyimini iyileştiriyorsa, bu iyileşme metriklere yansıtılmamalı mı?
Evet, olmalı. Daha önce de belirttiğimiz gibi, günümüzde SPA'ların web'de uygulandığı tüm farklı yöntemler düşünüldüğünde bu deneyimin ne kadar geliştiğini ölçmek büyük ölçekte yapmak zordur.
Gerçek şu ki web performansı sektörü (Google dahil) geçmişte, bir sayfanın yükleme sonrası performansı ile ilgili kullanıcı merkezli metrikler geliştirmek için, sayfa yüklemesinin kendisi için gösterdiği kadar zaman ve çaba harcamamıştır. Bunun nedeni yükleme sonrası performansın önemli olmaması değil, yükleme sonrası kullanıcı deneyiminin ve etkileşimlerin çok daha çeşitli ve daha az tanımlanmış olmasıdır. Bu da bunlar için metrik tasarlamanın zorlaşmasına neden olur.
Ancak SPA performansını ölçmek için iyi tanımlanmış yükleme sonrası metriklerimiz olsa bile, sırf yükleme sonrası deneyimi daha iyi hale geldiği için yükleme deneyimini göz ardı etmek istemeyiz.
Web Verileri girişiminin hedeflerinden biri, bir web sayfasını yükleme ve kullanma konusunda mümkün olduğunca çok açıdan iyi kullanıcı deneyimini teşvik etmek ve teşvik etmektir. Kötü deneyimleri telafi edecek kadar iyi deneyim yaratabiliyorsanız kötü deneyimlerin haklı olduğu senaryoları teşvik etmek istemeyiz. Kullanıcılar sayfaların hızlı yüklenmesini ve yeni içeriğe daha hızlı geçiş yapmalarını ister. Biz de bu tür deneyimleri destekleyen metrikler tasarlamaya çalıştık.
Bu nedenle, bir sitenin MPA sürümünün Core Web Vitals metriklerinde aynı sitenin SPA sürümüne göre 75. yüzdelik dilimde daha iyi performans gösterebileceği doğru olsa da SPA sürümü yine de "iyi" eşiğini karşılamaya çalışmalıdır. SPA sürümü çoğu kullanıcı için "iyi" eşiğini karşılamıyorsa sonraki sayfa içi gezinme deneyimi mükemmel olsa bile ilk yükleme deneyimi muhtemelen iyi olarak algılanmaz.
Gelecekte kusursuz, yükleme sonrası deneyimleri teşvik eden metrikler geliştirmeyi planlıyoruz. Bunun, ilk yükleme deneyiminden ödün vermeyecek şekilde yüksek kaliteli SPA'ları teşvik etmenin en iyi yolu olduğuna inanıyoruz. Tüm sayfa yaşam döngüsü boyunca etkileşim gecikmesini ölçen Sonraki Boyaya Etkileşim (INP) adlı yeni bir metrik yayınlamıştık. SPA rota geçişlerini ölçen metrikleri de içeren diğer yükleme sonrası metrikleri üzerinde de aktif olarak çalışıyoruz (aşağıya bakın).
Sitemizi MPA'dan SPA'ya geçirdik ve puanlarımız geriledi. Bu beklenen bir durum mu?
Duruma bağlı. Önemli bir mimari taşıma işleminden sonra puanlarınızın değişebilmesinin birkaç nedeni olabilir ancak hazır durumda önbellek yüklemelerinin sayısının azalması, değişikliğin bir kısmını açıklayabilir.
Kontrol etmenin hızlı bir yolu, Lighthouse ile açılış sayfalarınızdan birinin MPA ve SPA sürümünü test etmektir. SPA sürümünün Core Web Vitals metriklerinin herhangi birinde Lighthouse puanı düşükse, yükleme deneyimi büyük olasılıkla güncellemeden sonra daha kötü hale gelmiştir.
Core Web Vitals'da daha iyi puan alabilmek için sitemi SPA'dan MPA'ya geçirmeli miyim?
Muhtemelen karşılaşmazsınız. SPA'dan MPA'ya yalnızca SPA yığınınızdan memnun değilseniz ve SPA'nın daha iyi bir kullanıcı deneyimi sağlayacağına inanmak için bir nedeniniz varsa geçiş yapmalısınız.
Önemli Web Verileri metrikleri zamanla iyileştikçe ve tam tarama deneyiminin daha büyük bir kısmını kapladıkça, mükemmel kullanıcı deneyimi sunan iyi oluşturulmuş SPA'lara sahip ekipler, Core Web Vitals puanlarının bunu yansıttığını görmeyi beklemelidir.
Önemli Web Verileri puanları yalnızca bir SPA'nın açılış sayfaları için raporlanıyorsa rota geçişinden sonra "sayfalarda" ortaya çıkan sorunlarda nasıl hata ayıklayabilirim?
Önemli Web Verileri metriği için alan verilerini raporlayan Google araçları (ör. Search Console ve PageSpeed Insights), verilerini Chrome Kullanıcı Deneyimi Raporu'ndan (CrUX) alır. CrUX ise verileri kaynağa veya sayfa URL'sine (yükleme sırasındaki sayfa URL'si) göre toplar.
Yukarıda listelenen tüm nedenlerle, CrUX, verileri SPA rotasına göre toplayamaz. Bununla birlikte, kendi mimarinize aşina olan bir site sahibi olarak bunu kendiniz de ölçebilirsiniz. Birçok analiz aracı, SPA rotası değişikliği olduğunda bunu kontrol etmenize olanak tanır ve ölçüm verilerinizi buna göre günceller.
Web Verileri metriklerini bir analiz aracıyla ölçerken hem geçerli rota URL'sini hem de orijinal sayfa URL'sini ölçtüğünüzden emin olun. Bu sayede, hem sayfa yaşam döngüsü boyunca ortaya çıkan tek tek sorunlar için hata ayıklayabilir hem de Google araçlarının metrikleri ölçme ve raporlama şekliyle eşleşme sağlamak için orijinal sayfa URL'sine göre derleyebilirsiniz.
Bu konuyla ilgili daha fazla bilgi ve en iyi uygulama için Sahada performansta hata ayıklama bölümüne bakın.
Google, MPA'ların SPA'lara kıyasla haksız avantaja sahip olmamasını sağlamak için ne yapıyor?
Yukarıda belirtildiği gibi, uygun şekilde optimize edilmiş bir MPA, önbelleğe alınan sayfa ziyaretlerinin yüzdesinin daha yüksek olması nedeniyle bazı durumlarda Web Verileri'nin 75. yüzdelik dilimde daha iyi puanları raporlayabilir. Öte yandan, uygun şekilde optimize edilmiş SPA'larda kullanıcı deneyiminde yapılan gerçek iyileştirmeler şu anda Core Web Vitals metriklerinin hiçbiri tarafından yakalanmamaktadır.
Google olarak, bunun Web Verileri girişiminin hedeflerine tam olarak uymayan teşvikler oluşturduğunu biliyor ve bunu düzeltmenin yollarını etkin bir şekilde araştırıyoruz. Şu anda biri kısa vadeli, diğeri uzun vadeli olmak üzere iki olası çözüm araştırıyoruz:
- Kaynaklar arası ve aynı kaynak sayfa ziyaretlerini ayrı ayrı değerlendirin.
- Daha iyi SPA ölçümü sağlayan yeni API'ler tasarlayın.
Kaynaklar arası ve aynı kaynak sayfa ziyaretlerini ayrı ayrı değerlendirme
Bugün Önemli Web Verileri metrikleri, tüm sayfa ziyaretlerini tek bir pakette toplar. Yeni ve geri gelen ziyaretler veya açılış sayfaları ile ödeme sayfaları ya da önbellek durumunun performansı etkileyebileceği diğer toplama türlerini ayırt etmezler.
SPA ve MPA performansı arasındaki farkları normalleştirmenin bir yolu, potansiyel olarak tamamen farklı eşik önerileri olsa bile farklı ziyaret türlerine farklı ağırlıklar uygulamaktır.
Etkili önbellek uygulamalarını kesinlikle ödüllendirmek istesek de, site içinde hızlı gezinmelerin yavaş açılış sayfası yüklemelerinin önüne geçmesini istemiyoruz. Ayrıca, metrik puanlarını yükseltmek amacıyla, siteleri uzun sayfaları daha kısa sayfalardan oluşan bir koleksiyona bölmeye teşvik etmek de istemiyoruz.
Kaynaklar arası ve aynı kaynak sayfa ziyaretlerini ayrı ayrı değerlendirerek, belirli bir sitedeki belirli bir türün göreli popülerliğinin belirli bir metriğin dağıtımını çarpıtmasına izin vermeden her iki deneyim türünün de önemli olmasına yardımcı olabiliriz.
Daha iyi SPA ölçümü sağlayan yeni API'ler tasarlayın
Üzerinde aktif olarak üzerinde çalışılan diğer bir çözüm de (yukarıdakilere paralel olarak) mevcut SPA kalıplarının standartlaştırılmasına yardımcı olacak ve SPA kullanımını geniş ölçekte ölçüp anlamayı kolaylaştıracak yeni bir App History API'dir.
App History API, SPA ölçümüne özgü iki temel özelliğe sahip yeni bir navigate etkinliğini kullanıma sunuyor:
- Yalnızca gezinmenin bağlantı tıklama, form gönderme veya tarayıcının geri ya da ileri kullanıcı arayüzü aracılığıyla başlatılması durumunda "true" (doğru) olarak ayarlanan bir
userInitiatedişareti. - Geliştiricinin gezinmeyi gerçekleştirmek için başlattığı iş tamamlandığında sinyal vermesine olanak tanıyan bir
transitionWhile()yöntemi.
userInitiated işareti, SPA rota geçişi için anlamsal bir başlangıç noktası belirlemek amacıyla kullanılabilir ve kullanıcının niyetini net bir şekilde gösterir. transitionWhile() sözü çözümlemesi, tarayıcının boyaları belirli rota geçişiyle ilişkilendirmesine yardımcı olabilir. Böylece, bu geçişle ilgili en büyük zengin içerikli boyamayı belirleyebilir.
Önceki bölümde sunulan fikirden yola çıkarak, SPA rotası geçiş süresini bir MPA'da aynı kaynaktan gelen sayfa yüklemeleri ile aynı pakette toplamak bile mümkün olabilir. Bu heyecan vericidir çünkü bir sitenin MPA'dan SPA'ya taşınmasını, o önceki ve sonraki performansı gerçekten karşılaştırabilmesine olanak tanır.
Bu kararları doğru şekilde alıp alamayacağımızı anlamadan önce tabii ki daha fazla araştırma yapılması gerekiyor. Bu tekliflerle ilgili önerileriniz veya geri bildiriminiz varsa lütfen web-vitals-feedback@googlegroups.com adresine e-posta gönderin.
Son düşünceler
Google, Web Verileri metriklerini iyileştirme ve bu metriklerin kullanıcılar için önemli olan yüksek kaliteli deneyimleri ölçüp teşvik etmesini sağlama konusunda son derece kararlıdır. Bununla birlikte, günümüzde ölçüm eksikliklerinin olduğunun farkındayız. Metrikler şu anda kullanıcı deneyiminin her yönünü kapsamamaktadır ancak bu boşlukları kapatmak için aktif olarak çalışıyoruz.
Mevcut sınırlamalara rağmen, mevcut metriklerin yakaladığı alanların web'in sağlığı ve başarısı açısından kritik öneme sahip olduğuna ve sitelerin (mimariden bağımsız olarak) önerilen eşikleri karşılamadığına inandığımızda iyileştirilmesi gerektiğini düşünüyoruz.
Bu yayının bu karmaşık ve incelikli konuya ışık tutmaya yardımcı olduğunu umuyorum. Her zaman olduğu gibi, mevcut veya gelecekteki Web Verileri metrikleriyle ilgili geri bildirimde bulunmak isterseniz lütfen web-vitals-feedback@googlegroups.com adresine e-posta gönderin.