SPA'lar, Core Web Vitals ve Google'ın mevcut ölçüm sınırlamalarını ele alma planı hakkında sık sorulan soruların yanıtları.
Mayıs 2020'de Web Verileri girişimini ilk kullanıma sunduğumuzdan beri geliştiricilerinden Chrome ekibiyle iletişime geçme konusunda çok sayıda çok önemli.
Muhtemelen en çok soru aldığımız konu da şu: cevaplanması gereken en zor soru şu: Core Web Vitals'ın bir tek sayfalık uygulama (SPA) ile SPA mimarilerinin Core Web Vitals puanlarını nasıl etkilediği hakkında konuştuk.
Bu soruları yanıtlamak zordur çünkü sorun oldukça inceliklidir, bu nedenle Bu gönderide, en sık sorulan soruları yanıtlamak için elimizden geleni yapacağız. bilgi ve bağlam sağlamaya çalışıyoruz.
Ancak ayrıntılara girmeden önce, Google'ın oluşturmak için hangi mimarinin veya teknolojinin kullanılacağı konusunda hiçbir girin. Hem SPA'ların hem de çok sayfalı uygulamaların (MPA) uyumlu web'deki amacımız ve bununla ilgili önemli bir husus, vitals girişimi, deneyimi bağımsız olarak ölçen metrikler sağlamaktır öncüsü. Günümüzde bu her durumda mümkün olmasa da (yenilikçiler, web platformundaki sınırlamalar) söz konusu sınırlamaları kapatmak için görüntüleyebilirsiniz.
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 sayfada gezinme olanağı sunar. Bir sayfa dinamik olarak yeni bir içerik yer alıyorsa ve adres çubuğundaki URL'sini güncellediğinde Core Web Vitals metriklerinin ölçülme şekline etkisi olur. Metrik değerleri ve her bir metrik ölçümüyle ilişkili URL, kullanıcının sayfa yüklemeyi başlatan içeriğe gidin.
Core Web Vitals metrikleri, SPA rota değişikliklerini geleneksel sayfa yüklemeleriyle aynı şekilde ele alabilir mi?
Maalesef hayır. Yine de henüz değil.
Günümüzde SPA oluşturmanın standart bir yolu yok. popüler SPA ve yönlendirme kitaplıkları dahil olmak üzere, kullanıcı deneyimi oldukça farklı olabilir. uygulamadan uygulamaya:
- Bazı SPA'lar URL'yi yalnızca yeni "tam sayfa" yüklenirken günceller. içerik, diğer siteler küçük içerik değişiklikleri veya hatta yalnızca kullanıcı arayüzü durumu için URL'yi günceller anlamına gelir.
- Bazı SPA'lar URL'yi History API'yi kullanarak güncellerken diğerleri karma URL'yi kullanır eski tarayıcıları desteklemek için yapılan değişiklikler de (diğerleri, URL'yi dahil).
- Bazı SPA'lar içerik yükleyip URL'yi güncellerken bazıları URL'yi günceller. inceleyin.
- Bazı SPA'lar içeriği aynı anda ve eşzamanlı olarak tek bir JavaScript'te yükler. diğer kullanıcılar ise eşzamansız olarak birden fazla dijital içerikte (kesin bir geçiş bitiş etkinliği belirtilmeden).
- Bazı SPA'lar her zaman ağdan içerik yüklerken bazıları tüm içeriği önceden yükler. Rota değişiklikleri, bellekten anında yüklenir.
Bu farklılıklar, bir SPA rotasının tanımlanmasını ve tanımlanmasını hatta bir SPA'nın kendisinin bile geniş ölçekli olması çok zordur.
Bazı durumlarda, bir SPA rota değişikliği mantıksal olarak MPA sayfa yüklemesiyle aynı olur. Bu gibi durumlarda, mevcut Core Web Vitals metriklerinin olabileceğini unutmayın.
Ancak, "gerçek" teriminin güvenilir bir şekilde tanımlanmasını sağlayacak sağlam buluşsal yöntemler olmadan rota değişiklikleri diğer tüm URL değişikliklerinin yanı sıra gibi geçişler söz konusu olabilir. Bu durumlarda Core Web Vitals metriklerinin raporlanması ve gerçek kullanıcı deneyimini daha az yararlı veya temsili hale getirmez teşekkür ederiz.
SPA'ların Core Web Vitals'da daha iyi performans göstermesi MPA'lardan daha mı zor?
SPA mimarisinin, bir sayfanın kendi içinde olmasını engelleyecek kadar hızlı yüklenmesini önleyerek ve temel seviyenin tamamında Web Verileri metrikleri (MPA'daki benzer bir sayfa olarak).
Öte yandan, düzgün şekilde optimize edilmiş MPA'ların Temel Web SPA'ların şu anda sahip olmadığı vitals eşikleri. Bunun nedeni, MPA ile her "sayfada" tam sayfa gezinme olarak yüklenir ( ekleme) (yani içeriği dinamik olarak getirme ve mevcut sayfaya ekleme) o MPA'yı ziyaret eden kullanıcıların, o haftadan fazla sayfa yükleme Bu da tüm dönüşümlerin dağılımının daha büyük bir yüzdesinin MPA için sayfa yüklemeleri, ilgili alt kaynakların bir kısmını veya tamamını içerir. önbelleğe alındı.
MPA'nın Core Web Vitals metriklerinde SPA'ya göre daha iyi performans göstermesi için izin verildi bazı bilgilerin doğru olması gerekir:
- MPA'nın optimize edilmiş alt kaynak önbelleğe alma özelliğine sahip olması gerekir. aynı kaynak sayfa yüklemeleri gerçekten 75. yüzdelik dilim.
- MPA'ları ziyaret eden kullanıcıların, sitenin sayfaların daha hızlı yüklenmesini sağlayan önbelleğe alma avantajlarından yararlanabilir.
Core Web Vitals değerlendirmeleri, verilerin 75. sayfanın yüzdelik dilimi iyi performans gösteren sayfa ziyaretlerinin sayısı, daha yüksek performans gösteren dağılımın 75. yüzdelik dilimindeki ziyaretin görebilirsiniz.
Core Web Vitals puanlarını karşılaştırırken dikkat edilmesi gereken önemli bir nokta olduğunu unutmayın. verilerin toplanma şeklidir. Diğer bir deyişle, dağıtımdaki veri kümesinin sitenizdeki veya kaynağınızdaki tüm sayfaları ya da yalnızca belirli bir site için sayfa yüklemelerini içerir sayfa URL'si.
Bir kaynaktaki tüm sayfaların puanlarını toplarken bağımsız hızlı sayfalar, kaynağın bütün olarak 75. yüzdelik dilimini iyileştirir. Ancak toplama sırasında tek tek sayfalara ayrılırsa, bir sayfanın puanları o sayfanın puanlarını etkilemez tıklayın. Başka bir deyişle, MPA puanlarını sayfaya göre toplarken, hızlı önbellek ödeme sayfasında görülen yüklemeler yavaş başlangıç puanlarını artırmaz Sitenin açılışında görülen yüklemeler öğrenin.
Aşağıdakileri kullanarak farklı toplama yöntemleri için sitenizin puanını kontrol edebilirsiniz: PageSpeed Insights veya Chrome Kullanıcı Deneyimi Raporu API Böylece hem bağımsız sayfa URL'leri hem de kaynağın tamamı için puanları raporlanır.
SPA mimarisinin Core Web Vitals puanlarını etkileyebileceği bir başka yol da bir sayfanın tüm kullanım ömrünü göz önünde bulunduran metrikler. SPA'ları ziyaret eden kullanıcılar aynı "sayfada" kalma eğilimindedir oturum boyunca oturum boyunca zamanla SPA'larda MPA'lara göre daha sert olabilir.
Nisan 2021'de CLS metriğinde yapılan değişiklikleri duyurmuştuk. bu sorunu kısmen ele aldık. Önceden CLS, sayfa ömrü kadar kullanıcı tarafından incelenebilir. Ancak şu anda, bir sayfa düzenindeki en kötü düzen geçişleridir.
Ancak yeni CLS tanımıyla bile SPA'lar dezavantajlıdır. çünkü CLS değeri "sıfırlanmaz" sonra tam sayfa yüklemeleriyle birlikte çalışır. Bu durum karışıklığa da neden olabilir. Çünkü bir rota geçişinden sonra gerçekleşen kaymalar sayfa yüklendiğinde görünen URL'yi değil, vardiya sırasındaki adres çubuğundaki URL'yi (daha fazla bilgi inceleyin).
SPA mimarileri kullanıcı deneyimini iyileştiriyorsa bu iyileşme metriklere yansıtılmamalı mı?
Evet, olmalı. Daha önce de söylediğimiz gibi, son kullanıcılarınız için büyük bir ölçekte bunu yapmak zordur, örneğin SPA'ların günümüzde web'de uygulanma yöntemlerinden bahsedeceğiz.
Gerçek şu ki, web performansı sektörü (Google'ın dahil) geçmişte kullanıcı odaklı ürünler geliştirmek için hemen hemen aynı miktarda zaman metriklerinin yükleme sonrası performansına ilişkin olduğu gibi gösterir. Bunun nedeni, yükleme sonrası performans önemli değildir. Bunun nedeni, yükleme sonrası kullanıcı deneyimi ve etkileşimlerin çok daha çeşitli ve daha az tanımlanmıştır. Bu da projeniz için metrik tasarlamayı oluşturabilirsiniz.
Ancak SPA'yı ölçmek için yükleme sonrası metrikleri iyi tanımlamış olsak bile performans gösterdiğinde yükleme deneyimini göz ardı etmek istemeyiz. yükleme sonrası deneyimi iyileştirildi.
Web Verileri girişiminin hedeflerinden biri, bir web sayfasını yükleme ve kullanma konusunda ne kadar çok şey yapmasını sağlar. "Kötü deneyimlerin gerektiği" senaryoları teşvik etmek istemiyoruz. deneyimlerinizin telafisi için yeterli deneyiminiz varsa haklı çıkarmalısınız. Kullanıcı Sayısı sayfaların hızlı yüklenmesini ve yeni içeriğe hızla geçiş yapmasını istediğimiz için metrikleri tasarlayarak bu tür deneyimleri tercih edebilirsiniz.
Bir sitenin MPA sürümünün Core Web'de daha iyi performans gösterebileceği doğru olsa da, Tam olarak aynı öğenin SPA sürümüne göre 75. yüzdelik dilimde yer alan Vitals metrikleri SPA sürümünün “iyi” sürümünü karşılamaya çalışması gerekir. eşikler. Öğe SPA sürümü "iyi" sürümü karşılamıyor çoğu kullanıcı için eşik yapılır, daha sonra yükleme deneyimi yine de iyi olarak algılanmaz; örneğin, bu durum, iyi durumda olması gerekir.
Gelecekte, iyi, yükleme sonrası yüklemelerin gerçekleştirilmesini teşvik eden metrikler geliştirmeyi ve bunun, yüksek kaliteli içerik almayı teşvik etmenin en iyi yolu olduğuna inanıyoruz. SPA'ları ilk yükleme deneyimini tehlikeye atmayacak şekilde ayarlayın. Şu anda Sayfa yaşam döngüsünün tamamı boyunca etkileşim gecikmesini ölçen Sonraki Boyamayla Etkileşim (INP) adlı yeni bir metrik yayınladı. Şu anda, SPA rota geçişlerini ölçen metrikler de dahil olmak üzere yükleme sonrası metrikleri (aşağıya bakın).
Sitemizi MPA'dan SPA'ya geçirdik ve puanlarımız geriledi. Bu beklenen bir şey mi?
Duruma göre değişir. Bir sonraki aşamaya geçtikten sonra puanlarınızın değişebilmesinin büyük mimari taşıması ancak hazır önbellek yükleme sayısında azalma neden olmuş olabilir.
Bunu kontrol etmenin hızlı bir yolu, web sitelerinizden birinin hem MPA hem SPA içeren açılış sayfaları Lighthouse. Öğe Lighthouse puanı, SPA için Core Web Vitals metriklerinin hiçbirinde daha düşük büyük ihtimalle bu süreden sonra da yükleme deneyimi kötüleşmiştir. güncelleyin.
Core Web Vitals'da daha iyi puan almak için sitemi SPA'dan MPA'ya geçirmeli miyim?
Muhtemelen karşılaşmazsınız. Sadece memnun değilseniz SPA'dan MPA'ya geçmelisiniz. ve MPA'nın daha iyi performans sağlayabileceğini düşündüğünüz en iyi uygulamaları paylaşacağız.
Zaman içinde Core Web Vitals metrikleri iyileşip verilerin tamamını kapsadıkça iyi bir kullanıcı deneyimi sunan, iyi oluşturulmuş SPA'lara sahip ekipler Core Web Vitals puanlarının bunu yansıttığını görmeyi umuyorlar.
Core Web Vitals puanları yalnızca bir SPA'nın açılış sayfaları için raporlanıyorsa "sayfalarda" oluşan sorunlarda nasıl hata ayıklayabilirim? geçişten sonra ne olacak?
Core Web Vitals metriği için alan verilerini raporlayan Google araçları (ör. Arama Console ve PageSpeed Insights), verilerini Chrome Kullanıcı Deneyiminden alır Bildir (CrUX) tıklayın. CrUX, verileri kaynağa veya sayfa URL'sine (yani sayfa URL'si) ekleyebilirsiniz.
Yukarıda listelenen tüm nedenlerden dolayı, CrUX'in verileri Google Analytics ile SPA rotası. Ancak kendi mimarinizi bilen bir site sahibi olarak bunu kendiniz ölçebilirsiniz ve birçok analiz aracı, SPA rota değişikliği meydana geldiğinde ve ölçümünüzü güncellediğinde sinyal uygun hale getirir.
Bir analiz aracıyla Web Verileri metriklerini ölçerken hem geçerli rota URL'sini hem de orijinal sayfa URL'sini ölçmeyi sağlar. Bu, sayfa genelinde ortaya çıkan bağımsız sorunlarda hata ayıklamanıza olanak sağlar karşılaştırmak için orijinal sayfanın URL'sine göre toplamanızı da araçları kullanarak metriklerle ilgili ölçümler ve raporlar oluşturur.
Bu konuyla ilgili daha fazla bilgi ve en iyi uygulamalar için bkz. alanına giriş yapı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 bazı durumlarda daha iyi raporlama yapabilir Web Vitals, Google'ın uygulama verilerini yakalama ihtimalinin çok yüksek olması nedeniyle önbelleğe alınan sayfa ziyaretlerinin yüzdesi daha yüksektir. Öte yandan, proje yönetiminde uygun şekilde optimize edilmiş SPA'lardaki kullanıcı deneyimi şu anda yakalanmamaktadır Core Web Vitals metriklerinden herhangi birine göre analiz edilir.
Google'da bunun, Google bünyesinde ticari markalarla tamamen uyumlu olmayan teşvikler hedeflerine ulaşabiliyoruz. Ayrıca, bu amaçla web'de aktif olarak adımları uygulayın. Şu anda, biri kısa vadeli olmak üzere iki olası çözümü araştırıyoruz ve bir uzun terim:
- 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ğerlendirin
Bugün Core Web Vitals metrikleri tüm sayfa ziyaretlerini tek bir arasında bir fark yoktur; yeni ve geri gelen ziyaretler ya da sonuca ulaştırma arasında fark yoktur sayfaları ve ödeme sayfalarını ya da önbellek durumunun kontrol edildiği diğer toplama türlerini performansı etkileyebilir.
SPA ve MPA performansı arasındaki farkları normalleştirmenin bir yolu, farklı ziyaret türlerine farklı ağırlıklandırma uygular; birbirinden tamamen farklı bir eşik önerileri inceleyin.
Etkili önbellek uygulamalarını kesinlikle ödüllendirmek istesek de site içi hızlı gezinmelerin yavaş açılış sayfalarını kapatabilmesini istiyorsanız yükler. Ayrıca, siteleri uzun sayfaları daha küçük parçalara ayırmaya da Sırf metrik puanlarını yükseltmek amacıyla daha kısa sayfalar hazırlamak.
Kaynaklar arası ve aynı kaynaktan gelen sayfa ziyaretlerini ayrı ayrı değerlendirerek her iki deneyim türünün de önemli olduğundan emin olmak için belirli bir türdeki belirli bir türün popülerliği ile belirli bir metriğine karşılık gelir.
Daha iyi SPA ölçümü sağlayan yeni API'ler tasarlayın
Aktif olarak üzerinde çalışılan bir diğer çözüm de (yukarıdakilere paralel olarak) yardımcı olacak yeni bir App History API'si SPA kalıplarını kullanarak SPA kullanımını geniş ölçekte ölçüp anlamanızı kolaylaştırır.
App History API, yeni bir uygulama geçmişi
navigate etkinliği,
SPA ölçümüne özgü iki temel özellik vardır:
- CEVAP
userInitiatedişaretidir. Bu işaret, yalnızca gezinme işlemi bağlantı tıklama, form gönderme veya tarayıcının geri ya da ileri kullanıcı arayüzünü içerir. - CEVAP
transitionWhile()yöntemidir. Geliştiricinin, çalışmanın ne zaman yürütüleceğini belirtmesini başlattıklarının tam olarak ne kadar olduğuna dikkat edin.
userInitiated işareti, bir anahtar kelime için semantik başlangıç noktası belirlemek
Açık bir kullanıcı niyetini gösteren bir SPA rota geçişi. transitionWhile()
Söz konusu çözüm, tarayıcının boyaları belirli rotayla ilişkilendirmesine yardımcı olabilir.
Böylece, bu testin amacı en büyük zengin içerikli boyamanın
bu geçişle alakalı olabilir.
Bir önceki bölümde sunulan fikri temel alarak, SPA rota geçiş süresini aynı pakette toplamak için MPA'da aynı kaynak sayfa yüklenir. Bu heyecan verici çünkü bir siteye dönüşümden önceki ve sonraki performansı karşılaştırmak için bir MPA'dan SPA'ya sonra.
Elbette, doğru hesaplama yapıp yapamayacağımızı bilmemiz için daha fazla araştırma yapmamız gerekiyor. bir toplantıdır. Bunlarla ilgili önerileriniz veya geri bildiriminiz varsa lütfen e-posta gönderin web-vitals-feedback@googlegroups.com adresine e-posta gönderebilirsiniz.
Son düşünceler
Google, Web Verileri metriklerini iyileştirme ve önemli ve yüksek kaliteli deneyimleri ölçüp teşvik ederler. yardımcı olur. Bununla birlikte, günümüzde ölçüm boşluklarının mevcut olduğunun farkındayız. İlgili içeriği oluşturmak için kullanılan metrikler şu anda kullanıcı deneyiminin her unsurunu kapsamasa da devreye sokmak çok önemli bir rol oynar.
Mevcut sınırlamalara rağmen, mevcut metriklerin kullanabileceği alanları düşünüyoruz elde etmek için web'in sağlığı ve başarısı açısından sitelerin (mimari ne olursa olsun) önerilen eşikleri karşılamadığını unutmayın. iyileştirilmesi gereken noktalar olduğuna inanıyoruz.
Umarım bu gönderi bu karmaşık ve incelikli konuya biraz ışık tutmaya yardımcı olmuştur. Her zaman olduğu gibi, mevcut veya gelecekteki Web Vitals metrikleriyle ilgili geri bildiriminiz varsa lütfen e-posta gönderin web-vitals-feedback@googlegroups.com adresine e-posta gönderebilirsiniz.