Yavaş gezinmeleri ölçmeyle ilgili denemeler yapma

Barry Pollard

Michal Mocny

Yayınlanma tarihi: 1 Şubat 2023, Son güncelleme tarihi: 20 Nisan 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 sayfalık uygulama mimarisi hiçbir zaman Core Web Vitals metrikleri tarafından tam olarak desteklenmemiştir. Bu web uygulamaları, kullanıcı sitede gezinirken farklı ve 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 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ğ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.

Bu tanım, bazı sitelerde yanlış pozitiflere (kullanıcıların gerçekten "gezinme" olarak değerlendirmeyeceği durumlar) veya yanlış negatiflere (kullanıcının bu ölçütleri karşılamamasına rağmen "gezinme" olarak değerlendirdiği durumlar) yol açabilir. Geri bildirimlerinizi yumuşak gezinme spesifikasyonu deposunda bekliyoruz.

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 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 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 API'si 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, 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 ve etkileşimle ilgili daha fazla interaction-contentful-paint girişi gözlemlendikçe LCP güncellenebilir.
• 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, 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, bu gezinme için FCP olarak paintTime ve presentationTime değerlerini de içerir.
• interaction-contentful-paint girişlerinin, sonraki etkileşimlerden 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 gezinmesi 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, sayfanın tüm yaşam döngüsü boyunca ö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) tamamlandığından 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 etkin değildir ancak bu özelliği açıkça etkinleştirerek deneysel olarak kullanılabilir.

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.

Soft Navigations API desteğini algılama özelliğ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, ilk kullanımda dondurulur. Bu nedenle, sayfaya yerleştirilen bir kaynak denemesi jetonuyla dinamik olarak yumuşak 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 sayfa uygulaması 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'nin hesaplanması için ek hususların dikkate alınması 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 eder. 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 gezinmeler de 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 raporlanır. Bu nedenle, bu süreye göre raporlamak için geçişsiz gezinme başlangıç zamanı, geçişsiz 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'nın, interactionId eşleşmelerini sağlayan 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. Aynı şekilde, sayfayı daha aşağıda bulunan bir yer işareti bağlantısı ile yüklemek de zorunlu 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 sorunlar yaşayabileceğinden veya değişebileceğinden, Core Web Vitals'ınızı "sert" 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).

Bu metriklerin yanı sıra, 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 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 API'yi değerlendirmek ve Core Web Vitals girişimine entegre edilip edilmeyeceğine karar vermeden önce 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 denemeyle ilgili geri bildirimlerini ve deneyimi daha doğru yansıttığını düşünüp düşünmediklerini öğrenmek istiyoruz. 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. Bunların, mevcut "zorunlu" gezinmelerle aynı şekilde değerlendirileceği garanti edilmez.

Bazı web sayfalarında, kullanıcı açısından bakıldığında yumuşak gezinmeler neredeyse tam sayfa yüklemeleriyle 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.

Ekip, bu denemenin başarısını değerlendirmemize olanak tanıyacak 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ız kalırsanız endişelenmeyin. Geri bildirimi her iki yerde de almayı tercih ederiz. Her iki yerdeki sorunları da öncelik sırasına göre ele alıp doğru yere yönlendiririz.

Değişiklik günlüğü

Bu API deneysel olduğu için kararlı API'lere kıyasla daha fazla değişikliğe uğradı. Daha fazla bilgi için Soft Navigations Değişiklik Günlüğü'ne bakabilirsiniz.

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

Jordan Madrid tarafından Unsplash'te yayınlanan 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.