Yumuşak gezinmeleri ölçme

Yayınlanma tarihi: 1 Şubat 2023, Son güncelleme tarihi: 24 Haziran 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çlamaktadı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 sayfalık uygulama mimarisi Core Web Vitals metrikleri tarafından hiçbir zaman tam olarak desteklenmemiştir. Bu web uygulamaları, kullanıcı sitede gezinirken farklı ve bağımsız 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 tarayıcının geçmişindeki önceki URL'ler gönderilerek 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ğerlendirme 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ırmanın yanı sıra 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.

Geliştiricilerden gelen geri bildirimler doğrultusunda teklifte çeşitli iyileştirmeler yaptık. Bu sorunu çözmeye yardımcı olmak için Chrome 151'den itibaren iki yeni performans API'si 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.

Bu tanım, bazı sitelerde 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. Geri bildirimlerinizi yumuşak gezinme spesifikasyonu deposunda bekliyoruz.

Yumuşak gezinmeler için DevTools desteği

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

Performans panelinde youtube.com'dan gelen izlemesi olan bir yumuşak gezinme işaretçisi.

Normal zorunlu gezinme girişlerinden ayırt edilmelerine yardımcı olmak için her ikisi de * ile işaretlenmiş olan yumuşak gezinmeler ve 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 algılamanın sitenizde doğru şekilde çalışıp çalışmadığını hızlıca test etmenizi sağlar.

Ş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 özelliği 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'ünü 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, soft navigasyonlar için Largest Contentful Paint (LCP)'yi ölçmek üzere kullanılabilecek bir largestContentfulPaint girişi içerir.
  • 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şine karşılık gelir. Bu girişler, geçişli gezinmelerde yer aldığında girişin ne zaman yayınlandığına bağlı olarak önceki veya sonraki navigationId öğesini içerebilir. Bu konuyla ilgili daha fazla bilgiyi Metrikleri uygun URL'ye göre raporlama bölümünde bulabilirsiniz.
  • soft-navigation, bu gezinme için en büyük interaction-contentful-paint girişini almak üzere bir getLargestInteractionContentfulPaint() işlevi içerecek. Bu değer, söz konusu gezinme için ilk LCP olarak kullanılabilir ve etkileşimle ilgili daha fazla interaction-contentful-paint girişi gözlemlendikçe LCP güncellenebilir. Bu özelliğin, önceki kaynak denemelerinde kullanılan largestInteractionContentfulPaint özelliğinin yerini aldığını unutmayın.
  • URL güncellemesi bu boyamalar tamamlanana kadar gerçekleşmezse, yumuşak gezinme gerçekleşmeden önce bazı interaction-contentful-paint girişleri olabilir. Bu gibi durumlarda getLargestInteractionContentfulPaint() işlevi, yumuşak gezinme tamamlandıktan sonra arabelleğe alma ve eski girişlere geri dönme ihtiyacını ortadan kaldırır. getLargestInteractionContentfulPaint() tarafından döndürülen girişin, yayınlandığı sırada en büyük interaction-contentful-paint girişinin tam bir kopyası olduğunu unutmayın. Bu nedenle, boyama işlemi o sırada gerçekleştiğinden bu giriş önceki navigationId değerini kullanmış olabilir ancak bu boyama işlemleri yeni navigationId değerine göre ölçülmelidir.
  • soft-navigation girişi, bu 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 ve yalnızca bu girişlerdeki largestContentfulPaint özelliklerini dahil etmek için interactionId yumuşak gezinmelerine karşılık gelen interaction-contentful-paint girişleriyle sınırlandırılmalıdır.

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 etkileri 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 özelliği, 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 (basit navigasyonu başlatmak için gereklidir) tamamlanır. Bu nedenle yalnızca ilk "zor" navigasyon 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 ile ilgili en büyük içerik öğesi, her zamanki gibi ölçülebilir.
  • Etkileşimlerden yayınlanacak yeni interaction-contentful-paint girişi, bu girişin içindeki largestContentfulPaint özelliğine bakılarak yumuşak gezinmeler için LCP'yi ölçmek amacıyla kullanılabilir. Ancak bu girişi kullanmayla ilgili olarak bu makalede ele alacağımız bazı hususlar vardır.
  • Bu yumuşak gezinme özelliğinin, ö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 geçişsiz gezinmeye dayalı metrikleri bildirmeyebileceğini unutmayın.

RUM sağlayıcınızın, Önemli Web Verileri'nin 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 göre 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 gezinme özelliğinin Chrome 151'de varsayılan olarak etkinleştirilmesi planlanmaktadır ancak bu özellik açıkça etkinleştirilerek daha önce test edilebilir.

Geliştiriciler için bu özellik, chrome://flags/#soft-navigation-heuristics bölümündeki bayrak etkinleştirilerek kullanılabilir. 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.

Bazı web sitesi sahipleri, kaynak denemesi süreci aracılığıyla lansmandan önce sitelerde de bu özelliği etkinleştirmiştir. API şeklinin, özelliğin geliştirilmesi sırasında değiştiğini ve nihai olarak gönderilen özelliğin, Soft Navigations Değişiklik Günlüğü'nde ayrıntılı olarak açıklandığı gibi önceki kaynak denemelerinden farklı olduğunu unutmayın.

Özellik, Soft Navigations API desteğini algılıyor

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

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

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

Bu durumda, varsayılan olarak henüz desteklenmeyen ve geçiş durumunda olan yumuşak gezinmeler yerine aşağıdaki alternatif kullanılabilir:

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

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

Yumuşak gezinme algılama 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 sayfa uygulaması kullanım ömrü boyunca birden çok kez ziyaret edilebilir).

Bu, her soft-navigation girişi olarak ayarlanmalı ve bir sonraki soft-navigation girişi alınana kadar metrikleri bildirmek için kullanılmalıdır.

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şinin 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 eder. LCP için yalnızca yumuşak gezinme yüklemesinin boyamalarını dikkate almak istiyoruz, sonraki etkileşimlerin boyamalarını değil.

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 tüm girişleri işler ve LCP için dikkate alınmaması gereken tüm interaction-contentful-paint girişlerini filtreler.

Ayrıca, getLargestInteractionContentfulPaint() işlevini soft-navigation girişlerinde de işlemeniz gerekir. Böylece, soft-navigation entries yayınlanmadan önce gerçekleşen interaction-contentful-paint girişlerini daha kolay işleyebilirsiniz.

Yumuşak gezinmelerden startTime elde etme

Yumuşak gezinmeler için 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, LCP gibi yumuşak gezinme yükleme metriklerinin süreleri, yumuşak gezinme başlangıç zamanından çıkarılmalıdır. Böylece, bu metrikler yumuşak gezinme zamanına göre raporlanabilir.

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, getLargestInteractionContentfulPaint() girişiyle 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'nın interactionId ile eşleşen LCP için kullanılması hariç). interactionId, daha önce bahsedildiği gibi bir URL'ye yapılan girişleri 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 gezinmeyle ilgili 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şladığınızda 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 en büyük içerik öğesi (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, yumuşak gezinme URL'sine derin bağlantıyla yüklenirse banner resmi yeni bir boyama olur ve bu nedenle LCP öğesi olarak kabul edilmeye uygun olur.

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. Aynı şekilde, sayfayı daha aşağıda bir yer işareti bağlantısı ile yüklemek de 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.

Yumuşak gezinme için bu 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 yeni API'ler yalnızca Chromium tabanlı tarayıcılarla sınırlı olsa da siteler, hem yumuşak gezinmelere göre dilimleyerek hem de sert gezinmelere göre dilimlemeye devam ederek her ikisini de ölçmek isteyebilir. Bu sayede tarayıcılar arasında ve geçmiş trendler için karşılaştırma yapılabilir.

LCP için bu, mevcut yöntemde yalnızca largest-contentful-paint girişlerinin, yeni yöntemde 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 bu metriklerin sayfanın tüm yaşam döngüsü boyunca ölçülmesi ve yeni yöntemde ayrı CLS ve INP değerlerini ölçmek için zaman çizelgesinin yumuşak gezinmelere göre ayrı ayrı dilimlenmesi anlamına gelir.

Bu durumda metriklerin analiz için iki kez işaretlenmesi ve depolanması gerekir.

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:

Metrik Ayrıntılar
TTFB 0 olarak bildirildi.
FCP İlk zengin içerikli boyama süresi, yumuşak gezinmeyi tetikleyen etkileşimden itibaren yumuşak gezinme başlangıç süresine göre. Önceki gezinme işleminden kalan veya etkileşimle ilişkili olmayan mevcut boyalar dikkate alınmaz.
LCP En büyük zengin içerikli boyama süresi, yumuşak gezinmeyi tetikleyen etkileşimden itibaren yumuşak gezinme başlangıç zamanına göre. Önceki gezinmeden kalan mevcut boyalar etkileşimle ilişkilendirilmediği için dikkate alınmaz. Her zamanki gibi, bu değer sayfadan (veya yumuşak gezinme) ayrılana kadar güncellenmeye devam edebilir. LCP yalnızca bu durumda sonlandırılabilir.
CLS Gezinme süreleri arasındaki en büyük vardiya penceresi. Her zamanki gibi, bu değer sayfadan (veya geçişsiz gezinme) ayrılana kadar güncellenmeye devam edebilir. CLS yalnızca bu durumda sonlandırılabilir.
INP Gezinme süreleri arasındaki INP. Her zamanki gibi, bu değer sayfadan (veya yumuşak gezinme) ayrılana kadar güncellenmeye devam edebilir. INP yalnızca bu durumda sonlandırılabilir. Etkileşim yoksa 0 değeri raporlanmaz.

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

Nihai amaç, gerçek kullanıcıların deneyimlerini performans olarak daha iyi ölçebilmek için bir araç sunmaktır. Dolayısıyla, API kullanıma sunulduktan sonra tüm araçlar tarafından sunulan Core Web Vitals ölçümlerine bu verilerin dahil edilmesi amaçlanmaktadır.

API ile ilgili ve deneyimi daha doğru yansıttığını düşünüp düşünmediğiniz konusundaki geri bildirimlerinizi bekliyoruz. Bu geri bildirimi göndermek için en iyi yer soft navigation GitHub deposudur. Bununla birlikte, Chrome'un bu özelliği uygulama şekliyle ilgili tek tek hatalar Chrome sorun izleyicisinde bildirilmelidir.

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

Özellik kullanıma sunulduktan sonra yumuşak gezinmelerin CrUX'ta tam olarak nasıl raporlanacağı da henüz belirlenmemiştir. CrUX'taki değişiklikleri, paylaşacak daha fazla bilgimiz olduğunda duyuracağız.

Geri bildirim

Bu API ile ilgili geri bildirimlerinizi aşağıdaki yerlerde aktif olarak bekliyoruz:

Kararsız kalırsanı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 geliştirilirken kararlı API'lere kıyasla daha fazla değişiklik yapıldı. Daha fazla bilgi için Soft Navigations Değişiklik Günlüğü'ne bakabilirsiniz.

Sonuç

Yumuşak gezinmeler özelliği, 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. Web topluluğundan önemli ölçüde geri bildirim aldık. Bu gelişmeyle ilgilenenlerin, API'lerin şekillendirilmesine yardımcı olmak için bu fırsattan yararlanmasını önemle tavsiye ederiz. Böylece, bu API'lerle ölçebilmeyi umduğumuz şeyleri temsil etmesini sağlayabiliriz.

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.