Yavaş gezinmeleri ölçmeyle ilgili denemeler yapma

Barry Pollard

Yoav Weiss

Önemli Web Verileri girişimi, kurulduğu günden bu yana, bir web sitesinin nasıl oluşturulduğu veya yüklendiğiyle ilgili teknik ayrıntılar yerine, web sitesindeki gerçek kullanıcı deneyimini ölçmeye çalıştı. Üç Önemli Web Verileri metriği, kullanıcı odaklı metrikler olarak oluşturulmuştur. Bu metrikler, DOMContentLoaded veya load gibi mevcut teknik metriklere göre daha gelişmiştir ve kullanıcıların sayfanın performansını algılama biçimiyle genellikle alakasız olan zamanlamaları ölçmüştür. Bu nedenle, siteyi oluşturmak için kullanılan teknoloji, sitenin iyi performans göstermesini sağlayan puanlamayı etkilememelidir.

Gerçeklik her zaman ideal olandan biraz daha karmaşıktır ve popüler Tek Sayfalık Uygulama mimarisi hiçbir zaman Core Web Vitals metrikleri tarafından tam olarak desteklenmemektedir. Bu web uygulamaları, kullanıcı sitede gezinirken ayrı, tek tek web sayfaları yüklemek yerine, sayfa içeriğinin JavaScript tarafından değiştirildiği "yumuşak gezinme" adı verilen uygulamaları kullanır. Bu uygulamalarda, geri ve ileri düğmelerinin kullanıcının beklediği gibi çalışmasını sağlamak için URL değiştirilerek ve tarayıcı geçmişindeki önceki URL'ler aktarılarak geleneksel web sayfası mimarisi illüzyonu korunur.

Birçok JavaScript çerçevesi bu modeli kullanır, ancak bunların her biri farklı bir şekilde kullanır. Bu alan, tarayıcının geleneksel olarak "sayfa" olarak anladığı şeyin dışında olduğundan bunu ölçmek her zaman zor olmuştur. Mevcut sayfadaki etkileşim ile bunu yeni sayfa olarak kabul etmek arasındaki çizgiyi nerede çizmek gerekir?

Chrome ekibi bir süredir bu zorluğun üzerine düşünüyor ve geleneksel çok sayfalı mimaride (MPA) uygulanan web sitelerinin ölçümüne benzer şekilde, "soft gezinme"nin ne olduğu ve bunun için Core Web Vitals'ın nasıl ölçülebileceği ile ilgili bir tanımı standartlaştırmaya çalışıyor. Ekip, daha erken aşamalarda olsalar da, uygulamaya konmuş özellikleri sitelerin daha fazla test edebilmeleri için daha geniş çapta kullanılabilir hale getirmeye hazırdır. Bu, sitelerin yaklaşımla ilgili geri bildirim sağlamasına olanak tanır.

Kolay gezinme nedir?

Kolay gezinme için şu tanımı belirledik:

• Gezinme, bir kullanıcı işlemiyle başlatılır.
• Gezinme sonucunda kullanıcı için görünür bir URL değişikliği ve geçmiş değişikliği elde edilir.
• Gezinme işlemi bir DOM değişikliğine neden olur.

Bazı sitelerde, bu buluşsal yöntemler yanlış pozitif sonuçlar doğurabilir (kullanıcılar gerçekte "gezinme" işleminin gerçekleştiğini düşünmezler) veya yanlış negatiflere (kullanıcının bu ölçütleri karşılamamasına rağmen "gezinme" olduğunu düşünür). Kolay gezinme spesifikasyonu deposunda, buluşsal yöntemlerle ilgili geri bildirimlerinizi bekliyoruz.

Chrome, esnek gezinmeyi nasıl uyguluyor?

Esnek gezinme bulguları etkinleştirildikten sonra (bu konuyla ilgili daha fazla bilgiyi bir sonraki bölümde bulabilirsiniz), Chrome bazı performans metriklerini raporlama şeklini değiştirecektir:

• Her soft gezinme algılandıktan sonra bir soft-navigation PerformanceTiming etkinliği yayınlanır.
• Performance API, soft-navigation PerformanceTiming etkinliği tarafından yayınlanan bir soft-navigation zamanlama girişine erişim sağlar.
• İlk Boyama (FP), İlk Zengin İçerikli Boyama (FCP), Largest Contentful Paint (LCP) metrikleri sıfırlanır ve bunların sonraki uygun oluşumlarında yeniden yayınlanır. (Not: FP ve FCP henüz uygulanmamıştır.)
• Etkinliğin ilişkili olduğu gezinme girişine karşılık gelen performans zamanlamalarının (first-paint, first-contentful-paint, largest-contentful-paint, first-input-delay, event ve layout-shift) her birine bir navigationId özelliği eklenecek. Böylece Cumulative Layout Shift (CLS) ve Sonraki Boyamayla Etkileşim (INP) değerleri hesaplanabilir.

Bu değişiklikler, Önemli Web Verileri'nin (ve ilişkili teşhis metriklerinden bazılarının) sayfa gezinmesi başına ölçülmesine olanak tanıyacaktır. Ancak dikkat edilmesi gereken bazı ayrıntılar söz konusudur.

Chrome'da kolay gezinmeyi etkinleştirmenin etkileri nelerdir?

Site sahiplerinin bu özelliği etkinleştirdikten sonra göz önünde bulundurması gereken değişikliklerden bazıları şunlardır:

• Esnek gezinmeler için ek FP, FCP ve LCP etkinlikleri yeniden yayınlanabilir. Chrome Kullanıcı Deneyimi Raporu (CrUX) bu ek değerleri yoksayar ancak bu durum, sitenizdeki Gerçek Kullanıcı Ölçümü (RUM) izlemeyi etkileyebilir. Bunun söz konusu ölçümleri etkileyip etkilemeyeceğini düşünüyorsanız RUM sağlayıcınızla görüşün. Kolay gezinmeler için Core Web Vitals'ı ölçme bölümüne bakın.
• Performans girişlarınızdaki yeni (ve isteğe bağlı) navigationID özelliğinin, bu girişleri kullanan uygulama kodunuzda dikkate alınması gerekebilir.
• Yalnızca Chromium tabanlı tarayıcılar bu yeni modu destekleyecek. Yeni metriklerin çoğu yalnızca Chromium tabanlı tarayıcılarda kullanılabilse de, bazıları (FCP, LCP) diğer tarayıcılarda kullanılabilir ve herkes Chromium tabanlı tarayıcıların en son sürümüne geçmemiş olabilir. Bu nedenle, bazı kullanıcıların kolay gezinme metriklerini bildirmeyebileceğini unutmayın.
• Varsayılan olarak etkin olmayan deneysel yeni bir özellik olan siteler, başka istenmeyen yan etkiler olmadığından emin olmak için bu özelliği test etmelidir.

Kolay gezinme metriklerinin nasıl ölçüleceği hakkında daha fazla bilgi edinmek için soft gezinme başına Önemli Web Verilerini Ölçme bölümüne bakın.

Chrome'da kolay gezinmeyi nasıl etkinleştiririm?

Geçici gezinmeler Chrome'da varsayılan olarak etkin değildir, ancak bu özellik açık bir şekilde etkinleştirilerek Chrome 110'da deneme amacıyla kullanılabilir.

Geliştiriciler için bu, chrome://flags/#enable-experimental-web-platform-features adresinde Deneysel Web Platformu özellikleri işaretini etkinleştirerek veya Chrome'u başlatırken --enable-experimental-web-platform-features komut satırı bağımsız değişkenini kullanarak etkinleştirebilir.

Etkisini tüm ziyaretçilerinin görmesini isteyen bir web sitesi için Chrome 117'de çalıştırılan bir kaynak denemesi vardır. Bu deneme için kaydolarak ve HTML veya HTTP başlığına kaynak deneme jetonuna sahip bir meta öğe ekleyerek etkinleştirilebilir. Daha fazla bilgi için Kaynak denemelerini kullanmaya başlama başlıklı makaleyi inceleyin.

Site sahipleri, kaynak denemesini sayfalarına herkes veya yalnızca bir kullanıcı alt kümesi için eklemeyi seçebilir. Bu değişikliğin, özellikle bu kaynak denemesini kullanıcılarınızın büyük bir kısmı için etkinleştirdiğinizde, metriklerinizin raporlanma şeklini nasıl değiştirdiğiyle ilgili olarak bir önceki etkiler bölümünden haberdar olun. CrUX'in, bu yumuşak gezinme ayarından bağımsız olarak metrikleri mevcut şekilde raporlamaya devam edeceğini ve dolayısıyla bu etkilerden etkilenmeyeceğini unutmayın. Ayrıca, kaynak denemelerinin, 14 gün boyunca tüm Chrome sayfalarının ortalama% 0,5'inde deneysel özellikleri etkinleştirmekle sınırlı olduğunu da belirtmek gerekir.Ancak bu, yalnızca çok büyük siteler için bir sorun teşkil eder.

Esnek gezinmeleri nasıl ölçebilirim?

Esnek gezinme denemesi etkinleştirildikten sonra metrikler, her zamanki gibi PerformanceObserver API'sini kullanarak raporlar. Bununla birlikte, bu metrikler için dikkate alınması gereken bazı ek noktalar vardır.

Kolay gezinmeleri raporla

Esnek gezinmeleri gözlemlemek için bir PerformanceObserver kullanabilirsiniz. Aşağıda, buffered seçeneğini kullanarak bu sayfadaki önceki yazılım gezinmeleri de dahil olmak üzere konsola yumuşak gezinme girişlerini günlüğe kaydeden bir kod snippet'i örneği verilmiştir:

const observer = new PerformanceObserver(console.log);
observer.observe({ type: "soft-navigation", buffered: true });

Bu, önceki gezinmeye ilişkin tam sayfa metriklerini kesinleştirmek için kullanılabilir.

Metrikleri uygun URL'ye göre raporlayın

Esnek gezinmeler yalnızca gerçekleştikten sonra görülebildiğinden, mevcut URL artık yeni sayfanın güncellenmiş URL'sini yansıtacağından, bazı metriklerin bu etkinlik sonrasında kesinleştirilmesi ve ardından önceki URL için raporlanması gerekir.

Etkinliği tekrar doğru URL'ye bağlamak için uygun PerformanceEntry öğesinin navigationId özelliği kullanılabilir. Bu durum, PerformanceEntry API ile aranabilir:

const softNavEntry =
  performance.getEntriesByType('soft-navigation').filter(
    (entry) => entry.navigationId === navigationId
  )[0];
const hardNavEntry = performance.getEntriesByType('navigation')[0];
const navEntry = softNavEntry || hardNavEntry;
const pageUrl = navEntry?.name;

Metrikleri, geçmişte kullanmış olabilecekleri mevcut URL'ye göre değil, doğru URL'ye göre raporlamak için bu pageUrl kullanılmalıdır.

Kolay gezinme özelliklerinin startTime bilgisi alınıyor

Rota izleme başlangıç zamanı benzer bir şekilde elde edilebilir:

const softNavEntry =
  performance.getEntriesByType('soft-navigation').filter(
    (entry) => entry.navigationId === navigationId
  )[0];
const hardNavEntry = performance.getEntriesByType('navigation')[0];
const navEntry = softNavEntry || hardNavEntry;
const startTime = navEntry?.startTime;

startTime, kolay gezinmeyi başlatan ilk etkileşimin (örneğin, bir düğmenin tıklanması) zamanıdır.

Esnek gezinmeler de dahil olmak üzere tüm performans zamanlamaları, ilk "donan" sayfada gezinme zamanından itibaren bir süre olarak raporlanır. Bu nedenle, esnek gezinme başlangıç zamanı, bu esnek gezinme süresine göre yumuşak gezinme yükleme metriği sürelerinin (örneğin LCP) temel çizgisini belirlemek için gereklidir.

Esnek gezinme başına Core Web Vitals'ı ölçme

Esnek gezinme metriği girişleri dahil etmek için performans gözlemleyicinizin observe çağrısına includeSoftNavigationObservations: true öğesini dahil etmeniz gerekir.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout Shift time:', entry);
  }
}).observe({type: 'layout-shift', buffered: true, includeSoftNavigationObservations: true});

Chrome'daki kolay gezinme özelliğini etkinleştirmeye ek olarak observe yönteminde ekstra includeSoftNavigationObservations işareti gerekir. Performans gözlemleyicisi düzeyindeki bu açık tercih, mevcut performans gözlemcilerinin bu ekstra girişlere şaşırmamasını sağlar. Esnek gezinmeler için Önemli Web Verileri'ni ölçmeye çalışırken bazı ek hususların dikkate alınması gerekir.

Zamanlamalar, yine orijinal "donan" gezinme başlangıç zamanına göre döndürülür. Dolayısıyla, örneğin yumuşak gezinmeyle ilgili bir zamanlama elde etmek için LCP zamanlamasını alıp önceden açıklandığı gibi uygun yumuşak gezinme başlangıç zamanını çıkarmanız gerekir. Örneğin, LCP için:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    const softNavEntry =
      performance.getEntriesByType('soft-navigation').filter(
        (navEntry) => navEntry.navigationId === entry.navigationId
      )[0];
    const hardNavEntry = performance.getEntriesByType('navigation')[0];
    const navEntry = softNavEntry || hardNavEntry;
    const startTime = navEntry?.startTime;
    console.log('LCP time:', entry.startTime - startTime);
  }
}).observe({type: 'largest-contentful-paint', buffered: true, includeSoftNavigationObservations: true});

Bazı metrikler geleneksel olarak sayfanın ömrü boyunca ölçülür: Örneğin LCP, bir etkileşim gerçekleşene kadar değişebilir. CLS ve INP, sayfadan ayrılana kadar güncellenebilir. Bu nedenle, her yeni kolay gezinme gerçekleştiğinde her "gezinme"nin (orijinal gezinme de dahil) önceki sayfanın metriklerini sonlandırması gerekebilir. Bu, başlangıçtaki "zor" gezinme metriklerinin her zamankinden daha erken kesinleştirilebileceği anlamına gelir.

Benzer şekilde, bu uzun süreli metriklerin yeni yumuşak gezinmesiyle ilgili metrikler ölçülmeye başlandığında, metriklerin "sıfırlanması" veya "yeniden başlatılması" ve yeni metrik olarak değerlendirilmesi, önceki "sayfalar" için ayarlanan değerlerin belleğini yitirmesi gerekir.

Gezinmeler arasında aynı kalan içerik nasıl ele alınmalı?

Yumuşak gezinme için FP, FCP ve LCP yalnızca yeni boyaları ölçer. Bu durum, farklı bir LCP ile sonuçlanabilir (örneğin, yumuşak gezinmenin baştan yüklenmesi, yavaş yüklenen yükleme gibi).

Örneğin, LCP öğesi olan büyük bir banner resmi içeren ancak her ekran gezinmeyle altındaki metnin değiştiği bir sayfayı ele alalım. İlk sayfa yüklemesinde banner resmi LCP öğesi olarak işaretlenir ve LCP zamanlamasında buna dayanılır. Sonraki yumuşak gezinmelerde altındaki metin, kolay gezinmeden sonra boyanan en büyük öğe ve yeni LCP öğesi olacaktır. Ancak yumuşak gezinme URL'sine derin bağlantıyla yeni bir sayfa yüklenirse banner resmi yeni bir boya olur ve bu nedenle LCP öğesi olarak değerlendirilmeye uygun olur.

Bu örnekte olduğu gibi, yumuşak gezinme için LCP öğesi, sayfanın nasıl yüklendiğine bağlı olarak farklı şekilde raporlanabilir. Aynı şekilde, sayfanın daha alt kısımlarında bir sabit bağlantı içeren sayfanın yüklenmesi farklı bir LCP öğesiyle sonuçlanabilir.

TTFB nasıl ölçülür?

Bir geleneksel sayfa yüklemesinde İlk Bayt Süresi (TTFB), orijinal isteğin ilk baytlarının döndürüldüğü süreyi temsil eder.

Yumuşak gezinme için bu daha zor bir sorudur. Yeni sayfa için gönderilen ilk isteği ölçmemiz gerekir mi? Tüm içerik uygulamada zaten mevcutsa ve başka bir istek yoksa ne olur? Bu istek önceden bir ön getirme ile yapıldıysa ne olur? Kullanıcı açısından esnek gezinmeyle ilgili olmayan bir istek (örneğin, analiz isteği) ne olacak?

Daha basit bir yöntem, geri-ileri önbellek geri yükleme işlemleri için önerdiğimiz şekilde, kolay gezinmeler için TTFB'nin 0 olarak bildirilmesidir. web-vitals kitaplığı şu anda kolay gezinme işlemleri için bu yöntemi kullanmaktadır.

Gelecekte, hangi isteğin kolay gezinmenin "gezinme isteği" olduğunu bilmenin daha kesin yollarını destekleyebilir ve daha kesin TTFB ölçümlerine sahip olabiliriz. Ancak bu, mevcut denemenin parçası değil.

Hem eski hem yeni nasıl ölçülür?

Bu deneme sırasında Core Web Vitals'ı, CrUX'in ölçeceği ve Core Web Vitals girişiminin resmi veri kümesi olarak raporlayacağı veri kümesiyle eşleştirmek üzere "tam" sayfa gezinmelerine dayanarak mevcut şekilde ölçmeye devam etmeniz önerilir.

Esnek gezinmeler de ölçülmelidir. Böylece bunların gelecekte nasıl ölçülebileceğini görebilir ve Chrome ekibine bu uygulamanın pratikte nasıl işlediği konusunda geri bildirimde bulunabilirsiniz. Bu, sizin ve Chrome ekibinin gelecekte API'yi şekillendirmenize yardımcı olur.

Her ikisini de ölçmek için, yumuşak gezinme modundayken yayınlanabilecek yeni etkinlikleri (örneğin, birden fazla FCP ve ek LCP etkinliği) göz önünde bulundurmanız ve bu metrikleri uygun zamanda sonlandırarak bunları uygun şekilde ele almanız ve aynı zamanda yalnızca kolay gezinme modunda geçerli olacak gelecekteki etkinlikleri göz ardı etmeniz gerekir.

Kolay gezinme için Core Web Vitals'ı ölçmek üzere web-vitals kitaplığını kullanın

Tüm farkları dikkate almanın en kolay yolu, ayrı bir soft-navs branch içinde hafif gezinme için deneysel destek sunan web-vitals JavaScript kitaplığını kullanmaktır (bu özellik npm ve unpkg'da da kullanılabilir). Bu, şu şekilde ölçülebilir (doTraditionalProcessing ve doSoftNavProcessing yerine uygun şekilde):

import {
  onTTFB,
  onFCP,
  onLCP,
  onCLS,
  onINP,
} from 'https://unpkg.com/web-vitals@soft-navs/dist/web-vitals.js?module';

onTTFB(doTraditionalProcessing);
onFCP(doTraditionalProcessing);
onLCP(doTraditionalProcessing);
onCLS(doTraditionalProcessing);
onINP(doTraditionalProcessing);

onTTFB(doSoftNavProcessing, {reportSoftNavs: true});
onFCP(doSoftNavProcessing, {reportSoftNavs: true});
onLCP(doSoftNavProcessing, {reportSoftNavs: true});
onCLS(doSoftNavProcessing, {reportSoftNavs: true});
onINP(doSoftNavProcessing, {reportSoftNavs: true});

Metriklerin daha önce de belirtildiği gibi doğru URL ile raporlandığından emin olun.

web-vitals kitaplığı, yumuşak gezinmeler için aşağıdaki metrikleri raporlar:

Bu değişiklikler, Önemli Web Verileri ölçümlerinin bir parçası olacak mı?

Bu yumuşak gezinme denemesi tam olarak bir denemedir. Bu yaklaşımın Core Web Vitals girişimine entegre edilip edilmeyeceği konusunda herhangi bir karar vermeden önce buluşsal yöntemleri değerlendirmek ve kullanıcı deneyimini daha doğru yansıtıp yansıtmadığını görmek istiyoruz. Bu denemenin mümkün olması bizi çok heyecanlandırıyor, ancak bunun mevcut ölçümlerin yerini alıp almayacağı veya ne zaman geçeceği konusunda garanti veremiyoruz.

Web geliştiricilerin denemeyle ilgili geri bildirimleri, kullanılan bulgular ve sizin yaptığınız deneyimi daha doğru yansıtıp yansıtmadığı bizim için çok değerlidir. Yardımcı gezinmeye yönelik GitHub deposu bu geri bildirimi vermek için en iyi yerdir, ancak Chrome'un bunu uygulamasına ilişkin belirli hataların Chrome sorun izleyicisinde belirtilmesi gerekir.

CrUX'te yumuşak gezinmeler nasıl raporlanır?

Bu denemenin başarılı olması durumunda CrUX'te tam olarak yumuşak gezinmelerin nasıl raporlanacağı da hâlâ belirlenecek. Bunların, mevcut "kıt" gezinmelerle aynı şekilde değerlendirileceği kesin değildir.

Bazı web sayfalarında kolay gezinme, kullanıcı açısından tam sayfa yüklemeleriyle neredeyse aynıdır ve Tek Sayfalı Uygulama teknolojisinin kullanımı yalnızca bir uygulama ayrıntısıdır. Bazı durumlarda ise kısmi ek içeriğe benzer olabilir.

Bu nedenle, bu yazılım gezinmelerini ayrı olarak CrUX'te raporlamaya veya belirli bir sayfa ya da sayfa grubu için Önemli Web Verileri'ni hesaplarken bunlara ağırlık vermeye karar verebiliriz. Ayrıca, sezgisel sistem geliştikçe kısmi yükleme yumuşak gezinmeyi tamamen hariç tutabiliriz.

Şu anda ekip, bu denemenin başarısını değerlendirmemize olanak tanıyacak sezgisel ve teknik uygulamaya yoğunlaşmaktadır. Dolayısıyla, bu konularda herhangi bir karara varılmamıştır.

Geri bildirim

Aşağıdaki yerlerde, bu denemeyle ilgili etkin bir şekilde geri bildirim almak istiyoruz:

• Yumuşak gezinme yöntemleri ve standartlaştırma.
• Bu buluşsal yöntemlerin Chrome uygulama sorunları.
• web-vitals-feedback@googlegrouops.com adresinden genel web verileriyle ilgili geri bildirimler.

Değişiklik günlüğü

Bu API deneme aşamasında olduğu için kararlı API'lere kıyasla bir dizi değişiklik yapılmaktadır. Daha fazla ayrıntı için Geçici Gezinme Sezgileri Değişiklik Günlüğü'ne bakabilirsiniz.

Sonuç

Yumuşak gezinme deneyimi, şu anda metriklerimizde bulunmayan yaygın bir kalıbı modern web'de ölçmek üzere Core Web Vitals girişiminin nasıl değişebileceğine dair heyecan verici bir yaklaşım. Bu deneme henüz yolun başında olmasına ve daha yapılacak çok iş olmasına rağmen, şu ana kadar kaydedilen ilerlemeyi daha geniş web topluluğunun denemeler yapabileceği şekilde kullanılabilir hale getirmek önemli bir adımdır. Bu denemeyle ilgili geri bildirim toplamak, denemenin önemli bir parçasıdır. Bu nedenle, bu geliştirmeyle ilgilenenlerin, API ile ölçmeyi umduğumuz değerleri temsil ettiğinden emin olmak için bu fırsatı kullanarak API'yi şekillendirmeye yardımcı olmalarını önemle tavsiye ederiz.

Teşekkür

Jordan Madrid'in Unsplash'teki küçük resmi