Yavaş gezinmeleri ölçmeyle ilgili denemeler yapma

Barry Pollard

Yoav Weiss

Core Web Vitals girişimi, kullanıma sunulduğundan beri bir web sitesinin nasıl oluşturulduğu veya yüklendiğiyle ilgili teknik ayrıntılardan ziyade web sitesindeki gerçek kullanıcı deneyimini ölçmeye çalıştı. Üç 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 koşuluyla, 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 bir süredir bu zorluğun üzerine kafa yoruyor ve geleneksel çok sayfalı mimaride (MPA) uygulanan web sitelerinin ölçümüne benzer şekilde, "yumuşak gezinme"nin ne olduğunu ve Core Web Vitals'ın bunun için nasıl ölçülebileceğini bir standart hale getirmek istiyor. 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ı oluşturduk:

• Gezinme, bir 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, bir DOM değişikliğiyle sonuçlanır.

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, kümülatif düzen kayması (CLS) ve sonraki boyamayla etkileşim (INP) değerlerinin 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.
• Yalnızca Chromium tabanlı tarayıcılar bu yeni modu destekleyecek. 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 başka istenmeyen 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 kolay gezinmeyi nasıl etkinleştiririm?

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

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?

Kolay gezinme denemesi etkinleştirildiğinde metrikler her zamanki gibi PerformanceObserver API'yi kullanarak raporlama yapar. Ancak bu metrikler için dikkate alınması gereken bazı ek noktalar vardır.

Yumuşak gezinmeleri bildirme

Kolay gezinmeyi 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 gezinmede tam kullanım ömrüne sahip sayfa metriklerini sonuçlandırmak için 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 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;

Bu pageUrl, metrikleri geçmişte kullanmış olabilecekleri geçerli URL yerine doğru URL'ye göre 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.

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

Esnek gezinme metriği girişleri eklemek için performans gözlemcinizin observe çağrısına includeSoftNavigationObservations: true öğesini 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üzeyindeki bu açık tercih, mevcut performans gözlemcilerinin bu ekstra girişlere şaşırmamasını sağlamak içindir. Esnek gezinmeler için Core Web Vitals'ı ölçmeye çalışırken bazı ek hususların dikkate alınması gerekir.

Zamanlamalar, orijinal "sabit" navigasyon başlangıç zamanına göre döndürülür. Bu nedenle, örneğin esnek bir gezinmenin LCP'sini hesaplamak için LCP zamanlamasını alıp uygun kolay gezinme başlangıç zamanını çıkarmanız gerekir. Bunu daha önce açıklandığı gibi yumuşak gezinmeye göre zamanlamayla elde edersiniz. Ö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 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 özelliği için metrikleri ölçmeye başladığınızda metriklerin "sıfırlanması" veya "yeniden başlatılması" ve önceki "sayfalar" için ayarlanan değerlerin hafızasından silinerek yeni metrikler 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 kolay gezinmelerde bunun altındaki metin, kolay 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, sayfanın nasıl yüklendiğine bağlı olarak kolay gezinme için LCP öğesi farklı şekilde raporlanabilir. Bu durum, sayfanın daha alt kısımlarında yer alan bağlantı bağlantısına sahip bir sayfanın yüklenmesi farklı bir LCP öğesine yol açabilir.

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, geri-ileri önbellek geri yükleme işlemleri için önerdiğimiz şekilde, yumuşak gezinmeler için TTFB'yi 0 olarak bildirmektir. 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 denemeye dahil değildir.

Hem eski hem de yeniyi 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 bildirim vermenize olanak tanımak 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 (örneğin, 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.

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

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ığından çok heyecanlıyız ancak bunun mevcut ölçümlerin yerini alıp almayacağı veya ne zaman alacağı konusunda 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 kolay gezinmeler, kullanıcı açısından tam sayfa yüklemeleriyle neredeyse aynıdır ve Tek Sayfalık Uygulama teknolojisinin kullanımı yalnızca bir uygulama ayrıntısıdır. Bazı durumlarda, ek içeriklerin kısmi olarak yüklenmesi daha uygun 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 alıyoruz:

• 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 deneysel çalışma henüz ilk günlerinde olsa da (ve daha yapılacak çok şey var) deneme yapmak için şimdiye kadarki ilerlemeyi daha geniş web topluluğunun kullanımına 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