Yavaş gezinmeleri ölçmeyle ilgili denemeler yapma

Barry Pollard

Yoav Weiss

Core Web Vitals girişimi, kullanıma sunulmasından bu yana bir web sitesinin nasıl oluşturulduğu veya yüklendiğiyle ilgili teknik ayrıntılar yerine, web sitesinin gerçek kullanıcı deneyimini ölçmeye çalışmaktadır. Üç Core Web Vitals metriği, kullanıcı odaklı metrikler olarak oluşturuldu. Bu metrikler, genellikle kullanıcıların sayfanın performansını algılama biçimiyle alakalı olmayan zamanlamaları ölçen DOMContentLoaded veya load gibi mevcut teknik metriklerden farklıdır. Bu nedenle, sitenin iyi performans göstermesi durumunda, sitenin oluşturulmasında kullanılan teknoloji puanlamayı etkilemez.

Gerçek durum her zaman idealden biraz daha karmaşıktır ve popüler Tek Sayfa Uygulama mimarisi Core Web Vitals metrikleri tarafından hiçbir zaman tam olarak desteklenmemiştir. Bu web uygulamaları, kullanıcı sitede gezinirken ayrı web sayfaları yüklemek yerine sayfa içeriğinin JavaScript tarafından değiştirildiği "yumuşak gezinme" özelliğini kullanır. Bu uygulamalarda, URL değiştirilerek ve önceki URL'ler tarayıcı geçmişine ekleyerek geleneksel bir web sayfası mimarisi yanılsaması oluşturulur. Böylece geri ve ileri düğmeleri kullanıcının beklediği gibi çalışır.

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

Chrome ekibi bu sorunu bir süredir ele alıyor ve "yumuşak gezinme"nin ne olduğuna ve Core Web Vitals'in bunun için nasıl ölçülebileceğine dair bir tanımı standartlaştırmaya çalışıyor. Bu standart, geleneksel çok sayfalı mimaride (MPA) uygulanan web sitelerinin ölçülmesine benzer şekilde olacak. Ekip, henüz erken aşamalarda olsa da uygulanmış olan özellikleri sitelerin denemesi için daha geniş bir kitleyle paylaşmaya hazır. Bu sayede siteler, şimdiye kadarki yaklaşım hakkında geri bildirimde bulunabilir.

Yumuşak gezinme nedir?

Yumuşak gezinme için şu tanımı belirledik:

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

Bazı sitelerde bu sezgisel kurallar, yanlış pozitiflere (kullanıcıların gerçekten "gezinme" gerçekleştiğini düşünmediği durumlar) veya yanlış negatiflere (kullanıcı bu ölçütleri karşılamasa da "gezinme" gerçekleştiğini düşündüğü durumlar) neden olabilir. Heuristics ile ilgili geri bildirimlerinizi soft navigation specification repository adresinden gönderebilirsiniz.

Chrome, yumuşak gezinmeleri nasıl uygular?

Yumuşak gezinme sezgileri etkinleştirildikten sonra (bu konu hakkında daha fazla bilgiyi sonraki bölümde bulabilirsiniz) Chrome bazı performans metriklerinin raporlanma şeklini değiştirir:

• Her yumuşak gezinme algılandıktan sonra bir soft-navigation PerformanceTiming etkinliği yayınlanır.
• Performans API'si, soft-navigation PerformanceTiming etkinliği tarafından yayınlanan bir soft-navigation zamanlama girişine erişim sağlar.
• First Paint (FP), First Contentful Paint (FCP), Largest Contentful Paint (LCP) metrikleri sıfırlanır ve bu metrikler uygun bir şekilde tekrar oluştuğunda yeniden yayınlanır. (Not: FP ve FCP uygulanmaz.)
• Etkinliğin ilişkili olduğu gezinme girişine karşılık gelen performans zamanlamalarına (first-paint, first-contentful-paint, largest-contentful-paint, first-input-delay, event ve layout-shift) bir navigationId özelliği eklenir. Bu özellik, Cumulative Layout Shift (CLS) ve Interaction to Next Paint (INP)'in hesaplanmasına olanak tanır.

Bu değişiklikler, Core Web Vitals'ın (ve ilişkili teşhis metriklerinden bazılarının) sayfa gezinme başına ölçülmesine olanak tanıyacak olsa da dikkate alınması gereken bazı ayrıntılar vardır.

Chrome'da yumuşak gezinme özelliğini etkinleştirmenin sonuçları nelerdir?

Site sahiplerinin bu özelliği etkinleştirdikten sonra dikkate alması gereken değişikliklerden bazıları şunlardır:

• Yumuşak 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) izlemesini etkileyebilir. Bu değişikliklerin bu ölçümleri etkileyip etkilemeyeceği konusunda endişeleriniz varsa RUM sağlayıcınızla görüşün. Yumuşak gezinmeler için Core Web Vitals'ı ölçmeyle ilgili bölüme bakın.
• Performans girişlerinizdeki yeni (ve isteğe bağlı) navigationID özelliğinin, bu girişleri kullanan uygulama kodunuzda dikkate alınması gerekebilir.
• Bu yeni mod yalnızca Chromium tabanlı tarayıcılarda desteklenir. Yeni metriklerin çoğu yalnızca Chromium tabanlı tarayıcılarda kullanılabilirken bazıları (FCP, LCP) diğer tarayıcılarda da kullanılabilir. Ayrıca, herkes Chromium tabanlı tarayıcıların en son sürümüne geçmemiş olabilir. Bu nedenle, bazı kullanıcıların yumuşak gezinme metriklerini bildirmeyebileceğini unutmayın.
• Varsayılan olarak etkinleştirilmeyen deneysel bir yeni özellik olduğundan sitelerin, istenmeyen başka yan etkiler olmadığından emin olmak için bu özelliği test etmesi gerekir.

Yumuşak gezinme metriklerini ölçme hakkında daha fazla bilgi için Yumuşak gezinme başına Core Web Vitals'ı ölçme bölümüne bakın.

Chrome'da yumuşak gezinmeleri nasıl etkinleştirebilirim?

Yumuşak gezinmeler Chrome'da varsayılan olarak etkin değildir ancak bu özellik açıkça etkinleştirilerek deneme amaçlı kullanılabilir.

Geliştiriciler için bu özellik, chrome://flags/#enable-experimental-web-platform-features adresinde Deneysel Web Platformu özellikleri işareti etkinleştirilerek veya Chrome'u başlatırken --enable-experimental-web-platform-features komut satırı bağımsız değişkeni kullanılarak etkinleştirilebilir.

Yumuşak gezinmeleri nasıl ölçebilirim?

Yumuşak gezinme denemesi etkinleştirildikten sonra metrikler her zamanki gibi PerformanceObserver API'si kullanılarak raporlanır. Ancak bu metrikler için dikkate alınması gereken bazı ek noktalar vardır.

Yumuşak gezinmeleri bildirme

Yumuşak gezinmeleri gözlemlemek için PerformanceObserver kullanabilirsiniz. Aşağıda, buffered seçeneğini kullanarak bu sayfadaki önceki yumuşak gezinmeler dahil olmak üzere yumuşak gezinme girişlerini konsola kaydeden örnek bir kod snippet'i verilmiştir:

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

Bu, önceki gezinme için tam yaşam boyu sayfa metriklerini tamamlamak amacıyla kullanılabilir.

Metrikleri uygun URL'ye göre bildirme

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

Etkinliği doğru URL'ye bağlamak için uygun PerformanceEntry öğesinin navigationId özelliği kullanılabilir. Bu bilgiler 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;

Bu pageUrl, metrikleri geçmişte kullanmış olabilecekleri mevcut URL yerine doğru URL ile raporlamak için kullanılmalıdır.

Yumuşak gezinmelerin startTime değerini alma

Navigasyonun başlangıç zamanı da benzer ş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, yumuşak gezinmeyi başlatan ilk etkileşimin (ör. bir düğme tıklaması) zamanıdır.

Yumuşak gezinme işlemleri de dahil olmak üzere tüm performans zamanlamaları, ilk "sert" sayfa gezinme süresinden itibaren geçen süre olarak raporlanır. Bu nedenle, yumuşak gezinme yükleme metrik sürelerini (ör. LCP) bu yumuşak gezinme süresine göre temel almak için yumuşak gezinme başlangıç zamanı gerekir.

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

Yumuşak gezinme metriği girişleri eklemek için performans gözlemcisinin observe çağrısına includeSoftNavigationObservations: true eklemeniz 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'da yumuşak gezinme özelliğini etkinleştirmenin yanı sıra observe yönteminde ek includeSoftNavigationObservations işareti gerekir. Performans gözlemcisi düzeyinde bu açık etkinleştirme, yumuşak gezinmeler için Core Web Vitals'ı ölçmeye çalışırken bazı ek hususların dikkate alınması gerektiğinden mevcut performans gözlemcilerinin bu ek girişlerden etkilenmemesini sağlamak içindir.

Zamanlamalar, orijinal "sabit" navigasyon başlangıç zamanına göre döndürülür. Bu nedenle, örneğin yumuşak gezinme için LCP'yi hesaplamak üzere LCP zamanlamasını almanız ve yumuşak gezinmeye göre bir zamanlama elde etmek için daha önce 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çülmüştü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 yumuşak gezinme işlemi gerçekleştiğinde her "gezinme"nin (orijinal gezinme dahil) önceki sayfanın metriklerini tamamlaması gerekebilir. Bu, ilk "sabit" gezinme metriklerinin normalden daha erken tamamlanabileceği anlamına gelir.

Benzer şekilde, bu uzun ömürlü metriklerin yeni yumuşak gezinme için ölçülmeye başlandığında metriklerin "sıfırlanması" veya "yeniden başlatılması" ve önceki "sayfalar" için ayarlanan değerlerin hafızasından silinerek yeni metrik olarak ele alınması gerekir.

Gezinme işlemleri arasında aynı kalan içerikler nasıl ele alınmalıdır?

Yumuşak gezinmeler için FP, FCP ve LCP yalnızca yeni boyaları ölçer. Bu durum, farklı bir LCP'ye neden olabilir. Örneğin, bu yumuşak gezinmenin soğuk yüklemesinden yumuşak yüklemeye geçiş.

Örneğin, LCP öğesi olan büyük bir banner resim içeren ancak altındaki metin her yumuşak gezinmeyle değişen bir sayfayı ele alalım. İlk sayfa yüklemesi, banner resmini LCP öğesi olarak işaretler ve LCP zamanlamasını buna göre belirler. Sonraki yumuşak gezinmelerde, altındaki metin, yumuşak gezinmeden sonra boyanan en büyük öğe ve yeni LCP öğesi olur. Ancak, yumuşak gezinme URL'sine derin bağlantı içeren yeni bir sayfa yüklenirse banner resmi yeni bir boya olur ve bu nedenle LCP öğesi olarak kabul edilmeye uygun olur.

Bu örnekte gösterildiği gibi, yumuşak gezinme için LCP öğesi, sayfanın nasıl yükleneceğine bağlı olarak farklı şekilde raporlanabilir. Bu durum, sayfanın daha alt kısmındaki bir ana sayfa bağlantısıyla yüklenmesi farklı bir LCP öğesine neden olabileceği gibidir.

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

Geleneksel sayfa yükleme için ilk bayta geçiş süresi (TTFB), orijinal isteğinin ilk baytlarının döndürüldüğü zamanı gösterir.

Yumuşak bir gezinme için bu daha karmaşık bir sorudur. Yeni sayfa için yapılan ilk isteği ölçmeli miyiz? Tüm içerikler uygulamada zaten mevcutsa ve ek istek yoksa ne olur? Bu istek önceden ön getirmeyle yapılırsa ne olur? Kullanıcı açısından yumuşak gezinmeyle alakalı olmayan bir istek (ör. analiz isteği) olursa ne olur?

Daha basit bir yöntem, yumuşak gezinmeler için TTFB'yi 0 olarak bildirmektir. Bu yöntem, geri/ileri önbelleği geri yüklemelerinde önerdiğimiz yönteme benzer. Bu, web-vitals kitaplığının yumuşak gezinmeler için kullandığı yöntemdir.

Gelecekte, hangi isteğin yumuşak gezinmenin "gezinme isteği" olduğunu öğrenmenin daha hassas yollarını destekleyebiliriz ve daha hassas TTFB ölçümleri elde edebiliriz. Ancak bu, mevcut denemenin bir parçası değildir.

Hem eski hem de yeni öğeleri nasıl ölçebilirim?

Bu deneme sırasında, Core Web Vitals'inizi "sabit" sayfa gezinmelerine dayalı olarak mevcut şekilde ölçmeye devam etmeniz önerilir. Böylece, Core Web Vitals girişiminin resmi veri kümesi olarak CrUX'un ölçeceği ve raporlayacağı değerlerle eşleşecektir.

Bunların gelecekte nasıl ölçülebileceğini görmenize ve bu uygulamanın pratikte nasıl çalıştığıyla ilgili Chrome ekibine geri bildirimde bulunma fırsatı sunmak için bunlara ek olarak yumuşak gezinmeler de ölçülmelidir. Bu, hem sizin hem de Chrome ekibinin API'yi şekillendirmesine yardımcı olacaktır.

Her ikisini de ölçmek için yumuşak gezinme modunda yayınlanabilecek yeni etkinliklerden (ör. birden fazla FCP ve ek LCP etkinliği) haberdar olmanız ve bu metrikleri uygun zamanda kesinleştirerek bunları uygun şekilde ele almanız, ayrıca yalnızca yumuşak gezinmeler için geçerli olan gelecekteki etkinlikleri yok saymanız gerekir.

Yumuşak gezinmeler için Core Web Vitals'ı ölçmek üzere web-vitals kitaplığını kullanma

Tüm nüansları dikkate almanın en kolay yolu, ayrı bir soft-navs branch (npm ve unpkg'de de kullanılabilir) içinde yumuşak gezinmeler için deneysel destek sunan web-vitals JavaScript kitaplığını kullanmaktır. Bu, aşağıdaki şekilde ölçülebilir (doTraditionalProcessing ve doSoftNavProcessing değerleri uygun şekilde değiştirilir):

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 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 Core Web Vitals ölçümlerinin bir parçası olacak mı?

Bu yumuşak gezinme denemesi tam olarak bir denemedir. Bu metriğin Core Web Vitals girişimine entegre edilip edilmeyeceğine karar vermeden önce, bu metriği değerlendirmek ve kullanıcı deneyimini daha doğru yansıtıp yansıtmadığını görmek istiyoruz. Bu deneme olasılığı bizi çok heyecanlandırıyor ancak bu denemenin mevcut ölçümlerin yerini alıp almayacağı veya ne zaman alacağına dair garanti veremiyoruz.

Web geliştiricilerinin deneme, kullanılan sezgisel kurallar ve deneyimi daha doğru yansıtıp yansıtmadığıyla ilgili geri bildirimlerine değer veriyoruz. Bu geri bildirimi göndermek için en iyi yer soft navigation GitHub deposudur. Ancak Chrome'un bu özelliğini uygulamasıyla ilgili hatalar Chrome sorun izleyicisinde bildirilmelidir.

Yumuşak gezinmeler CrUX'ta nasıl raporlanır?

Bu deneme başarılı olursa yumuşak gezinmelerin CrUX'ta nasıl raporlanacağı henüz belirlenmemiştir. Bu sayfaların, mevcut "sabit" gezinmelerle aynı şekilde değerlendirileceği kesin değildir.

Bazı web sayfalarında, kullanıcı açısından yumuşak gezinmeler tam sayfa yüklemelerle neredeyse aynıdır ve tek sayfalık uygulama teknolojisinin kullanımı yalnızca bir uygulama ayrıntısıdır. Diğerlerinde ise ek içeriğin kısmi yüklenmesi gibi olabilir.

Bu nedenle, bu yumuşak gezinmeleri CrUX'ta ayrı olarak raporlamaya veya belirli bir sayfa ya da sayfa grubu için Core Web Vitals'ı hesaplarken bunlara ağırlık vermeye karar verebiliriz. Heuristic geliştikçe kısmi yükleme yumuşak gezinmeyi tamamen hariç tutabiliriz.

Ekip, bu denemenin başarısını değerlendirmemize olanak tanıyacak olan sezgisel ve teknik uygulamaya odaklandığından bu konularda henüz bir karar verilmemiştir.

Geri bildirim

Bu denemeyle ilgili geri bildirimlerinizi aşağıdaki yerlerden gönderebilirsiniz:

• Yumuşak gezinme sezgileri ve standartlaştırma.
• Bu sezgisel kuralların Chrome'da uygulanmasıyla ilgili sorunlar.
• Genel web temel metrikleri geri bildirimi için web-vitals-feedback@googlegrouops.com adresini kullanın.

Değişiklik günlüğü

Bu API deneme aşamasında olduğundan, kararlı API'lere kıyasla daha fazla sayıda değişiklik yapılmaktadır. Daha fazla bilgi için Yumuşak Gezinme Heuristics Değişiklik Günlüğü'ne göz atabilirsiniz.

Sonuç

Yumuşak gezinme denemesi, Core Web Vitals girişiminin modern web'de yaygın olan ve metriklerimizde bulunmayan bir kalıbı ölçmek için nasıl gelişebileceğine dair heyecan verici bir yaklaşımdır. Bu deneme henüz ilk aşamalarında ve yapılacak çok şey var. Ancak şimdiye kadar elde ettiğimiz ilerlemeyi daha geniş bir web topluluğunun denemesi için sunmak önemli bir adım. Bu denemeyle ilgili geri bildirimleri toplama, denemenin diğer önemli bir parçasıdır. Bu nedenle, bu gelişmeyle ilgilenen kullanıcıların API'yi, ölçmeyi umduğumuz verileri temsil edecek şekilde şekillendirmek için bu fırsattan yararlanmalarını önemle tavsiye ederiz.

Teşekkür ederiz

Unsplash'taki Jordan Madrid tarafından oluşturulan küçük resim