Yavaş gezinmeleri ölçmeyle ilgili denemeler yapma

Barry Pollard

Michal Mocny

Yayınlanma tarihi: 1 Şubat 2023, Son güncelleme tarihi: 30 Mart 2026

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 sitesinin gerçek kullanıcı deneyimini ölçmeyi amaçlamıştır. Üç Core Web Vitals metriği, kullanıcı odaklı metrikler olarak oluşturuldu. Bu metrikler, kullanıcıların sayfa performansını nasıl algıladığıyla genellikle ilgisi olmayan zamanlamaları ölçen DOMContentLoaded veya load gibi mevcut teknik metriklerin bir evrimidir. Bu nedenle, site iyi performans gösterdiği sürece, siteyi oluşturmak için kullanılan teknoloji puanlamayı etkilememelidir.

Gerçek her zaman idealden biraz daha karmaşıktır ve popüler Tek Sayfa Uygulaması mimarisi hiçbir zaman Core Web Vitals metrikleri tarafından tam olarak desteklenmemiştir. Bu web uygulamaları, kullanıcı sitede gezinirken ayrı ayrı web sayfaları yüklemek yerine, sayfa içeriğinin JavaScript ile değiştirildiği "yumuşak gezinme" adı verilen bir yöntem kullanır. Bu uygulamalarda, URL değiştirilerek ve önceki URL'ler tarayıcının geçmişine aktarılarak geleneksel bir web sayfası mimarisi yanılsaması korunur. Böylece, geri ve ileri düğmelerinin kullanıcının beklediği şekilde çalışması sağlanır.

Birçok JavaScript çerçevesi bu modeli kullanır ancak her biri farklı bir şekilde kullanır. Bu durum, tarayıcının geleneksel olarak "sayfa" olarak algıladığı ş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ında nasıl bir çizgi çekilmelidir?

Chrome Ekibi bu zorluğu bir süredir değerlendiriyor ve "yumuşak gezinme"nin ne olduğuna dair bir tanımı standartlaştırmayı ve geleneksel çok sayfalı mimaride (MPA) uygulanan web sitelerinin ölçülmesine benzer şekilde, Core Web Vitals'ın bu konuda nasıl ölçülebileceğini belirlemeyi amaçlıyor.

Son kaynak denemesiyle ilgili geliştirici geri bildirimlerine dayanarak API'de çeşitli iyileştirmeler yaptık. Şimdi de geliştiricilerden bu özellik kullanıma sunulmadan önce en son yinelemeyi denemelerini ve yaklaşımla ilgili geri bildirimde bulunmalarını istiyoruz. API'nin bu yinelemelerde geldiği noktadan oldukça memnunuz ve bu son kaynak denemesiyle ilgili geri bildirimlere bağlı olarak API'yi bu yılın ilerleyen dönemlerinde kullanıma sunmayı hedefliyoruz.

Yumuşak gezinme nedir?

Yumuşak gezinme için aşağıdaki tanımı oluşturduk:

• Gezinme, kullanıcı işlemiyle başlatılır.
• Gezinme, kullanıcıya görünür bir URL değişikliğiyle sonuçlanır.
• Etkileşim, görünür bir boyama ile sonuçlanır.

Bazı sitelerde bu sezgisel yöntemler, yanlış pozitiflere (kullanıcıların gerçekten "gezinme" olarak değerlendirmeyeceği) veya yanlış negatiflere (kullanıcının bu ölçütleri karşılamamasına rağmen "gezinme" olarak değerlendireceği) yol açabilir. Sezgisel yöntemlerle ilgili geri bildirimlerinizi yumuşak gezinme spesifikasyonu deposunda paylaşabilirsiniz.

DevTools'da yumuşak gezinme desteği

İzleme görünümünde, DevTools Performans paneline yumuşak gezinme desteği ekledik:

Normal zorunlu gezinme girişlerinden ayırt edilmelerine yardımcı olmak için * ile işaretlenmiş olan hem yumuşak gezinmeler hem de LCP için işaretçiler görebilirsiniz. Bu özellik varsayılan olarak etkindir ve bir sonraki bölümde ele alacağımız performans API'si değişikliklerinden ayrıdır. Bu yöntem, yumuşak gezinme denemesinin sitenizde doğru şekilde çalışıp çalışmadığını test etmenin hızlı bir yoludur.

Şu anda bu yalnızca izleme görünümünde yumuşak gezinme ve LCP zaman damgalarını gösterir. Diğer metrikler (ör. LCP) ve Canlı Metrikler görünümünde destek daha sonra eklenecektir.

Chrome, web geliştiriciler için yumuşak gezinmeleri nasıl uygular?

Yumuşak gezinme sezgisel yöntemleri etkinleştirildikten sonra (bu konuyla ilgili daha fazla bilgiyi sonraki bölümde bulabilirsiniz) Chrome, bazı performans metriklerini raporlama şeklini değiştirir:

• Her yumuşak gezinme algılandığında bir soft-navigation PerformanceTiming etkinliği yayınlanır.
• Bu soft-navigation girişi, navigationId, name özelliğindeki yeni URL'nin yanı sıra başlatma etkileşiminin interactionId değerini de içerir.
• İçerik boyama işlemine neden olan etkileşimlerden sonra bir veya daha fazla interaction-contentful-paint girişi yayınlanır. Bu, etkileşim bir yumuşak gezinme yaydığında yumuşak gezinmeler için Largest Contentful Paint (LCP) değerini ölçmek amacıyla kullanılabilir.
• navigationId özelliği, performans zamanlamalarının (first-paint, first-contentful-paint, largest-contentful-paint, interaction-contentful-paint, first-input-delay, event ve layout-shift) her birine eklenir. Bu, etkinliğin yayınlandığı gezinme girişiyle eşleşir. Bu girişler, geçişsiz gezinmelerde yer aldığında girişin ne zaman yayınlandığına bağlı olarak önceki veya sonraki navigationId değerini içerebilir. Bu konuyla ilgili daha fazla bilgiyi Metrikleri uygun URL'ye göre raporlama bölümünde bulabilirsiniz.
• soft-navigation, gezinme kapsamında yayınlanan en büyük interaction-contentful-paint girişi de dahil olmak üzere bir largestInteractionContentfulPaint girişi içerecektir. Bu değer, söz konusu gezinme için ilk LCP olarak kullanılabilir. Etkileşimle ilgili daha fazla interaction-contentful-paint girişi gözlemlendikçe bu LCP değeri güncellenebilir.
• URL güncellemesi bu boyamadan sonraya kadar gerçekleşmezse, yumuşak gezinme gerçekleşmeden önce bazı interaction-contentful-paint girişleri olabilir. Bu gibi durumlarda, en büyük largestInteractionContentfulPaint girişi, arabelleğe alma ve eski girişlere geri dönme ihtiyacını ortadan kaldırır. largestInteractionContentfulPaint, en büyük interaction-contentful-paint girişinin tam kopyası olduğundan bu girişin, boyama işlemi gerçekleştiği için önceki navigationId'yi kullandığını ancak bu boyamaların yeni navigationId'ye göre ölçülmesi gerektiğini unutmayın.
• soft-navigation girişi, söz konusu gezinme için FCP olarak paintTime ve presentationTime değerlerini de içerir.
• interaction-contentful-paint girişlerinin daha fazla etkileşimden sonra da yayınlanacağını unutmayın. Ancak bir URL'nin LCP'si, bu girişleri hariç tutmak için interaction-contentful-paint girişleriyle sınırlandırılmalıdır. interactionId

Bu değişiklikler, bazı nüanslar dikkate alınması gerekse de Core Web Vitals'ın ve ilişkili bazı teşhis metriklerinin sayfa gezinme başına ölçülmesine olanak tanır.

Chrome'da yumuşak gezinmeleri etkinleştirmenin sonuçları nelerdir?

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

• soft-navigation girişlerinin izlenmesi, performans girişlerinin her bir "gezinme" için "dilimlenmesine" olanak tanır.
• CLS ve INP metrikleri, tüm sayfa yaşam döngüsü süresince ölçülmek yerine isteğe bağlı olarak dilimlenebilir. Ancak Soft Navigation API, kullanılan temel teknolojiden bağımsız olarak bu durumun ne zaman gerçekleştiğine dair standart bir ölçü sağlar.
• largest-contentful-paint girişi, etkileşim sırasında (yumuşak gezinmeyi başlatmak için gereklidir) tamamlanır. Bu nedenle yalnızca ilk "sert" gezinme LCP'sini ölçmek için kullanılabilir. Bu nedenle, bu değer, yumuşak gezinmeler ölçüldüğünde değişmez. Böylece, ilk ve zorunlu gezinme için sayfa yükleme LCP'si her zamanki gibi ölçülebilir.
• Etkileşimlerden yayınlanacak yeni interaction-contentful-paint girişi, yumuşak gezinmeler için LCP'yi ölçmek amacıyla kullanılabilir. Ancak bu girişi kullanmayla ilgili bazı hususları bu makalede ele alacağız.
• Bu yumuşak gezinme API'sinin, özellikle eski Chrome sürümlerinde ve diğer tarayıcıları kullananlar için tüm kullanıcılar tarafından desteklenmeyeceğini unutmayın. Bazı kullanıcıların, Core Web Vitals metriklerini bildirseler bile yumuşak gezinmeye dayalı metrikleri bildirmeyebileceğini unutmayın.
• Varsayılan olarak etkinleştirilmeyen deneysel bir yeni özellik olduğundan, siteler bu özelliği istenmeyen yan etkiler açısından test etmelidir.

RUM sağlayıcınızın, Core Web Vitals'ın yumuşak gezinme ile ölçülmesini destekleyip desteklemediğini öğrenin. Birçok kişi bu yeni standardı test etmeyi planlıyor ve önceki hususları dikkate alacak. Bu arada, bazı sağlayıcılar kendi sezgisel yöntemlerine dayalı olarak performans metriklerinin sınırlı ölçümlerine de izin verir.

Yumuşak gezinmeler için metriklerin nasıl ölçüleceği hakkında daha fazla bilgi edinmek 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 etkinleştirilmez ancak bu özellik açıkça etkinleştirilerek denenebilir.

Geliştiriciler bu özelliği chrome://flags/#soft-navigation-heuristics adresindeki işareti etkinleştirerek kullanabilir. Alternatif olarak, Chrome başlatılırken --enable-features=SoftNavigationHeuristics komut satırı bağımsız değişkenleri kullanılarak da etkinleştirilebilir. chrome://flags/#enable-experimental-web-platform-features işaretini etkinleştirdiğinizde yumuşak gezinmeler de etkinleştirilir.

Bu özelliği tüm ziyaretçileri için etkinleştirmek isteyen web siteleri, Chrome 147'den itibaren bir kaynak denemesi yapabilir. Denemeye kaydolarak ve HTML veya HTTP üstbilgisinde kaynak denemesi jetonunu içeren bir meta öğe ekleyerek bu özelliği etkinleştirebilirler. Daha fazla bilgi için Kaynak denemelerini kullanmaya başlama başlıklı yayını inceleyin.

Site sahipleri, kaynak denemesini sayfalarına tüm kullanıcılar veya yalnızca bir kullanıcı alt kümesi için dahil etmeyi seçebilir. Bu değişikliklerin, özellikle bu kaynak denemesini kullanıcılarınızın büyük bir bölümü için etkinleştiriyorsanız metriklerinizin nasıl raporlanabileceğini etkileyeceğiyle ilgili olarak yukarıdaki etkiler bölümüne dikkat edin. CrUX'un, bu yumuşak gezinme ayarından bağımsız olarak metrikleri mevcut şekilde raporlamaya devam edeceğini ve bu nedenle bu sonuçlardan etkilenmeyeceğini unutmayın. Ayrıca, kaynak denemelerinin 14 gün boyunca ortalama olarak tüm Chrome sayfası yüklemelerinin en fazla% 0,5'inde deneysel özelliklerin etkinleştirilmesiyle sınırlı olduğu da belirtilmelidir.Ancak bu durum yalnızca çok büyük siteler için sorun teşkil eder.

Feature Detecting Soft Navigations API desteği

API'nin desteklenip desteklenmediğini test etmek için aşağıdaki kodu kullanabilirsiniz:

if (PerformanceObserver.supportedEntryTypes.includes('soft-navigation')) {
  // Monitor Soft Navigations
}

supportedEntryTypes değerinin ilk kullanımda dondurulduğunu unutmayın. Bu nedenle, sayfaya yerleştirilen bir kaynak denemesi jetonuyla dinamik olarak geçişsiz gezinme desteği eklenirse bu özellik etkinleştirilmeden önceki orijinal değer döndürülebilir.

Bu durumda, yumuşak gezinmeler henüz varsayılan olarak desteklenmediği ve geçiş durumunda olduğu için aşağıdaki alternatif kullanılabilir:

if ('SoftNavigationEntry' in window) {
  // Monitor Soft Navigations
}

How can I measure soft navigations?

Yumuşak gezinme denemesi etkinleştirildikten sonra metrikler, diğer metriklerde olduğu gibi PerformanceObserver API 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ği kullanılarak bu sayfadaki önceki yumuşak gezinmeler de dahil olmak üzere yumuşak gezinme girişlerini konsola kaydeden bir örnek kod snippet'i verilmiştir:

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

Bu, önceki gezinmeye ait tam yaşam döngüsü sayfa metriklerini tamamlamak için kullanılabilir.

Metrikleri uygun URL'ye göre raporlama

Yumuşak gezinme görüldüğünde önceki sayfanın Core Web Vitals değerleri tamamlanmalı, ardından önceki URL için raporlanmalı ve yeni URL için yeni izleme başlatılmalıdır.

Uygun soft-navigation girişinin name özelliği, metriklerin raporlanacağı yeni URL'yi içerir. navigationId ise bu gezinme için benzersiz referans olur (aynı URL, tek sayfalık bir uygulamanın kullanım ömrü boyunca birden çok kez ziyaret edilebilir). Bu, 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;

interaction-contentful-paint için doğru URL'yi bildirin

Tüm interaction-contentful-paint girişleri navigationId kullanılarak eşlenmemeli ve söz konusu URL için LCP olarak raporlanmamalıdır. Bu nedenle, interaction-contentful-paint girişlerinden LCP'yi hesaplamak için ek hususları göz önünde bulundurmak gerekir:

• İlk sorun, URL güncellemesinden önce bir boyama işlemi gerçekleşirse interaction-contentful-paint girişin, yumuşak gezinme gerçekleşmeden önce yayınlanabilmesidir. Bu durumlarda navigationId eski URL için geçerli olur. Önce URL güncellenirse boyama işlemi, yumuşak gezinmeyi tamamlar. Bu durumda, önce soft-navigation girişi yayınlanır ve interaction-contentful-paint yeni URL'ye sahip olur.
• İkinci sorun ise interaction-contentful-paint. Bu performans metriğinin kapsamı, yumuşak gezinmeler için yalnızca LCP'nin ötesine geçtiğinden yeni etkileşimler için girişler yayınlanmaya devam edecek. LCP için yalnızca yumuşak gezinme yüklemesiyle ilgili boyamaları dikkate almak istiyoruz. Sonraki etkileşimlerle ilgili olanları dikkate almak istemiyoruz.

Bu nedenle, doğru URL'yi elde etmek için interaction-contentful-paint girişlerini soft-navigation-entries ile eşlemek üzere navigationId yerine interactionId kullanılmalıdır. Bu işlem, eski navigationId içeren girişleri işler ve LCP için dikkate alınmaması gereken interaction-contentful-paint girişlerini filtreler.

Ayrıca, soft-navigation entries yayınlanmadan önce gerçekleşen interaction-contentful-paint girişlerini daha kolay işlemek için largestInteractionContentfulPaint girişlerinin soft-navigation girişlerini de işlemeniz gerekir.

startTime yumuşak gezinme

Yumuşak gezinmelerle ilgili olanlar da dahil olmak üzere tüm performans süreleri ve Core Web Vitals metriklerini hesaplamak için kullanılan girişler, ilk "sert" sayfa gezinme süresinden itibaren geçen süre olarak bildirilir. Bu nedenle, bu süreye göre raporlamak için yumuşak gezinme başlangıç zamanı, yumuşak gezinme yükleme metrik sürelerinden (ör. LCP) çıkarılmalıdır.

Navigasyon başlangıç zamanı, uygun soft-navigation girişiyle eşleştirilip startTime kullanılarak benzer şekilde elde edilebilir.

startTime, geçişsiz gezinmeyi başlatan ilk etkileşimin (örneğin, düğme tıklama) zamanıdır. Bu, "sert gezinmeler"den biraz farklıdır. "Sert gezinmeler"de "başlangıç zamanı", yeni sayfanın tarayıcıya "işlendiği" ve etkinlik işleyici kodunun bir kısmı çalıştırıldıktan sonraki zamandır. Etkileşim başlangıç zamanından itibaren ölçüm yaptığımız için, yumuşak gezinme başlangıç zamanlarına etkinlik işleyici kodu da dahil edilir.

Core Web Vitals'ı her yumuşak gezinme için ölçme

Core Web Vitals'ı ölçmek için soft-navigation girişlerini dinleyin ve bunları aldığınızda metrikleri sıfırlayın. FCP, presentationTime temelinde yayınlanabilir ve LCP, largestInteractionContentfulPaint olarak başlatılabilir. INP ve CLS, sayfa yüklemesinde olduğu gibi 0 olarak başlatılmalıdır.

LCP, INP ve CLS daha sonra normal şekilde ölçülüp izlenebilir (interaction-contentful-paint'nin interactionId ile eşleşen LCP için kullanılması hariç). interactionId ve navigationId, girişleri URL'ye daha önce bahsedildiği gibi adlandırmak için kullanılabilir.

Zamanlamalar, orijinal "sert" gezinme başlangıç zamanına göre döndürülmeye devam eder. Bu nedenle, örneğin bir yumuşak gezinme için LCP'yi hesaplamak üzere interaction-contentful-paint zamanlamasını almanız ve daha önce ayrıntılı olarak açıklandığı gibi uygun yumuşak gezinme başlangıç zamanını çıkarmanız gerekir. Böylece, yumuşak gezinmeye göre bir zamanlama elde edebilirsiniz.

Bazı metrikler geleneksel olarak sayfanın kullanım ömrü boyunca ölçülür: Örneğin, bir etkileşim gerçekleşene kadar LCP değişebilir. CLS ve INP, etkileşimlerden bağımsız olarak sayfadan ayrılana kadar güncellenebilir. Bu nedenle, her yeni yumuşak gezinme gerçekleştiğinde önceki gezinmenin metrikleri tamamlanmalıdır. Bu nedenle, Core Web Vitals'ı yumuşak gezinmelerle ölçerken ilk "sert" gezinme metrikleri normalden daha erken tamamlanabilir.

Benzer şekilde, bu uzun süreli metriklerin yeni yumuşak gezinme metriklerini ölçmeye başlarken metriklerin "sıfırlanması" veya "yeniden başlatılması" ve önceki "sayfalar" için ayarlanan değerler hatırlanmadan yeni metrikler olarak ele alınması gerekir. Yani "en büyük" boyama, Interaction to Next Paint veya düzen kayması ile ilgili bilgiler sıfırlanır ve baştan ölçüm yapılmasına olanak tanınır.

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

Yumuşak gezinmeler için LCP (interaction-contentful-paint değerinden hesaplanır) yalnızca yeni boyamaları ve yalnızca gezinmeye neden olan etkileşimle ilişkili boyamaları ölçer. Bu durum, örneğin, söz konusu yumuşak gezinmenin sıfırdan yüklemesinden yumuşak yüklemeye geçişte farklı bir LCP ile sonuçlanabilir.

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

Benzer şekilde, bir animasyon, sayfadaki herhangi bir yumuşak gezinmeyle ilgisi olmaksızın sayfanın bir bölümünü sürekli olarak güncelleyebilir. Bu arka plan animasyonu nedeniyle oluşan yeni boyamalar, yeni yumuşak gezinme için LCP'ye dahil edilmez. Ancak sayfa bu URL'den yeniden yüklendiyse LCP için dikkate alınabilirler.

Bu örneklerde gösterildiği gibi, sayfanın nasıl yüklendiğine bağlı olarak yumuşak gezinme için LCP öğesi farklı şekilde raporlanabilir. Sayfayı daha aşağıda bir yer işareti bağlantısı ile yüklemek, sert gezinmeler için farklı bir LCP öğesiyle sonuçlanabilir.

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

Geleneksel bir sayfa yüklemesi için İlk Bayt Zamanı (TTFB), orijinal isteğin ilk baytlarının döndürülme süresini ifade eder.

Bu, yumuşak gezinme için daha zor bir sorudur. Yeni sayfa için yapılan ilk isteği ölçmeli miyiz? Tüm içerik zaten uygulamada varsa ve ek istek yoksa ne olur? Bu istek önceden getirme işlemiyle yapılırsa ne olur? Kullanıcı açısından geçişsiz gezinmeyle ilgili olmayan bir istek (ör. analiz isteği) gönderilirse ne olur?

Daha basit bir yöntem ise geri/ileri önbellek geri yüklemelerinde önerdiğimiz gibi, yumuşak gezinmeler için TTFB'yi 0 olarak bildirmektir. Bu, web-vitals kitaplığının yumuşak gezinmeler için kullandığı yöntemdir ve şu anda bu metrik için önerdiğimiz yöntemdir.

Core Web Vitals'ı her iki yöntemle de ölçmeli misiniz?

Bu deneme sırasında, yeni uygulama nihai olarak kullanıma sunulmadan önce sorun yaşayabileceğinden veya değişebileceğinden, Core Web Vitals'ınızı "zorunlu" sayfa gezinmelerine göre mevcut şekilde ölçmeye devam etmeniz önerilir. Bu, CrUX'un şu an için ölçtüğü değerlerle de eşleşir (bu konuyla ilgili daha fazla bilgiyi ilerleyen bölümlerde bulabilirsiniz).

Gelecekte nasıl ölçülebileceğini görmenizi sağlamak ve bu uygulamanın pratikte nasıl çalıştığı hakkında Chrome Ekibi'ne geri bildirimde bulunma fırsatı vermek için bu ölçümlere ek olarak yumuşak gezinmeler de ölçülmelidir. Bu sayede, API'nin gelecekteki şeklini belirlemeye yardımcı olabilirsiniz.

LCP için o zaman, mevcut yöntem için yalnızca largest-contentful-paint girişlerinin, yeni yöntem için ise hem largest-contentful-paint hem de interaction-contentful-paint girişlerinin dikkate alınması anlamına gelir.

CLS ve INP için bu, mevcut yöntemde olduğu gibi tüm sayfa yaşam döngüsü boyunca ölçüm yapılması ve yeni yöntem için ayrı CLS ve INP değerlerini ölçmek üzere zaman çizelgesinin yumuşak gezinmelere göre ayrı ayrı dilimlenmesi anlamına gelir.

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

Tüm ayrıntıları hesaba katmanın en kolay yolu, ayrı bir soft-navs branch içinde deneysel yumuşak gezinme desteği olan web-vitals JavaScript kitaplığını kullanmaktır (npm ve unpkg'de de mevcuttur). Bu, aşağıdaki şekilde ölçülebilir (doTraditionalProcessing ve doSoftNavProcessing uygun şekilde değiştirilerek):

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

function doTraditionalProcessing(callback) {
  ...
}

function doSoftNavProcessing(callback) {
  ...
}

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});

web-vitals kitaplığı, geri çağırmaya sağlanan girişlerde hem navigationId hem de navigationURL içerdiğinden daha önce belirtildiği gibi metriklerin doğru URL'ye göre raporlanmasını da sağlar.

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

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

Bu özelliğin Core Web Vitals girişimine entegre edilip edilmeyeceğine karar vermeden önce, sezgisel yöntemleri değerlendirmek ve kullanıcı deneyimini daha doğru yansıtıp yansıtmadığını görmek istiyoruz. Nihai amaç, gerçek kullanıcıların deneyimlerini performans olarak daha iyi ölçebilmek için bir araç sunmaktır. Dolayısıyla, bu deneme başarılı olursa tüm araçlar tarafından sunulan Core Web Vitals ölçümlerine bu metriklerin dahil edilmesi amaçlanmaktadır.

Web geliştiricilerin deneme, kullanılan sezgisel yöntemler ve deneyimi daha doğru yansıtıp yansıtmadığı hakkındaki geri bildirimlerini önemsiyoruz. Bu geri bildirimi göndermek için en iyi yer soft navigation GitHub deposudur. Bununla birlikte, Chrome'un bu özelliği uygulamasıyla ilgili tek tek hatalar Chrome sorun izleyicisinde bildirilmelidir.

Yumuşak gezinmeler CrUX'ta nasıl raporlanacak?

Bu deneme başarılı olursa yumuşak gezinmelerin CrUX'ta tam olarak nasıl raporlanacağı da henüz belirlenmemiştir. Bu navigasyonların, mevcut "zorunlu" navigasyonlarla aynı şekilde ele alınacağı garanti edilmez.

Bazı web sayfalarında, kullanıcı açısından yumuşak gezinmeler 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 ise ek içeriklerin kısmi olarak yüklenmesine benzer.

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

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

Geri bildirim

Bu deneme hakkında aşağıdaki yerlerden geri bildirim alıyoruz:

• API ile ilgili geri bildirimler GitHub'da sorun olarak iletilmelidir.
• Chromium uygulamasındaki hatalar, henüz bilinen sorunlar arasında yer almıyorsa Chrome'un sorun izleyicisinde bildirilmelidir.
• Genel web vitals geri bildirimleri web-vitals-feedback@googlegroups.com adresinden paylaşılabilir.

Kararsızsanız endişelenmeyin. Geri bildirimi her iki yerde de almayı tercih ederiz. Her iki yerdeki sorunları öncelik sırasına göre ele alıp doğru yere yönlendirmekten memnuniyet duyarız.

Değişiklik günlüğü

Bu API deneysel aşamada olduğundan kararlı API'lere kıyasla daha fazla değişikliğe uğramaktadır. Daha fazla bilgi için Soft Navigation Heuristics Changelog (Yumuşak Gezinme Sezgisel Değişiklik Günlüğü) başlıklı makaleyi inceleyebilirsiniz.

Sonuç

Yumuşak gezinme denemesi, Core Web Vitals girişiminin, metriklerimizde eksik olan modern web'deki yaygın bir kalıbı ölçmek için nasıl gelişebileceğine dair heyecan verici bir yaklaşımdır. Bu deneme henüz erken aşamada olsa da ve yapılacak çok şey olsa da şu ana kadar elde edilen ilerlemeyi daha geniş web topluluğunun denemesi için kullanıma sunmak önemli bir adım. Bu denemeyle ilgili geri bildirimleri toplamak, denemenin bir diğer önemli parçasıdır. Bu nedenle, bu gelişmeyle ilgilenen kullanıcıları, API'yi şekillendirmeye yardımcı olmak için bu fırsattan yararlanmaya ve bu API ile ölçebilmeyi umduğumuz şeyleri temsil etmesini sağlamaya teşvik ediyoruz.

Teşekkür

Unsplash'te Jordan Madrid tarafından çekilen küçük resim

Bu çalışma, Yoav Weiss'ın Google'da başlattığı çalışmanın devamıdır. Bu API'deki çalışmaları için Yoav'a teşekkür ederiz.