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ı metrik olarak oluşturuldu. Bu metrik, kullanıcıların sayfanın performansını algılama şekliyle genellikle alakasız olan zamanlamaları ölçen DOMContentLoaded veya load gibi mevcut teknik metrikler üzerinde bir evrimdir. Bu nedenle, siteyi oluşturmak için kullanılan teknolojinin, sitenin iyi performans göstermesini sağlayan puanlamayı etkilememesi gerekir.

Gerçeklik her zaman ideal olandan biraz daha karmaşıktır. Ayrıca, popüler Tek Sayfalık Uygulama mimarisi hiçbir zaman Core Web Vitals metrikleri tarafından tam olarak desteklenmemektedir. Bu web uygulamaları, kullanıcı sitede gezinirken ayrı ayrı web sayfaları yüklemek yerine, sayfa içeriğinin JavaScript tarafından değiştirildiği "yumuşak gezinmeler" kullanır. Bu uygulamalarda, geleneksel web sayfası mimarisi görünümü, URL'nin değiştirilmesi ve geri ve ileri düğmelerinin kullanıcının beklediği şekilde çalışmasını sağlamak için tarayıcı geçmişindeki önceki URL'lerin itilmesiyle korunur.

Birçok JavaScript çerçevesi bu modeli kullanır ancak her biri farklı bir şekildedir. Tarayıcının geleneksel olarak "sayfa" olarak tanımladığı şeyin dışında olduğundan, bunu ölçmek her zaman zor olmuştur: Geçerli sayfadaki bir etkileşim ile bunu yeni bir sayfa olarak kabul etmek arasındaki çizgi nerede çizilmelidir?

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. Henüz erken aşamalarında olan ekip, uygulanmış uygulamaları daha geniş çapta kullanıma sunarak siteler üzerinde denemeler yapmaya artık hazır. Bu sayede siteler, şu ana kadarki yaklaşımla ilgili geri bildirimde bulunabilir.

Kolay gezinme nedir?

Esnek gezinme tanımını şu şekilde bulduk:

• Gezinme, bir kullanıcı işlemiyle başlatılır.
• Gezinme, kullanıcı için görünür bir URL değişikliği ve bir geçmiş değişikliği ile sonuçlanır.
• Gezinme, bir DOM değişikliğiyle sonuçlanır.

Bazı sitelerde, bu buluşsal yöntemler yanlış pozitiflere (kullanıcıların gerçekte "gezinme"nin gerçekleştiğini kabul etmeyecekleri) veya yanlış negatiflere (kullanıcının bu ölçütleri karşılamamasına rağmen "gezinmenin" gerçekleştiğini düşünmesi durumunda) yol açabilir. Esnek gezinme spesifikasyonu deposundan buluşsal yöntemlerle ilgili geri bildirim almaktan memnuniyet duyarız.

Chrome, kolay gezinmeleri nasıl uyguluyor?

Kolay gezinme buluşsal yöntemler etkinleştirildikten sonra (sonraki bölümde bu konuyla ilgili daha fazla bilgi bulabilirsiniz) Chrome, bazı performans metriklerini raporlama şeklini değiştirir:

• Her esnek gezinme algılandığında soft-navigation PerformanceTiming etkinliği yayınlanır.
• Performance API, soft-navigation PerformanceTiming etkinliği tarafından yayınlandığı şekliyle bir soft-navigation zamanlama girişine erişim sağlar.
• İlk Boyama (FP), İlk Zengin İçerikli Boyama (FCP), Largest Contentful Paint (LCP) metrikleri sıfırlanır ve bunların sonraki uygun tekrarlarında yeniden yayınlanır. (Not: FP ve FCP uygulanmaz.)
• Etkinliğin ilgili olduğu gezinme girişine karşılık gelen performans zamanlamalarının her birine (first-paint, first-contentful-paint, largest-contentful-paint, first-input-delay, event ve layout-shift) bir navigationId özelliği eklenecek. Böylece Cumulative Layout Shift (CLS) ve Sonraki Boyamayla Etkileşim (INP) hesaplanacak.

Bu değişiklikler, Core Web Vitals'ın ve ilişkili teşhis metriklerinin bazılarının her sayfada gezinme başına ölçülmesine olanak tanıyacak. Bununla birlikte, dikkat edilmesi gereken bazı ayrıntılar vardır.

Chrome'da kolay gezinmeyi etkinleştirmenin sonuçları nelerdir?

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

• Esnek gezinmeler için ek FP, FCP ve LCP etkinlikleri yeniden yayınlanabilir. Chrome Kullanıcı Deneyimi Raporu (CrUX), bu ek değerleri yok sayar. Ancak bu durum, sitenizdeki Gerçek Kullanıcı Ölçümü (RUM) izlemelerini etkileyebilir. Bu durumun söz konusu ölçümleri etkileyip etkilemeyeceğini öğrenmek için RUM sağlayıcınıza danışabilirsiniz. Kolay gezinmeler için Core Web Vitals'ı ölçme bölümüne bakın.
• Performans girişlerinizde yer alan yeni (ve isteğe bağlı) navigationID özelliğinin, bu girişler kullanılarak uygulama kodunuzda dikkate alınması gerekebilir.
• Yalnızca Chromium tabanlı tarayıcılar bu yeni modu destekleyecek. Yeni metriklerin birçoğu yalnızca Chromium tabanlı tarayıcılarda kullanılabilse de, bazıları (FCP, LCP) diğer tarayıcılarda da kullanılabilir ve herkes Chromium tabanlı tarayıcıların en son sürümüne geçmemiş olabilir. Bu nedenle, bazı kullanıcıların esnek gezinme metriklerini rapor etmeyebileceğini unutmayın.
• Varsayılan olarak etkin olmayan deneysel yeni bir özellik olan siteler, istenmeyen başka yan etkilerin bulunmadığından emin olmak için bu özelliği test etmelidir.

Kolay gezinme ile ilgili metriklerin nasıl ölçüleceği hakkında daha fazla bilgi için Esnek gezinme başına Core Web Vitals'ı ölçme bölümüne bakın.

Chrome'da kolay gezinmeyi nasıl etkinleştiririm?

Kolay gezinme, Chrome'da varsayılan olarak etkin değildir, ancak bu özellik açıkça etkinleştirildiğinde deneme amaçlı kullanılabilir.

Geliştiriciler için bu, chrome://flags/#enable-experimental-web-platform-features adresindeki Deneysel Web Platformu özellikleri işaretini etkinleştirerek veya Chrome'u başlatırken --enable-experimental-web-platform-features komut satırı bağımsız değişkenini kullanarak etkinleştirilebilir.

Esnek gezinmeleri nasıl ölçebilirim?

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

Kolay erişilen gezinmeleri raporlama

Kolay gezinmeyi gözlemlemek için PerformanceObserver kullanabilirsiniz. Aşağıda, buffered seçeneği kullanılarak bu sayfada önceki kolay gezinmeler de dahil olmak üzere kolay gezinme girişlerini konsola kaydeden bir kod snippet'i örneğ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 ile karşılaştırarak bildirin

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

Etkinliği doğru URL'ye tekrar 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.

Kolay gezinme için startTime alınıyor

Gezinme başlangıç zamanı benzer bir yöntemle 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, kolay gezinmeyi başlatan ilk etkileşimin (örneğin, bir düğme tıklaması) zamanıdır.

Yavaş gezinmeler dahil olmak üzere tüm performans zamanlamaları, başlangıçtaki "zor" andan itibaren bir süre olarak raporlanır gezinme süresi. Bu nedenle, esnek gezinme başlangıç zamanı, bu kolay gezinme süresiyle kıyaslandığında esnek gezinme yükleme metriği sürelerinin (ör. LCP) temel çizgisini belirlemek için gereklidir.

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 dahil etmeniz 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'daki kolay gezinme özelliğinin etkinleştirilmesine ek olarak observe yönteminde ekstra includeSoftNavigationObservations işareti gereklidir. 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 yine de orijinal "katı" duruma göre döndürülür. başlangıç zamanı. 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çülür: Örneğin LCP, bir etkileşim gerçekleşene kadar değişebilir. CLS ve INP, sayfadan ayrılana kadar güncellenebilir. Dolayısıyla, her "gezinme" (orijinal gezinme dahil), her yeni esnek gezinme gerçekleştirildiğinde önceki sayfanın metriklerini tamamlaması gerekebilir. Bu, başlangıçtaki “katı”nın gezinme metrikleri normalde olduğundan daha erken tamamlanabilir.

Benzer şekilde, bu uzun ömürlü metriklerde yeni kolay gezinme için metrikler ölçülmeye başlanırken metriklerin "sıfırlanması" gerekir. veya "yeniden başlatıldı" ve önceki "sayfalar" için ayarlanan değerlerin belleği olmadan yeni metrikler olarak değerlendirilir.

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

Esnek gezinmeler için FP, FCP ve LCP yalnızca yeni boyaları ölçer. Bu durum, farklı bir LCP'ye yol açabilir. Örneğin, kolay gezinmenin baştan yüklenmesinden yavaş yüklemeye kadar farklı işlemler gerçekleşebilir.

Örneğin, LCP öğesi olan büyük bir banner resmi içeren ancak altındaki metin her bir yumuşak gezinmede değişiyor. İlk sayfa yüklemesinde banner resmi LCP öğesi olarak işaretlenir ve LCP zamanlaması buna göre belirlenir. Sonraki kolay gezinmelerde bunun altındaki metin, kolay gezinmeden sonra boyanan en büyük öğe ve yeni LCP öğesi olur. Ancak esnek gezinme URL'sine derin bağlantı içeren yeni bir sayfa yüklenirse banner resmi yeni bir boyama 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 bir bağlantı bağlantısına sahip sayfanın yüklenmesi farklı bir LCP öğesine yol açabilir.

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

Geleneksel sayfa yüklemede İlk Bayt Süresi (TTFB), orijinal isteğin ilk baytlarının döndürüldüğü süreyi temsil eder.

Yumuşak bir gezinme için bu daha zor bir sorudur. Yeni sayfa için gönderilen ilk talebi ölçmeli miyiz? Tüm içerik zaten uygulamada mevcutsa ve başka bir istek yoksa ne olur? Söz konusu istek, önceden getirme işlemiyle önceden yapılmışsa ne olur? Bir istek, kullanıcı açısından kolay gezinmeyle ilgili değilse (örneğin, bir analiz isteğiyse) 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ığı tarafından kolay gezinmeler için kullanılan yöntemdir.

Gelecekte, hangi isteğin kolay gezinmenin "gezinme isteği" olduğunu anlamanın daha kesin yollarını destekleyebiliriz. Daha hassas TTFB ölçümlerine sahip olacak. Ancak bu, mevcut denemeye dahil değildir.

Hem eski hem de yeni nasıl ölçülür?

Bu deneme sırasında, Core Web Vitals verilerinizi "katı" değerlerine göre mevcut şekilde ölçmeye devam etmeniz önerilir. sayfa gezinmelerini, Core Web Vitals girişiminin resmi veri kümesi olarak CrUX'in ölçeceği ve raporlayacağı verileri eşleştirmeye yönelik

Bunlara ek olarak kolay gezinmelerin de ölçülmesi gerekir. Böylece, bunların gelecekte nasıl ölçülebileceğini görebilirsiniz ve Chrome ekibine bu uygulamanın pratikte nasıl çalıştığına dair geri bildirim verebilirsiniz. Bu bilgiler, sizin ve Chrome ekibinin ileriye dönük olarak API'yi şekillendirmesine yardımcı olur.

Her ikisini de ölçmek için esnek gezinme modundayken yayınlanabilecek yeni etkinlikler (örneğin, birden fazla FCP ve ek LCP etkinliği) hakkında bilgi sahibi olmanız ve bu metrikleri uygun zamanda tamamlayıp bu metrikleri uygun şekilde ele almanız gerekir. Aynı zamanda, yalnızca kolay gezinme seçenekleri için geçerli olan gelecek etkinlikleri de göz ardı edebilirsiniz.

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

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

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ığı, kolay gezinmeler için aşağıdaki metrikleri raporlar:

Bu değişiklikler, Core Web Vitals ölçümlerine dahil edilecek mi?

Bu esnek gezinme denemesi tam olarak bunun için, bir denemedir. Bu yöntemin Core Web Vitals girişimine entegre edilip edilmeyeceğini karar vermeden önce buluşsal yöntemleri değerlendirmek ve kullanıcı deneyimini daha doğru yansıtıp yansıtmadıklarına bakmak istiyoruz. Bu denemenin gerçekleştirilmesi bizi çok heyecanlandırıyor. Ancak, bunun mevcut ölçümlerin yerini alıp almayacağı veya ne zaman değiştirileceği konusunda garanti veremeyiz.

Web geliştiricilerin deneme, kullanılan buluşsal yöntemler ve bunun deneyimi daha doğru yansıtıp yansıtmadığı hakkındaki geri bildirimden bahsedin. Yumuşak gezinme GitHub deposu, bu geri bildirimi sağlamak için en iyi yerdir; ancak Chrome'un bu uygulamadaki hataları, Chrome sorun izleyicide bildirilmelidir.

Kolay gezinmeler CrUX'te nasıl raporlanır?

Bu denemenin başarılı olması durumunda, kolay gezinmelerin CrUX'te tam olarak nasıl raporlanacağı da henüz belli değil. Mevcut "zor" durumlarla aynı şekilde ele alınacak olması şart değildir. nasıl işlediğini tartıştık.

Bazı web sayfalarında, kullanıcı açısından kolay gezinmeler tam sayfa yüklemeleriyle neredeyse aynıdır. Tek Sayfalık Uygulama teknolojisinin kullanımı yalnızca bir uygulama ayrıntısıdır. Bazı durumlarda ise ek içeriklerin kısmi yüklenmesine benzer.

Bu nedenle, bu kolay gezinmeleri CrUX'te ayrı olarak bildirmeye karar verebilir veya belirli bir sayfa ya da sayfa grubu için Önemli Web Verileri'ni hesaplarken bunlara ağırlık vermeyi tercih edebiliriz. Ayrıca, buluşsal yöntem 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 bulgusal ve teknik uygulamaya yoğunlaştığından, bu meselelerle ilgili herhangi bir karar alınmadı.

Geri bildirim

Aşağıdaki yerlerden bu denemeyle ilgili aktif olarak geri bildirim istiyoruz:

• Esnek gezinme bulguları ve standartlaştırma.
• Bu buluşsal yöntemlerin Chrome uygulama sorunlarını.
• Genel Web Verileri geri bildirimi için web-vitals-feedback@googlegrouops.com adresini ziyaret edin.

Değişiklik günlüğü

Bu API deneme aşamasında olduğundan, kararlı API'lere kıyasla daha çok değişiklik yapılmaktadır. Daha ayrıntılı bilgi için Esnek Gezinme Buluşsal Değişiklik Günlüğü'ne bakabilirsiniz.

Sonuç

Kolay gezinme denemesi, Core Web Vitals girişiminin modern web'de metriklerimizde eksik olan ortak bir kalıbı ölçmek için nasıl geliştirilebileceğine dair heyecan verici bir yaklaşım. Bu deneysel çalışma henüz çok yeni olsa da (henüz daha yapılacak çok iş var) ilerlemeyi daha geniş web topluluğunun kullanımına sunmak, deneme yapmak için önemli bir adım. Bu denemeden geri bildirim almak, denemenin başka bir önemli adımıdır. Bu nedenle, bu geliştirmeyle ilgilenenlere bu fırsatı kullanarak API'yi şekillendirmeye yardımcı olacak şekilde şekillendirmelerini kesinlikle öneririz.

Teşekkür

Jordan Madrid'in Unsplash'teki küçük resmi