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ı.
Web Vitals girişimini Mayıs 2020'de ilk kez kullanıma sunduğumuzdan beri Chrome Ekibi olarak program hakkında birçok harika soru ve geri bildirim aldık.
En çok sorulan ve muhtemelen yanıtlanması en zor sorulardan biri, tek sayfalık uygulamalarda (SPA'lar) Core Web Vitals'ın nasıl ölçülmesi gerektiği ve SPA mimarilerinin Core Web Vitals puanlarını nasıl etkilediğidir.
Sorun oldukça ayrıntılı olduğu için bu soruları yanıtlamak zordur. Bu nedenle, bu yayında en sık sorulan soruları yanıtlamak için elimizden geleni yapacağız.
Ancak ayrıntılara girmeden önce, Google'ın bir site oluşturmak için hangi mimarinin veya teknolojinin kullanıldığı konusunda herhangi bir tercihi olmadığını belirtmek önemlidir. Hem SPA'ların hem de çok sayfalı uygulamaların (MPA'lar) kullanıcılara yüksek kaliteli deneyimler sunabileceğini düşünüyoruz. Web Vitals girişimiyle amacımız, teknolojiden bağımsız olarak deneyimi ölçen metrikler sunmaktır. Bu, web platformundaki sınırlamalar nedeniyle şu anda her durumda mümkün olmasa da bu boşlukları kapatmak için aktif olarak çalışıyoruz.
Sık sorulan sorular
Core Web Vitals metrikleri SPA rota geçişlerini içerir mi?
Hayır. Core Web Vitals metriklerinin her biri, mevcut üst düzey sayfa gezinmesine göre ölçülür. Bir sayfa dinamik olarak yeni içerik yükleyip adres çubuğundaki sayfanın URL'sini güncelliyorsa bu, Core Web Vitals metriklerinin nasıl ölçüldüğü üzerinde hiçbir etkisi olmaz. Metrik değerleri sıfırlanmaz ve her metrik ölçümüyle ilişkili URL, kullanıcının sayfa yüklemesini başlattığı URL'dir.
Core Web Vitals metrikleri, SPA rota değişikliklerini geleneksel sayfa yüklemeleriyle aynı şekilde değerlendirebilir mi?
Maalesef hayır. Henüz değil.
Günümüzde SPA oluşturmanın standart bir yolu yoktur. Popüler SPA ve yönlendirme kitaplıkları arasında bile kullanıcı deneyimi uygulamadan uygulamaya oldukça farklı olabilir:
- Bazı SPA'lar URL'yi yalnızca yeni "tam sayfa" içeriği yüklerken güncellerken diğer siteler URL'yi küçük içerik değişiklikleri veya hatta yalnızca kullanıcı arayüzü durumu değişiklikleri için günceller.
- Bazı SPA'lar URL'yi History API'yi kullanarak güncellerken diğerleri eski tarayıcıları desteklemek için karma oluşturma değişiklikleri kullanır (ve diğerleri URL'yi hiç güncellemez).
- Bazı SPA'lar içeriği yükledikten sonra URL'yi güncellerken bazıları içeriği yüklemeden önce URL'yi günceller.
- Bazı SPA'lar içeriği tek bir JavaScript görevinde senkronize olarak bir kerede yüklerken diğerleri içeriği birden fazla görevde (net bir geçiş sonu etkinliği olmadan) asenkron olarak aktarır.
- Bazı SPA'lar içeriği her zaman ağdan yüklerken diğerleri, rota değişikliklerinin bellekten anında yüklenmesi için tüm içeriği önceden yükler.
Bu farklılıklar, SPA rota değişikliğini veya SPA'yı oluşturan unsurları tanımlamayı ve tespit etmeyi geniş ölçekte çok zor hale getirir.
Bazı durumlarda SPA rota değişikliği mantıksal olarak MPA sayfa yüklemesiyle aynıdır ve bu gibi durumlarda mevcut Core Web Vitals metriklerinin uygulanabilmesi çok iyi olur.
Ancak diğer tüm URL değişikliklerinden "gerçek" rota değişikliklerini güvenilir bir şekilde tanımlayacak sağlam sezgisel kurallar ve bu tür geçişlerin başlangıcını ve sonunu işaretleyen net sinyaller olmadan, bu durumlarda Core Web Vitals metriklerinin raporlanması verileri bulanıklaştırır ve daha az kullanışlı hale getirir ya da sitedeki gerçek kullanıcı deneyimini temsil etmez.
SPA'ların Core Web Vitals'ta iyi performans göstermesi MPA'lara kıyasla daha mı zor?
SPA mimarisinde, SPA'daki bir sayfanın MPA'daki benzer bir sayfa kadar hızlı yüklenmesini ve tüm Core Web Vitals metriklerinde aynı puanı almasını engelleyen hiçbir şey yoktur.
Ancak, düzgün şekilde optimize edilmiş MPA'ların, Core Web Vitals eşiklerini karşılamada SPA'ların şu anda sahip olmadığı bazı avantajları vardır. Bunun nedeni, MPA mimarisinde her "sayfanın" tam sayfa gezinme olarak yüklenmesidir (içeriği dinamik olarak getirip mevcut sayfaya eklemek yerine). Bu da bir MPA'yı ziyaret eden kullanıcıların siteden birden fazla sayfa yükleme olasılığının daha yüksek olduğu anlamına gelir. Bu da bir MPA için tüm sayfa yüklemelerinin dağılımının daha büyük bir yüzdesinin, alt kaynakların bir kısmını veya tamamını önbelleğe almasını gerektireceği anlamına gelir.
Bir MPA'nın Core Web Vitals metriklerinde SPA'dan daha iyi performans göstermesi için birkaç koşulun karşılanması gerekir:
- Aynı kaynaktan sayfa yüklemelerinin, 75. yüzdelik dilimde kaynak farklı sayfa yüklemelerinden gerçekten daha hızlı olmasını sağlamak için MPA'nın alt kaynak önbelleğe alma işlemini optimize etmesi gerekir.
- MPA'ları ziyaret eden kullanıcıların, sitenin daha hızlı sayfa yüklemelerine yol açan önbelleğe alma avantajlarından yararlanabilmesi için birden fazla sayfayı ziyaret etmesi gerekir.
Core Web Vitals değerlendirmeleri, sayfa ziyaretlerinin 75. yüzdelik dilimini dikkate aldığından veri kümesinde daha fazla sayıda iyi performans gösteren sayfa ziyareti olması, dağılımın 75. yüzdelik diliminde yer alan ziyaretin önerilen eşikler dahilinde olma olasılığını artırır.
Core Web Vitals puanlarını karşılaştırırken dikkate alınması gereken önemli bir nokta, verilerin nasıl toplandığıdır. Yani, dağıtımdaki veri kümesinin sitenizdeki veya kaynağınızdaki tüm sayfaları mı yoksa yalnızca belirli bir sayfa URL'si için sayfa yüklemelerini mi içerdiğidir.
Bir kaynaktaki tüm sayfaların puanları toplandığında, hızlı sayfalar kaynak için tüm olarak 75. yüzdelik dilimi iyileştirebilir. Ancak tek tek sayfalara göre toplandığında, bir sayfanın puanları sonraki sayfanın puanlarını etkilemez. Diğer bir deyişle, bir MPA'nın sayfaya göre puanları toplandığında, ödeme sayfasında görülen hızlı önbelleğe yüklemeler, sitenin açılış sayfasında yaşanan yavaş ilk yüklemelerin puanlarını iyileştirmez.
PageSpeed Insights'ı veya hem tek tek sayfa URL'leri hem de kaynağın tamamı için puanları bildiren Chrome Kullanıcı Deneyimi Raporu API'sini kullanarak sitenizin farklı toplama yöntemlerine göre puanını kontrol edebilirsiniz.
SPA mimarisinin Önemli Web Verileri puanlarını etkileyebileceği bir diğer yöntem de bir sayfanın tüm yaşam süresini dikkate alan metrikler içindir. SPA'ları ziyaret eden kullanıcılar oturum boyunca aynı "sayfada" kalma eğiliminde olduğundan, zaman içinde biriken metrikler SPA'larda MPA'lara kıyasla daha sert olabilir.
Nisan 2021'de, bu sorunu kısmen gideren CLS metriğinde yapılan değişiklikleri duyurmuştuk. Daha önce CLS, sayfanın kullanım süresinin tamamı boyunca birikiyordu. Şimdi ise yalnızca belirli bir zaman aralığında (özellikle belirli bir sayfadaki en kötü düzen değişikliği patlaması) birikiyor.
Ancak yeni CLS tanımıyla bile SPA'lar dezavantajlı durumdadır. Bunun nedeni, CLS değerinin bir MPA'da tam sayfa yüklemelerinde olduğu gibi rota geçişlerinden sonra "sıfırlanmaması"dır. Ayrıca, rota geçişinden sonra gerçekleşen düzen değişiklikleri, değişiklik sırasında adres çubuğundaki URL'ye değil, sayfanın yüklendiği sıradaki URL'ye bağlanacağından bu durum karışıklıklara da neden olabilir (daha fazla bilgi aşağıda).
SPA mimarileri kullanıcı deneyimini iyileştirse bu iyileşme metriklere yansıtılmalı değil mi?
Evet, çalışmalıdır. Daha önce de belirtildiği gibi, SPA'ların günümüzde web'de uygulandığı tüm farklı yöntemler göz önüne alındığında, deneyimin ne kadar iyileştiğini ölçmek büyük ölçekte zordur.
Gerçek şu ki, web performansı sektörü (Google dahil) geçmişte sayfanın yükleme sonrası performansı için kullanıcı odaklı metrikler geliştirmeye, sayfanın yüklenmesi için harcadığı kadar zaman ve çabayı harcamamıştır. Bunun nedeni, yükleme sonrası performansın önemli olmaması değil, yükleme sonrası kullanıcı deneyimi ve etkileşimlerin çok daha çeşitli ve daha az tanımlanmış olmasıdır. Bu da bu metriklerin tasarlanmasını zorlaştırır.
Ancak SPA performansını ölçmek için iyi tanımlanmış yükleme sonrası metrikler olsa bile, yükleme sonrası deneyim iyileştiği için yükleme deneyimini göz ardı etmek istemeyiz.
Web Vitals girişiminin hedeflerinden biri, bir web sayfasının yüklenmesi ve kullanılmasıyla ilgili mümkün olduğunca çok açıdan iyi kullanıcı deneyimlerini teşvik etmek ve teşvik etmektir. Yeterli sayıda iyi deneyim yaşayabiliyorsanız kötü deneyimlerin telafi edildiği senaryoları teşvik etmek istemiyoruz. Kullanıcılar, sayfaların hızlı yüklenmesini ve yeni içeriğe hızlı geçiş yapmayı ister. Bu tür deneyimleri destekleyen metrikler tasarlamaya çalıştık.
Bu nedenle, bir sitenin MPA sürümünün Core Web Vitals metriklerinde 75. yüzdelik dilimde aynı sitenin SPA sürümünden daha iyi performans gösterebileceği doğru olsa da SPA sürümünün "iyi" eşiğini karşılamaya çalışması gerekir. 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 hâlâ iyi olarak algılanmayacaktır.
Gelecekte, yükleme sonrası mükemmel deneyimleri teşvik eden metrikler geliştirmeyi planlıyoruz. Bu, yüksek kaliteli SPA'ları ilk yükleme deneyiminden ödün vermeden teşvik etmenin en iyi yoludur. Sayfa yaşam döngüsünün tamamında etkileşim gecikmesini ölçen Interaction to Next Paint (INP) adlı yeni bir metriği kullanıma sunduk. Ayrıca, SPA rota geçişlerini ölçen metrikler de dahil olmak üzere diğer yükleme sonrası metrikler üzerinde de aktif olarak çalışıyoruz (aşağıya bakın).
Sitemizi MPA'dan SPA'ya geçirdiğimizde puanlarımız düştü. Bu beklenen bir durum mu?
Duruma göre değişir. Büyük bir mimari taşıma işleminden sonra puanlarınızın değişmesinin birkaç nedeni olabilir. Ancak bu değişikliğin bir kısmı, sıcak önbellek yüklemelerinin sayısında yaşanan düşüşten kaynaklanabilir.
Bunu hızlı bir şekilde kontrol etmenin yolu, açılış sayfalarınızdan birinin hem MPA hem de SPA sürümünü Lighthouse ile test etmektir. SPA sürümü için Core Web Vitals metriklerinden herhangi birinde Lighthouse puanı daha düşükse güncelleme sonrasında yükleme deneyiminin kötüleştiği anlaşılır.
Core Web Vitals'ta daha iyi puan almak için sitemi SPA'dan MPA'ya geçirmeli miyim?
Muhtemelen karşılaşmazsınız. SPA'dan MPA'ya yalnızca SPA paketinizden memnun değilseniz ve MPA'nın daha iyi bir kullanıcı deneyimi sağlayacağına dair bir nedeniniz varsa geçmeniz gerekir.
Core Web Vitals metrikleri zaman içinde iyileştikçe ve tam tarama deneyiminin daha fazlasını kapsayacak şekilde genişledikçe, iyi tasarlanmış ve mükemmel kullanıcı deneyimi sunan SPA'lara sahip ekipler, Core Web Vitals puanlarının bunu yansıtmasını bekleyebilir.
Core Web Vitals puanları yalnızca SPA'nın açılış sayfaları için raporlanıyorsa rota geçişinden sonra "sayfalarda" oluşan sorunları nasıl hata ayıklayabilirim?
Core Web Vitals metriği için alan verilerini raporlayan Google araçları (Search Console ve PageSpeed Insights gibi), verilerini Chrome Kullanıcı Deneyimi Raporu'ndan (CrUX) alır. CrUX ise verileri kaynağa veya sayfa URL'sine (yani yükleme sırasındaki sayfa URL'sine) göre toplar.
CrUX, yukarıda listelenen tüm nedenlerden dolayı SPA yoluna göre verileri toplayamaz. Ancak kendi mimarinize aşina bir site sahibi olarak bunu kendiniz ölçebilirsiniz. Birçok analiz aracı, SPA rotası değişikliği olduğunda sinyal vermenize olanak tanır ve ölçüm verilerinizi buna göre günceller.
Web Vitals 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 sorunların her biri için hata ayıklama yapabilir hem de Google araçlarının metrikleri ölçme ve raporlama şekliyle eşleşecek şekilde orijinal sayfa URL'sine göre toplama yapabilirsiniz.
Bu konuyla ilgili daha fazla ayrıntı ve en iyi uygulamalar için Alandaki performansta hata ayıklama başlıklı makaleyi inceleyin.
Google, MPA'ların SPA'lara kıyasla haksız bir avantaj elde etmemesi için ne yapıyor?
Yukarıda belirtildiği gibi, düzgün şekilde optimize edilmiş bir MPA, bazı durumlarda önbelleğe alınmış sayfa ziyaretlerinin yüzdesinin daha yüksek olması nedeniyle 75. yüzdelik dilimde daha iyi Web Vitals puanları bildirebilir. Buna karşılık, düzgün şekilde optimize edilmiş SPA'larda kullanıcı deneyiminde yapılan gerçek iyileştirmeler şu anda Core Web Vitals metriklerinden hiçbiri tarafından yakalanmıyor.
Google olarak, bunun Web Vitals girişiminin hedefleriyle tam olarak uyumlu olmayan teşvikler oluşturduğunun farkındayız ve bu sorunu düzeltmenin yollarını aktif olarak araştırıyoruz. Şu anda kısa ve uzun vadeli iki olası çözümü inceliyoruz:
- Kökler arası ve aynı kaynaktan sayfa ziyaretlerini ayrı ayrı değerlendirin.
- Daha iyi SPA ölçümü sağlayan yeni API'ler tasarlayın.
Kökler arası ve aynı kaynaktan sayfa ziyaretlerini ayrı ayrı değerlendirme
Şu anda Önemli Web Verileri metrikleri tüm sayfa ziyaretlerini tek bir grupta toplar. Yeni ziyaretler ile geri gelen ziyaretler, açılış sayfaları ile ödeme sayfaları veya önbelleğe alma durumunun performansı etkileyebileceği diğer herhangi bir toplama türü arasında ayrım yapmaz.
SPA ve MPA performansı arasındaki farklılıkları normalleştirmenin bir yolu, farklı ziyaret türlerine farklı ağırlıklar uygulamaktır (potansiyel olarak tamamen farklı eşik önerileri ile bile).
Etkili önbelleğe alma uygulamalarını kesinlikle ödüllendirmek istiyoruz ancak site içi hızlı gezinmelerin, açılış sayfası yüklemelerinin yavaşlığını telafi etmesini istemiyoruz. Ayrıca, sitelerin yalnızca metrik puanlarını artırmak için uzun sayfaları daha kısa sayfalardan oluşan bir koleksiyona ayırmasını teşvik etmek istemiyoruz.
Kaynaklar arası ve aynı kaynaktaki sayfa ziyaretlerini ayrı ayrı değerlendirerek, belirli bir sitedeki bir türün göreceli popülerliğinin belirli bir metriğin dağılımını çarpıtmasına izin vermeden her iki deneyim türünün de önemli olmasını sağlayabiliriz.
Daha iyi SPA ölçümü sağlayan yeni API'ler tasarlama
Üzerinde aktif olarak çalışılan (yukarıdakilere paralel olarak) bir diğer çözüm de mevcut SPA kalıplarını standartlaştırmaya ve SPA kullanımını geniş ölçekte ölçmeyi ve anlamayı kolaylaştırmaya yardımcı olacak yeni bir Uygulama Geçmişi API'si'dir.
Uygulama Geçmişi API'si, SPA ölçümüne özgü iki önemli özelliğe sahip yeni bir navigate etkinliği kullanıma sunar:
- Yalnızca gezinme bir bağlantı tıklaması, form gönderimi veya tarayıcının geri veya ileri kullanıcı arayüzü aracılığıyla başlatıldıysa doğru olarak ayarlanan bir
userInitiatedişaretçisi. - Geliştiricinin, gezinme işlemini gerçekleştirmek için başlattığı çalışma tamamlandığında sinyal göndermesine olanak tanıyan bir söz alan
transitionWhile()yöntemi.
userInitiated işaretçisi, SPA rota geçişi için anlamsal bir başlangıç noktası belirlemek amacıyla kullanılabilir. Bu işaretçi, kullanıcı niyetini net bir şekilde belirtir. transitionWhile() Sözleşme çözümlemesi, tarayıcının boyaları belirli rota geçişiyle ilişkilendirmesine yardımcı olabilir. Böylece tarayıcı, söz konusu geçişle ilgili en büyük içerikli boyayı belirleyebilir.
Önceki bölümde sunulan fikrin üzerine inşa ederek, SPA rota geçiş süresini bir MPA'da aynı kaynaktan sayfa yüklemeleriyle aynı grupta toplama bile mümkün olabilir. Bu, MPA'dan SPA'ya geçiş yapan bir sitenin performansı önce ve sonra karşılaştırmasına olanak tanıdığı için heyecan vericidir.
Elbette bu tespitleri doğru bir şekilde yapıp yapamayacağımızı öğrenmeden önce daha fazla araştırma yapılması gerekiyor. Bu önerilerle ilgili öneri veya geri bildiriminiz varsa lütfen web-vitals-feedback@googlegroups.com adresine e-posta gönderin.
Son düşünceler
Google, Web Vitals metriklerini iyileştirmeye ve kullanıcılar için önemli olan yüksek kaliteli deneyimleri ölçtüğünden ve teşvik ettiğinden emin olmaya kararlıdır. Bununla birlikte, günümüzde ölçüm boşluklarının mevcut olduğunu kabul ediyoruz. Metrikler şu anda kullanıcı deneyiminin her yönünü kapsamıyor ancak bu boşlukları kapatmak için yoğun şekilde çalışıyoruz.
Mevcut sınırlamalara rağmen, mevcut metriklerin yakaladığı alanların web'in sağlığı ve başarısı için kritik olduğuna inanıyoruz. Ayrıca, sitelerin (mimariden bağımsız olarak) önerilen eşikleri karşılamaması durumunda iyileştirmeye açık alanlar olduğuna inanıyoruz.
Bu yayının, karmaşık ve incelikli olan bu konuya açıklık getirdiğini umuyoruz. Her zaman olduğu gibi, mevcut veya gelecekteki Web Vitals metrikleriyle ilgili geri bildiriminiz varsa lütfen web-vitals-feedback@googlegroups.com adresine e-posta gönderin.